yzfly

Chrome QA Agent — Testing skill for Claude Code

Testing community

基于 chrome-devtools MCP 的对抗式 UI 测试 skill — 分析 git diff 只测改动,或探索整个应用找 bug.

How to install Chrome QA Agent

This entry records only its repository, not the path inside it, so there is no exact command to give. Open yzfly/chrome-qa-agent and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Chrome QA Agent does

基于 chrome-devtools MCP 的对抗式 UI 测试 skill — 分析 git diff 只测改动,或探索整个应用找 bug。Claude Code / Agent Skills 适用。

Alternatives in Testing

Debug — You are tasked with helping debug issues during manual testing or implementation 10k ★
Playwright Automation — git clone Browser automation skill for end-to-end testing and web interaction 2.3k ★
Spec Kitty — Spec-Driven Development for serious software developers 1.6k ★

README

Chrome QA Agent — 对抗式 UI 测试 Skill

能捕捉 Playwright 抓不到的问题的对抗式测试。它会分析 git diff，只测发生变化的部分，或者探索整个应用来发现 bug。通过 **chrome-devtools MCP** 在真实的本地 Chrome 中运行。

安装

需要配置并连接 **chrome-devtools MCP 服务器**（它会驱动一个真实的本地 Chrome）。无需任何额外安装。

当 `mcp__chrome-devtools__*` 工具可用时即说明配置成功（可以试试 `mcp__chrome-devtools__list_pages`）。如果不可用，请添加或启用 `chrome-devtools` MCP 服务器后重试。为避免每次调用工具都要确认，可以在 `settings.json` 的 `permissions.allow` 中放行它们：

{
  "permissions": {
    "allow": [
      "mcp__chrome-devtools"
    ]
  }
}

快速上手

"Test the UI changes in my PR"         → diff 驱动 (工作流 A)
"Explore my app and find bugs"         → 探索式 (工作流 B)
"QA the staging site, group by group"  → 分组顺序测试 (工作流 C)

工作原理

分析 diff（或探索应用）来决定测什么
打开真实的本地 Chrome —— 同一个浏览器既能测 localhost 也能测已部署的 URL，只需改变 URL。使用隔离上下文可获得干净的、未登录状态的运行环境。
尝试搞破坏 —— 对抗式输入、快速点击、纯键盘操作、空状态、XSS
运行确定性检查 —— axe-core、控制台错误、损坏的图片、表单标签
报告结构化结果 —— STEP_PASS|id|evidence 或 STEP_FAIL|id|expected → actual
生成 HTML 报告 —— 内嵌截图的独立文件，可分享给评审者

测试内容

类别	方式	Playwright 漏掉的
无障碍	axe-core + 键盘导航	WCAG 违规、焦点框、屏幕阅读器语义
视觉质量	截图 + Claude 判断	布局平衡、排版、间距、空状态
响应式	视口扫描 (375px, 768px, 1440px)	移动端溢出、触控目标、内容重排
控制台健康	注入 `evaluate_script`	水合错误、失败的请求、运行时异常
错误状态	导航到空状态/错误状态	缺失的空状态、损坏的错误恢复
对抗式	XSS、空提交、快速点击、超长输入	开发者不会专门写测试的边界情况
探索式	自由导航、尝试搞破坏	你想不到要测的 bug

浏览器执行

只有一个本地 Chrome。同一套工具既测 localhost 也测已部署的站点 —— 改变的只有 URL。

打开页面 → mcp__chrome-devtools__navigate_page { type: "url", url }
干净的、未登录的标签页 → mcp__chrome-devtools__new_page { url, isolatedContext: "ui-test" }
对无障碍树（a11y）做快照 → mcp__chrome-devtools__take_snapshot（返回基于 uid 的元素）
交互 → mcp__chrome-devtools__click { uid }、mcp__chrome-devtools__fill { uid, value }、mcp__chrome-devtools__evaluate_script { function }
截图 → mcp__chrome-devtools__take_screenshot { filePath: X }
关闭标签页 → mcp__chrome-devtools__close_page