Browser Qa

1---2name: browser-qa3description: Use this skill to automate visual testing and UI interaction verification using browser automation after deploying features.4origin: ECC5---6 7# Browser QA — Automated Visual Testing & Interaction8 9## When to Use10 11- After deploying a feature to staging/preview12- When you need to verify UI behavior across pages13- Before shipping — confirm layouts, forms, interactions actually work14- When reviewing PRs that touch frontend code15- Accessibility audits and responsive testing16 17## How It Works18 19Uses the browser automation MCP (claude-in-chrome, Playwright, or Puppeteer) to interact with live pages like a real user.20 21### Phase 1: Smoke Test22```231. Navigate to target URL242. Check for console errors (filter noise: analytics, third-party)253. Verify no 4xx/5xx in network requests264. Screenshot above-the-fold on desktop + mobile viewport275. Check Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms28```29 30### Phase 2: Interaction Test31```321. Click every nav link — verify no dead links332. Submit forms with valid data — verify success state343. Submit forms with invalid data — verify error state354. Test auth flow: login → protected page → logout365. Test critical user journeys (checkout, onboarding, search)37```38 39### Phase 3: Visual Regression40```411. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)422. Compare against baseline screenshots (if stored)433. Flag layout shifts > 5px, missing elements, overflow444. Check dark mode if applicable45```46 47### Phase 4: Accessibility48```491. Run axe-core or equivalent on each page502. Flag WCAG AA violations (contrast, labels, focus order)513. Verify keyboard navigation works end-to-end524. Check screen reader landmarks53```54 55## Output Format56 57```markdown58## QA Report — [URL] — [timestamp]59 60### Smoke Test61- Console errors: 0 critical, 2 warnings (analytics noise)62- Network: all 200/304, no failures63- Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓64 65### Interactions66- [✓] Nav links: 12/12 working67- [✗] Contact form: missing error state for invalid email68- [✓] Auth flow: login/logout working69 70### Visual71- [✗] Hero section overflows on 375px viewport72- [✓] Dark mode: all pages consistent73 74### Accessibility75- 2 AA violations: missing alt text on hero image, low contrast on footer links76 77### Verdict: SHIP WITH FIXES (2 issues, 0 blockers)78```79 80## Integration81 82Works with any browser MCP:83- `mChild__claude-in-chrome__*` tools (preferred — uses your actual Chrome)84- Playwright via `mcp__browserbase__*`85- Direct Puppeteer scripts86 87Pair with `/canary-watch` for post-deploy monitoring.