browser-qa

Browser QA — 自动化视觉测试与交互

何时使用

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

工作原理

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

阶段 1：冒烟测试

1. 导航到目标 URL
2. 检查控制台错误（过滤噪声：分析工具、第三方脚本）
3. 验证网络请求中没有 4xx/5xx
4. 在桌面端 + 移动端视口截取首屏截图
5. 检查 Core Web Vitals：LCP < 2.5s, CLS < 0.1, INP < 200ms

阶段 2：交互测试

1. 点击每个导航链接 — 验证无死链
2. 使用有效数据提交表单 — 验证成功状态
3. 使用无效数据提交表单 — 验证错误状态
4. 测试认证流程：登录 → 受保护页面 → 登出
5. 测试关键用户旅程（结账、注册引导、搜索）

阶段 3：视觉回归

1. 在 3 个断点（375px、768px、1440px）截取关键页面截图
2. 与基线截图对比（如果已存储）
3. 标记 > 5px 的布局偏移、缺失元素、溢出
4. 如适用，检查深色模式

阶段 4：无障碍

1. 在每个页面上运行 axe-core 或等效工具
2. 标记 WCAG AA 违规项（对比度、标签、焦点顺序）
3. 验证键盘导航端到端可用
4. 检查屏幕阅读器地标

输出格式

## QA 报告 — [URL] — [时间戳]

### 冒烟测试
- 控制台错误：0 个严重，2 个警告（分析工具噪声）
- 网络：全部 200/304，无失败
- Core Web Vitals：LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓

### 交互
- [✓] 导航链接：12/12 正常
- [✗] 联系表单：缺少无效邮箱的错误状态
- [✓] 认证流程：登录/登出正常

### 视觉
- [✗] 主视觉区域在 375px 视口溢出
- [✓] 深色模式：所有页面一致

### 无障碍
- 2 个 AA 违规项：主视觉图片缺少 alt 文本、页脚链接对比度不足

### 结论：修复后可发布（2 个问题，0 个阻塞项）

集成

可与任何浏览器 MCP 配合使用：

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

与 /canary-watch 配合用于部署后监控。