Browser QA — Automated Visual Testing and Interaction Verification

When to use

• After deploying features to staging / preview environments
• When you need to verify cross-page UI behavior
• Before release to confirm layouts, forms, and interactions are actually functional
• When reviewing PRs that involve frontend changes
• When performing accessibility audits and responsive testing

How it works

Use browser automation MCPs (claude-in-chrome, Playwright, or Puppeteer) to interact with live pages just like a real user would.

Phase 1: Smoke Testing

1. Open the target URL
2. Check console errors (filter noise: analytics scripts, third-party libraries)
3. Verify no 4xx / 5xx errors in network requests
4. Screenshot above-the-fold content on desktop and mobile viewports
5. Check Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms

Phase 2: Interaction Testing

1. Click all navigation links and verify no dead links
2. Submit forms with valid data and verify success state
3. Submit forms with invalid data and verify error state
4. Test authentication flow: login → protected page → logout
5. Test critical user paths (checkout, onboarding, search)

Phase 3: Visual Regression

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

Phase 4: Accessibility

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

Examples

## QA Report — [URL] — [timestamp]

### Smoke Testing
- Console errors: 0 critical, 2 warnings (analytics script noise)
- Network: all 200/304, no failed requests
- Core Web Vitals: LCP 1.2s, CLS 0.02, INP 89ms

### Interactions
- [done] Navigation links: 12/12 working
- [issue] Contact form: missing error state for invalid email
- [done] Auth flow: login / logout working

### Visual
- [issue] Hero area overflows on 375px viewport
- [done] Dark mode: consistent across all pages

### Accessibility
- 2 AA violations: Hero image missing alt text, footer links have insufficient contrast

### Conclusion: Safe to ship after fixes (2 issues, 0 blockers)

Integration

Works with any browser MCP:

• mChild__claude-in-chrome__* tools (recommended, uses your real Chrome directly)
• Playwright via mcp__browserbase__*
• Run Puppeteer scripts directly

Can be paired with /canary-watch for post-deployment continuous monitoring.