Browser QA — Automated Visual Testing & Interaction

When to Use

• After deploying a feature to staging/preview
• When you need to verify UI behavior across pages
• Before shipping — confirm layouts, forms, interactions actually work
• When reviewing PRs that touch frontend code
• Accessibility audits and responsive testing

How It Works

Uses the browser automation MCP (claude-in-chrome, Playwright, or Puppeteer) to interact with live pages like a real user.

Phase 1: Smoke Test

1. Navigate to target URL
Check for console errors (filter noise: analytics, third-party)
Verify no 4xx/5xx in network requests
Screenshot above-the-fold on desktop + mobile viewport
Check Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms

Phase 2: Interaction Test

1. Click every nav link — verify no dead links
Submit forms with valid data — verify success state
Submit forms with invalid data — verify error state
Test auth flow: login → protected page → logout
Test critical user journeys (checkout, onboarding, search)

Phase 3: Visual Regression

1. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)
Compare against baseline screenshots (if stored)
Flag layout shifts > 5px, missing elements, overflow
Check dark mode if applicable

Phase 4: Accessibility

1. Run axe-core or equivalent on each page
Flag WCAG AA violations (contrast, labels, focus order)
Verify keyboard navigation works end-to-end
Check screen reader landmarks

Output Format

## QA Report — [URL] — [timestamp]
Smoke Test
Console errors: 0 critical, 2 warnings (analytics noise)
Network: all 200/304, no failures
Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓

Interactions
[✓] Nav links: 12/12 working
[✗] Contact form: missing error state for invalid email
[✓] Auth flow: login/logout working

Visual
[✗] Hero section overflows on 375px viewport
[✓] Dark mode: all pages consistent

Accessibility
2 AA violations: missing alt text on hero image, low contrast on footer links

Verdict: SHIP WITH FIXES (2 issues, 0 blockers)

Integration

Works with any browser MCP:

• mChild__claude-in-chrome__* tools (preferred — uses your actual Chrome)
• Playwright via mcp__browserbase__*
• Direct Puppeteer scripts