用途
Browser QA 用于在功能部署到 staging 或 preview 环境后，对 UI 行为进行自动化验证。它适合以下场景：
- 功能部署到 staging/preview 之后
- 需要跨页面验证 UI 行为时
- 发布前确认布局、表单、交互确实可用
- 审查涉及前端代码的 PR
- 无障碍审计与响应式测试
主要能力
Browser QA 使用浏览器自动化 MCP（claude-in-chrome、Playwright 或 Puppeteer）与实时页面交互，像真实用户一样操作。验证分为四个阶段：
阶段一：冒烟测试
- 导航到目标 URL
- 检查控制台错误（过滤分析、第三方等噪声）
- 验证网络请求中没有 4xx/5xx
- 在桌面和移动视口截取首屏截图
- 检查 Core Web Vitals：LCP < 2.5s、CLS < 0.1、INP < 200ms（INP 于 2024 年 3 月取代 FID，阈值依据 web.dev）
阶段二：交互测试
- 点击每个导航链接，验证没有死链
- 用有效数据提交表单，验证成功状态
- 用无效数据提交表单，验证错误状态
- 测试认证流程：登录 → 受保护页面 → 登出（仅使用测试凭据，绝不使用生产账号）
- 测试关键用户旅程（结账、引导、搜索）——默认只读；只有在明确选择加入且针对 staging 时才执行会改变数据的旅程
阶段三：视觉回归
- 在 3 个断点（375px、768px、1440px）截取关键页面截图
- 与已提交的基线截图对比——没有基线时报告 INCONCLUSIVE，绝不静默判定为 PASS
- 标记超过 5px 的布局偏移、缺失元素、溢出
- 如适用，检查深色模式
阶段四：无障碍
- 在每个页面运行 axe-core 或等效工具
- 标记 WCAG 2.2 AA 违规（对比度、标签、焦点顺序）
- 验证键盘导航端到端可用
- 检查屏幕阅读器地标
注意：axe-core 自动覆盖大约 30–40% 的 WCAG 检查项。通过自动检查是必要条件而非充分条件——键盘导航、焦点顺序和屏幕阅读器仍需人工检查。不要仅凭自动检查就报告“无障碍”。
使用方式
Browser QA 可与任意浏览器 MCP 配合使用：
- mChild__claude-in-chrome__* 工具（首选——使用你实际的 Chrome）
- 通过 mcp__browserbase__* 使用 Playwright
- 直接使用 Puppeteer 脚本
可与 /canary-watch 搭配用于部署后监控。
安全优先
Browser QA 会驱动真实认证和真实用户旅程，因此需要明确对待影响范围。默认只读：绝不要对生产 URL 运行会改变数据的旅程（结账、支付、删除、批量更新）——需要明确选择加入并提供 staging/preview URL。使用预置的测试凭据，绝不使用真实生产登录，并在保存任何截图前对凭据、令牌、PII 进行脱敏。
输出格式
## 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)
# verdict ∈ SHIP / SHIP WITH FIXES / DO NOT SHIP; use INCONCLUSIVE if no visual baseline
适用场景与限制
适用场景包括部署后验证、发布前检查、前端 PR 审查、无障碍与响应式测试。限制方面：默认只读，会改变数据的旅程需要明确选择加入并针对 staging 环境；没有视觉基线时只能给出 INCONCLUSIVE 结论；axe-core 仅覆盖约 30–40% 的 WCAG 检查项，不能仅凭自动检查判定无障碍合规。