浏览器 QA — 自动化视觉测试与交互 是做什么的？
使用时机
- 在将功能部署到登台/预览环境后
- 需要验证 UI 在多个页面间的行为时
- 发货前 — 确认布局、表单、交互确实正常工作
- 审查涉及前端代码的 PR 时
- 可访问性审计与响应式测试
工作原理
使用浏览器自动化 MCP（claude-in-chrome、Playwright 或 Puppeteer）像真实用户一样与实时页面交互。
安全第一 — 爆炸半径（默认只读运行）
浏览器 QA 驱动真实认证和真实用户旅程，因此请明确处理爆炸半径。 默认为只读：绝对不要针对生产 URL 运行可变旅程（结账、支付、删除、批量更新）——需要显式选择加入并且使用登台/预览 URL。使用种子化的测试凭据，绝不要用真实生产登录，并在保存任何截图前脱敏凭据/令牌/个人身份信息。
阶段 1：冒烟测试
1. 导航至目标 URL
2. 检查控制台错误（过滤噪音：分析、第三方）
3. 验证网络请求中无 4xx/5xx
4. 在桌面端 + 移动端视口下截图首屏内容
5. 检查核心网页指标：LCP < 2.5s，CLS < 0.1，INP < 200ms
（INP 于 2024 年 3 月取代 FID；阈值依据 web.dev）
阶段 2：交互测试
1. 点击每个导航链接 — 验证无死链接
2. 使用有效数据提交表单 — 验证成功状态
3. 使用无效数据提交表单 — 验证错误状态
4. 测试认证流程：登录 → 受保护页面 → 登出（仅使用测试凭据，绝不用生产环境）
5. 测试关键用户旅程（结账、引导流程、搜索）
— 默认为只读；仅针对登台环境执行可变旅程
并需显式选择加入（参见上方“安全第一”）
阶段 3：视觉回归
1. 在 3 个断点（375px、768px、1440px）下截图关键页面
2. 与提交的基线截图进行比较
— 无基线 ⇒ 报告 INCONCLUSIVE，切勿静默通过
3. 标记布局偏移 > 5px、缺失元素、溢出
4. 如果适用，检查深色模式
阶段 4：可访问性
1. 在每个页面上运行 axe-core 或等效工具
2. 标记 WCAG 2.2 AA 违规（对比度、标签、焦点顺序）
3. 验证键盘导航端到端工作正常
4. 检查屏幕阅读器标志性地标
注：axe-core 自动覆盖约 30–40% 的 WCAG 标准。一次干净的运行是必要条件，而非充分条件——键盘导航、焦点顺序和屏幕阅读器检查仍需手动进行。切勿仅凭自动通过就报告“可访问”。
输出格式
## QA 报告 — [URL] — [时间戳]
### 冒烟测试
- 控制台错误：0 个严重，2 个警告（分析噪音）
- 网络：全部 200/304，无失败
- 核心网页指标：LCP 1.2s ✓，CLS 0.02 ✓，INP 89ms ✓
### 交互
- [✓] 导航链接：12/12 工作正常
- [✗] 联系表单：无效邮箱时缺少错误状态
- [✓] 认证流程：登录/登出工作正常
### 视觉
- [✗] 英雄区在 375px 视口下溢出
- [✓] 深色模式：所有页面一致
### 可访问性
- 2 项 AA 违规：英雄图片缺少替代文本，页脚链接对比度低
### 结论：带修复发货（2 个问题，0 个阻塞项）
# 结论 ∈ SHIP / SHIP WITH FIXES / DO NOT SHIP；如无视觉基线则使用 INCONCLUSIVE
集成
适用于任何浏览器 MCP：
mChild__claude-in-chrome__*工具（首选 — 使用你的实际 Chrome）- 通过
mcp__browserbase__*使用 Playwright - 直接使用 Puppeteer 脚本
结合 /canary-watch 进行部署后监控。