[Test] Phase 3: Chrome DevTools MCP + Visual Regression

[realproject7]

Parent: #426

Summary

Set up Chrome DevTools MCP server for agent-driven visual inspection and add visual regression testing.

Prerequisites

• Phase 1 ([Test] Phase 1: Component Tests (Vitest + Testing Library) #427) and Phase 2 ([Test] Phase 2: E2E Smoke Tests (Playwright) #428) complete
• Playwright installed and working

Setup

• Install chrome-devtools-mcp: npx chrome-devtools-mcp@latest
• Configure as MCP server in Claude Code settings (.claude/settings.json)
• Add Playwright visual comparison snapshots

Capabilities

Visual Regression (Playwright screenshots)

• Snapshot key pages: Home, Story Detail, Create, filtered views
• Compare against baseline on PR (fail if pixel diff > threshold)
• Mobile + desktop viewports

Agent-Driven Inspection (Chrome DevTools MCP)

• DOM/CSS inspection: verify design tokens applied correctly
• Console monitoring: catch React warnings, uncaught errors
• Network analysis: flag slow RPC calls, failed requests, 429s
• Performance audit: Lighthouse scores for key pages

Integration with CI

• Visual regression runs in CI on PRs
• Baseline snapshots committed to repo (__snapshots__/)
• Update snapshots with npx playwright test --update-snapshots

Acceptance Criteria

• Chrome DevTools MCP configured and accessible to agents
• Visual regression snapshots for Home, Story Detail, Create pages
• Mobile (375px) and desktop (1280px) viewports covered
• Snapshot comparison runs in CI
• Agent can use MCP tools to inspect live dev server

Dependencies

• Phase 2 ([Test] Phase 2: E2E Smoke Tests (Playwright) #428) — Playwright must be set up first