Agent Skills
返回列表
Browser Harness 前端 QA 自动化

Browser Harness 前端 QA 自动化

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_1417f0ce/qa-agent。

技能介绍

要解决什么问题

前端 Bug 往往只有一段自然语言描述或零散截图，手工在 Chrome 里点一遍既慢，又难把「复现路径 + 网络/控制台证据」整理成可交给开发的材料。回归时还要对照修复前后行为，改了一处代码又担心牵连其它页面。纯 Playwright 脚本在 Shadow DOM、视觉布局变化时维护成本高。

技能如何工作

本技能 强制通过 Browser Harness（CDP） 操作真实浏览器，禁止改用 Playwright/Puppeteer/Selenium。LLM 把输入拆成可执行的原子步骤，默认用 截图 + 坐标点击 做视觉定位，以穿透 Shadow DOM；有 data-testid 等稳定锚点时可降级为 CSS 或文本匹配。

四条流水线对应不同输入：

  • §Q Bug 复现：结构化提取 URL/登录态等缺失项 → 规划操作 → 注入证据采集器后逐步执行 → 判断结果，必要时用视口、节流、缓存等 变异策略 最多重试 3 次 → 输出根因与修改建议
  • §R 回归验证：修复前后对比与通过/失败判定
  • §I 影响发散：结合 Git 变更做场景清单与自动验证
  • §T 用例执行：自然语言测试步骤 → 步骤×结果矩阵报告

检测到 src/ 或 package.json 时会启用与 page-spec-generator 同系的 +src 源码交叉分析。产物包括 bug-{id}-analysis.md、截图目录与 traces（网络、控制台、DOM 快照）。

边界与注意点

browser-harness --doctor 未通过时应先停流程并引导安装；不能替用户改 Chrome 设置，远程调试需在 chrome://inspect 自行授权。不可逆操作（下单、删数据等）须先确认。截图失败会降级为文本断言而不中断整条流水线；SPA 滚动建议用 js("window.scrollBy(...)") 而非 CDP mouseWheel。与只做 Given/When/Then 执行的 e2e 代理不同，本技能侧重 Bug 复现、回归、影响面与用例四类 QA 输出合一。

使用场景

  • 测试同学收到只有文字描述的前端缺陷单，需在真实 Chrome 中复现并导出截图、网络与控制台 trace 供开发定位。
  • 开发修完表单校验类 Bug 后，要按原复现路径做修复前后行为对比并给出通过或失败判定。
  • 合入改动多个页面组件的 PR 前，需结合 Git diff 列出可能影响场景并自动点验关键路径。
  • 手头是自然语言写的冒烟测试步骤，希望自动逐步执行并生成带截图的步骤×结果矩阵报告。

适合人员

  • 承接用户反馈的前端工程师，要把模糊 Bug 描述变成可复现操作链路与证据包交给同事排查。
  • 维护 Web 发版回归清单的测试工程师，需要对已修复缺陷做定向回归并留存对比报告。
  • 审查前端改动的 Tech Lead，希望在合码前对 commit 做影响面发散与自动验证结果汇总。
  • 页面大量使用 Shadow DOM、缺少稳定选择器的团队，需要依赖截图坐标点击维持自动化可执行性。