From agent-browser-integration-testing
浏览器自动化与E2E集成测试专家,支持网页操作、表单填写、截图取证、网络审计,自动生成标准化测试报告,适用于功能验证、回归测试、业务流程测试。
How this skill is triggered — by the user, by Claude, or both
Slash command
/agent-browser-integration-testing:agent-browser-integration-testingThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
本技能让Agent-browser通过精确的原子命令控制浏览器。它采用可访问性树快照机制,为交互元素分配稳定的临时ref,即使在动态页面上也能确保元素定位的可靠性,从而能够对页面所有功能进行准确且完善的集成测试。
本技能让Agent-browser通过精确的原子命令控制浏览器。它采用可访问性树快照机制,为交互元素分配稳定的临时ref,即使在动态页面上也能确保元素定位的可靠性,从而能够对页面所有功能进行准确且完善的集成测试。
核心作业流程 (SOP - 渐进式报告):
references/REPORT_GUIDE.md 的头部格式,立即创建报告文件,写入 Target URL 和 Date。
references/REPORT_TEMPLATE.md 作为报告骨架(复制为报告文件内容),再对报告进行实时填充(边测试边填充)。network requests --json。REPORT_GUIDE.md 要求,每个关键步骤后必须立即写入报告文件:
 语法嵌入到"5. 证据" 部分。node scripts/validate-report.js <report-path> 进行合规校验,通过后才可输出。agent-browser --help命令进行查询。交付标准:必须严格遵循 references/REPORT_GUIDE.md 的格式要求生成准确且完善的测试报告。
模板要求:
references/REPORT_TEMPLATE.md 复制生成。<<FILL: ...>> 占位符必须被真实值替换,禁止保留空白或占位符。字段来源映射(必须遵循):
agent-browser open 的 URL。YYYY-MM-DD HH:MM:SS)。FAILWARNPASSopen 到最后一次操作的累计耗时。document 导航次数或主要 URL 列表数量。agent-browser get title / agent-browser get url。xhr / fetch → 4.1(概览)script/stylesheet/image/font 等静态资源 → 4.3(可选)document 仅进入 执行日志,不得进入网络审计以下条目必须全部满足,否则禁止输出报告:
open 与最后一步操作。xhr/fetch;document 只在执行日志。,并配图注。<<FILL: ...>> 占位符。快速导航:
- 常用命令 → 见下方各小节
- 下拉框操作 → 3.5 下拉框操作专项 或 完整指南
打开新的浏览器会话并导航到指定URL。
agent-browser open "https://example.com/login"
返回带有唯一ref的交互元素结构视图。
agent-browser snapshot -i --json
推荐参数:
示例输出(JSON):
{
"elements": [
{
"ref": "@e1",
"role": "textbox",
"name": "Username",
"placeholder": "Enter username"
},
{
"ref": "@e2",
"role": "textbox",
"name": "Password",
"type": "password"
},
{
"ref": "@e3",
"role": "button",
"name": "Login"
}
]
}
所有动作均支持使用ref(@eX)以获得最高可靠性。
1.使用ref的常见动作:
# ============ click @ref 示例============
agent-browser fill @e1 "testuser"
agent-browser fill @e2 "P@ssw0rd123"
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser screenshot after-login.png
agent-browser snapshot -i
2.语义定位(无ref时的备选方案,ref操作失败后强制尝试备选方案):
# ============ find 示例============
agent-browser find text "Please select" click
agent-browser find role button click --name "Submit"
agent-browser find label "Email" fill "[email protected]"
agent-browser find placeholder "Search" fill "query"
agent-browser find first ".item" click
agent-browser find nth 2 ".option" click
3.执行JavaScript操作参考(ref和语义定位均失败时,必须尝试此方法)
# ============ eval 示例============
# 点击
agent-browser eval "document.querySelector('.btn').click()"
# 填写
agent-browser eval "document.querySelector('input').value = 'text'"
# 查找并点击
agent-browser eval "Array.from(document.querySelectorAll('.item')).find(i => i.textContent
=== 'X').click()"
# 获取值
agent-browser eval "document.querySelector('.selected').textContent"
# 设置状态
agent-browser eval "window.scrollTo(0, 500)"
4.选择决策树
flowchart TD
A[需要点击/操作元素] --> B{元素有 ref 吗?}
B -->|YES| C[click @ref]
B -->|NO| D{元素有清晰的<br/>文本/role/label?}
D -->|YES| E[find ...]
D -->|NO| F[eval]
其他实用动作:
下拉框是网页测试中的常见复杂交互,分为原生下拉框和自定义下拉框组件两种类型。
快速决策:
# 步骤1:识别类型
agent-browser snapshot -i
# 步骤2:根据类型选择操作
原生下拉框(看到 combobox/option)→ agent-browser select @e8 "值"
自定义下拉框(只有触发器)→ 参考[下拉框操作完整指南](references/AGENT-BROWSER-DROPDOWN-GUIDE.md)
详细指南:遇到复杂下拉框问题时,请查阅
references/AGENT-BROWSER-DROPDOWN-GUIDE.md获取完整的操作指南、示例脚本和故障排查方法。
获取自页面加载以来捕获的所有网络请求数据。建议在关键操作后调用。
# 获取请求列表(推荐使用 JSON 以便解析)
agent-browser network requests --json
用途:用于填充测试报告中的"网络交互审计"部分,特别是检查 4xx/5xx 错误。 输出示例:
[
{
"url": "https://example.com/api/login",
"method": "POST",
"type": "xhr",
"status": 200,
"duration": 350
},
{
"url": "https://example.com/static/main.js",
"method": "GET",
"type": "script",
"status": 200,
"duration": 120
}
]
agent-browser screenshot result.png --full
agent-browser get text "body" > page-content.txt
agent-browser close
click @e1 + click @e2)。references/REPORT_GUIDE.md 验证当前填充是否符合指导规范(强制)。这样即使中途崩溃,数据也不会丢失。testing-report/report-{timestamp}/ 目录下(强制务必遵循references/REPORT_GUIDE.md 中的格式和要求),文件名格式为
yyyyMMddHHmmss-{business name}-report.md(其中 timestamp 和文件名中的时间戳为测试开始时间,business name
为根据测试业务主题自定义的名称)。agent-browser命令进行查询,再执行或处理。示例报告模板:强制参考 references/REPORT_GUIDE.md 中的格式和要求为用户生成完善且符合要求的测试报告 Markdown 文件,方便用户归档和分享。
npx claudepluginhub sancodeee/sen-claude-hub --plugin agent-browser-integration-testingAutomates browser tasks like E2E testing, form filling, screenshots, and scraping using Vercel's agent-browser CLI with ref-based element targeting.
Automates E2E web app tests using agent-browser CLI with accessibility tree snapshots and ref system for stable interactions like clicks, fills, navigation, and visual checks in bash scripts.
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.