Phase T: Visual Verification Test Suite

When to run: BEFORE Phase 1 (baseline capture), AFTER each Phase 4 batch, AFTER Phase 5
Depends on: Nothing

Goal

Expand the existing Playwright visual regression suite to cover ALL 22 pages (currently only 7). Capture pre-migration baselines, then use them to verify each migration batch produces visually acceptable results. Supports both automated pixel-diff and AI-assisted review.

Existing Infrastructure

The project already has:

tests/e2e/visual-dark-mode.spec.ts — 7 pages, light + dark = 14 screenshots
tests/e2e/helpers/session.ts — injectSession(), mockSupabaseApi(), MOCK_SESSION
Playwright config with dual projects: chromium-light and chromium-dark
screenshot: 'on', maxDiffPixelRatio: 0.02
Blocked external assets (Iconify CDN, placeholder images) for stable snapshots
@axe-core/playwright installed for accessibility testing

Current coverage (7 of 22 pages): Landing, Auth Login, Auth Signup, Dashboard, Clients, Posts, Settings

Missing pages (15): Auth Profile, 404, Client Detail (overview, settings, integrations, review-posts), Campaign Detail, New Campaign, Client Campaigns, Analytics, Post Editor, Admin

Tasks

1. Create mock data fixtures

[ ] Create tests/e2e/helpers/fixtures.ts with realistic mock data

The current mockSupabaseApi() returns empty arrays. Pages need realistic data so layouts render content, not just empty states.

Table	Fixture	Used by
`customer_customer`	3-5 mock clients with names, descriptions	Clients list, Client detail
`customer_posts`	5-10 mock posts with various statuses	Posts list, Review posts, Post editor
`customer_platform_post`	Platform content for mock posts	Post editor, Post detail
`customer_campaign`	2-3 mock campaigns	Campaign detail, Campaign list
`customer_integration`	Mock integrations (twitter, facebook, etc.)	Integrations page
`post_analytics`	Mock analytics data	Analytics page
`client_brand_voice`	Mock brand voice rules	Client settings
`telegram_client_mapping`	Mock Telegram connection	Client settings

Update mockSupabaseApi() to return fixture data based on URL patterns.

2. Create `visual-migration.spec.ts`

[ ] Create tests/e2e/visual-migration.spec.ts covering all 22 pages

Separate from existing visual-dark-mode.spec.ts (which keeps its own baselines undisturbed).

Test cases to add:

Public pages:
  - landing:              /                              → 'landing.png'
  - auth login:           /auth                          → 'auth-login.png'
  - auth signup:          /auth/signup                   → 'auth-signup.png'
  - auth profile:         /auth/profile                  → 'auth-profile.png'
  - 404:                  /nonexistent                   → '404.png'

Authenticated app pages:
  - dashboard:            /app                           → 'app-dashboard.png'
  - clients list:         /app/clients                   → 'app-clients.png'
  - posts list:           /app/posts                     → 'app-posts.png'
  - settings:             /app/settings                  → 'app-settings.png'
  - client overview:      /app/client/2                  → 'client-overview.png'
  - client settings:      /app/client/2/settings         → 'client-settings.png'
  - client integrations:  /app/client/2/integrations     → 'client-integrations.png'
  - client review posts:  /app/client/2/review-posts     → 'client-review-posts.png'
  - campaign detail:      /app/campaign/1                → 'campaign-detail.png'
  - new campaign:         /app/campaign/new              → 'campaign-new.png'
  - client campaigns:     /app/client/campaigns/1        → 'client-campaigns.png'
  - analytics:            /app/client/2/analytics/engagement → 'analytics.png'
  - post editor:          /app/edit?post=1               → 'post-editor.png'
  - admin:                /app/admin                     → 'admin.png'

Each test:

Mock Supabase API with fixture data
Inject auth session (for protected pages)
Navigate to the page
Wait for a key element to be visible
Take a full-page screenshot with toHaveScreenshot()
Run axe accessibility check

3. Add accessibility checks

[ ] Add @axe-core/playwright checks alongside visual checks

import AxeBuilder from '@axe-core/playwright'

// After navigation + element wait:
const a11y = await new AxeBuilder({ page }).analyze()
expect(a11y.violations).toEqual([])

4. Add mobile viewport projects

[ ] Update playwright.config.ts — add mobile projects

{
  name: 'mobile-light',
  use: { ...devices['iPhone 14'], colorScheme: 'light' },
},
{
  name: 'mobile-dark',
  use: { ...devices['iPhone 14'], colorScheme: 'dark' },
},

This gives 4 variants per page: desktop-light, desktop-dark, mobile-light, mobile-dark.

5. Create visual report generator

[ ] Create tests/e2e/helpers/generate-visual-report.ts

A script that:

Runs after Playwright visual tests complete
Reads the test results JSON
Collects all screenshot diffs (actual vs expected vs diff images)
Generates tests/e2e/visual-report.md listing:
- ✅ Pages that passed visual comparison
- ⚠️ Pages with diffs (includes image paths for AI review via view_image)
- ❌ Pages that failed to load

6. Add npm scripts

[ ] Add test scripts to package.json

"test:visual": "playwright test visual-migration",
"test:visual:update": "playwright test visual-migration --update-snapshots",
"test:visual:report": "playwright test visual-migration && tsx tests/e2e/helpers/generate-visual-report.ts"

7. Capture pre-migration baselines

[ ] Run pnpm test:visual:update to capture all baselines
[ ] Verify all 22 pages have screenshots (44 minimum: 22 × light + dark)
[ ] Commit baselines to git

cd front-end
pnpm test:visual:update
# Creates 44+ PNGs in tests/e2e/visual-migration.spec.ts-snapshots/
git add tests/e2e/visual-migration.spec.ts-snapshots/
git commit -m "test: capture pre-migration visual baselines"

How to Use During Migration

After each Phase 4 batch:

# Compare current state against baselines
pnpm test:visual

# Review failures:
# - Expected diffs (intentional design changes from Bulma → Tailwind) → update baselines
# - Unexpected diffs (broken layouts, missing content) → fix before proceeding

# Once batch is approved, update baselines:
pnpm test:visual:update
git add tests/e2e/visual-migration.spec.ts-snapshots/
git commit -m "test: update visual baselines after batch N"

After Phase 5 (final):

# Full run across all viewports
pnpm playwright test visual-migration \
  --project=chromium-light --project=chromium-dark \
  --project=mobile-light --project=mobile-dark

# Generate report for AI review
pnpm test:visual:report

Files Created

File	Purpose
`tests/e2e/visual-migration.spec.ts`	Full 22-page visual regression suite
`tests/e2e/helpers/fixtures.ts`	Mock data fixtures
`tests/e2e/helpers/generate-visual-report.ts`	Markdown report generator
`tests/e2e/visual-migration.spec.ts-snapshots/`	44+ baseline PNGs

Files Modified

File	Change
`playwright.config.ts`	Add mobile viewport projects
`package.json`	Add `test:visual`, `test:visual:update`, `test:visual:report` scripts

Checklist

[ ] fixtures.ts created with mock data for all page types
[ ] visual-migration.spec.ts covers all 22 pages
[ ] Accessibility checks pass on all pages
[ ] Mobile viewport projects added to Playwright config
[ ] Visual report generator works
[ ] npm scripts added
[ ] Pre-migration baselines captured (44+ screenshots)
[ ] Baselines committed to git
[ ] pnpm test:visual runs and compares correctly
[ ] Screenshots are stable (blocked external assets, disabled animations)