Appearance
Everything Claude Code 的 Browser QA Skill 是一套基于 Playwright、Puppeteer 或 claude-in-chrome 的自动化 UI 测试与可视化回归验证工具。它能在功能上线前后自动模拟真实用户操作，覆盖页面加载、交互、视觉一致性与无障碍合规四大环节，生成结构化 QA 报告，极大提升前端交付质量与效率。本文将分步讲解如何在实际项目中用好该 Skill，并介绍常见集成与注意事项。
Everything Claude Code Browser QA Skill：Playwright 可视化测试与 UI 交互验证的自动化 QA
在现代前端开发中，如何确保每次上线的功能在不同设备、不同分辨率下都能稳定运行且交互无误，是持续交付和高质量产品的核心挑战。Everything Claude Code 的 Browser QA Skill 正是为此场景而设计：它通过自动化浏览器（Playwright、Puppeteer 或 claude-in-chrome MCP）模拟真实用户操作，批量完成页面加载、UI 交互、视觉回归和无障碍审计，输出结构化 QA 报告，帮助开发者在代码合并、预发布、上线前后快速发现并定位前端问题。
一、Browser QA Skill 解决了什么问题？
在没有 Browser QA Skill 之前，前端 UI 验证通常依赖人工点测、手动截图或零散的 E2E 脚本，容易遗漏边界场景、响应式错位或无障碍问题，且难以保证每次 PR 都能全量覆盖。Browser QA Skill 则提供了：
- 自动化端到端 UI 验证：一键遍历页面、表单、导航、认证流程等关键路径，发现死链、表单校验、状态切换等问题。
- 视觉回归与响应式检测：自动在多分辨率（如 375px、768px、1440px）截图并与基线比对，及时发现布局错乱、元素丢失、暗黑模式不一致等。
- 无障碍（Accessibility）合规审计：集成 axe-core 等工具自动检测 WCAG AA 级别问题，包括对比度、标签、键盘导航等。
- 结构化报告输出：统一格式输出 QA 结果，便于团队协作与持续集成追踪。
二、Skill 触发时机与典型应用场景
Browser QA Skill 适合在以下阶段自动或手动触发：
- 功能部署到 Staging/Preview 环境后：确保新功能上线前端无明显缺陷。
- 前端相关 PR 评审时：辅助 Reviewer 快速发现潜在 UI 问题。
- 上线前的全量验收：作为发布前的质量门槛，防止低级错误进入生产环境。
- 持续集成/持续交付（CI/CD）流程中：与 E2E Runner Agent、Canary Watch Skill 等协作，自动化回归测试与变更监控。
- 无障碍与响应式专项审计：定期或按需对重点页面做合规检查。
三、分阶段操作流程（Step by Step）
Browser QA Skill 的执行分为四个阶段，每一步都能独立输出详细检查结果：
1. 烟雾测试（Smoke Test）
目标：快速发现页面加载、资源请求、基础性能等重大问题。
自动化步骤：
plaintext
1. 访问目标 URL
2. 检查浏览器控制台报错（自动过滤第三方/分析类噪音）
3. 检查网络请求状态，确保无 4xx/5xx 错误
4. 桌面与移动端视口自动截图
5. 检查 Core Web Vitals（LCP、CLS、INP）是否达标示例输出：
markdown
### 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 ✓2. 交互测试（Interaction Test）
目标：模拟用户操作，验证导航、表单、认证流程等交互是否正常。
自动化步骤：
plaintext
1. 遍历所有导航链接，检测死链
2. 表单填写有效数据，验证成功提示
3. 表单填写无效数据，验证错误提示
4. 认证流程测试（登录→访问受保护页→登出）
5. 关键业务流程（如下单、注册、搜索）全流程验证示例输出：
markdown
### Interactions
- [✓] Nav links: 12/12 working
- [✗] Contact form: missing error state for invalid email
- [✓] Auth flow: login/logout working3. 视觉回归（Visual Regression）
目标：多分辨率截图与基线对比，发现布局错乱、元素缺失、响应式异常等。
自动化步骤：
plaintext
1. 关键页面分别在 375px、768px、1440px 视口截图
2. 与历史基线截图比对，标记 >5px 的布局漂移、元素丢失、溢出等
3. 检查暗黑模式一致性（如适用）示例输出：
markdown
### Visual
- [✗] Hero section overflows on 375px viewport
- [✓] Dark mode: all pages consistent4. 无障碍审计（Accessibility）
目标：自动检测 WCAG AA 级别无障碍问题，确保产品对所有用户友好。
自动化步骤：
plaintext
1. 对每个页面运行 axe-core 或等效工具
2. 标记对比度、标签、焦点顺序等 AA 级别违规
3. 验证全键盘导航可达
4. 检查屏幕阅读器地标和语义结构示例输出：
markdown
### Accessibility
- 2 AA violations: missing alt text on hero image, low contrast on footer links5. 结构化报告与判定
所有阶段结果会合并为一份结构化 QA 报告，示例如下：
markdown
## QA Report — https://your-app.com — 2024-06-01 10:23
### 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)四、与 Agent/Skill 的协作与集成模式
Browser QA Skill 可与 Everything Claude Code 体系中的多种 Agent/Skill 协同工作，构建端到端自动化质量保障：
- 与 E2E Runner Agent 搭配：自动生成并执行 Playwright E2E 测试脚本，覆盖更复杂的业务流程。
- 与 Canary Watch Skill 配合：在生产或预发布环境自动监控回归，发现上线后 UI 问题及时告警。
- 与 Verification Loop Skill 结合：作为多轮验证循环的一环，确保每次变更都经过完整 QA 检查。
- 支持多种 MCP（工具链）：可选择 claude-in-chrome（实际 Chrome 浏览器）、Playwright、Puppeteer 等，适配不同团队和 CI/CD 环境。
五、实际项目集成与使用建议
- 配置触发条件：建议在 Staging 部署、PR 合并前、定期定时任务等阶段自动触发 Browser QA Skill。
- 选择合适的 MCP 工具链：优先推荐 claude-in-chrome（本地真实浏览器），如需无头运行可选 Playwright/Puppeteer。
- 维护视觉基线：首次运行时保存关键页面截图，后续自动比对，及时发现视觉回归问题。
- 结合团队流程：将 QA 报告纳入 PR 审查、发布检查清单，推动前端质量左移。
- 与其他 Skill/Agent 联动：如需更细粒度的业务流程测试，可用 E2E Testing Skill 或自定义 Playwright 脚本扩展。
六、注意事项与常见问题
- 输出格式严格统一：Browser QA Skill 输出为结构化 Markdown，便于自动解析与团队协作。
- 第三方噪音自动过滤：控制台与网络错误会自动排除分析类、第三方脚本噪音，聚焦真实问题。
- 无障碍审计需定期关注：部分 WCAG 问题需结合设计与开发双向修复，建议与设计系统同步演进。
FAQ
Q: Browser QA Skill 与传统 E2E 测试有何区别？
A: Browser QA Skill 更侧重端到端 UI 可视化、交互和无障碍的自动化批量验证，覆盖面更广，适合快速验收和回归检测；而传统 E2E 测试脚本更适合复杂业务流程的细粒度验证。
Q: 如何与 CI/CD 流程集成？
A: 可在部署到 Staging/Preview 后自动触发 Browser QA Skill，或在 PR 合并前作为质量门槛，结合 Canary Watch Skill 实现上线后自动回归监控。
Q: 视觉回归的基线如何维护？
A: 首次运行时保存关键页面的截图作为基线，后续每次运行自动与基线比对，发现视觉漂移、元素丢失等问题时及时修正基线或修复代码。