---

name: browser-qa description: 使用浏览器自动化在部署功能后进行自动化视觉测试和 UI 交互验证。 origin: ECC

浏览器 QA — 自动化视觉测试与交互验证

适用场景

• 将功能部署到预发布/预览环境后
• 需要跨页面验证 UI 行为时
• 发布前 — 确认布局、表单、交互确实正常工作
• 审查涉及前端代码的 PR 时
• 无障碍审计和响应式测试

工作原理

使用浏览器自动化 MCP（claude-in-chrome、Playwright 或 Puppeteer）像真实用户一样与实时页面交互。

阶段 1：冒烟测试

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

阶段 2：交互测试

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

阶段 3：视觉回归

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

阶段 4：无障碍性

1. Run axe-core or equivalent 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

输出格式

## 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)

集成

兼容任何浏览器 MCP：

• mChild__claude-in-chrome__* 工具（首选 — 使用你的实际 Chrome）
• 通过 mcp__browserbase__* 使用 Playwright
• 直接 Puppeteer 脚本

配合 /canary-watch 进行部署后监控。