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