browser-test-agent
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseBrowser Test Agent (web)
浏览器测试Agent(网页版)
Two-engine web automation:
| Engine | When |
|---|---|
| agent-browser (Rust CLI, Chrome via CDP) | Default. Fast, accessibility-tree snapshots, |
| Playwright (webapp-testing toolkit) | When you need Playwright-specific features (multi-context isolation, codegen, video traces) |
双引擎网页自动化:
| 引擎 | 适用场景 |
|---|---|
| agent-browser (Rust CLI, Chrome via CDP) | 默认选项。速度快,支持无障碍树快照、 |
| Playwright (webapp-testing toolkit) | 需要Playwright特定功能时使用(多上下文隔离、代码生成、视频追踪) |
⚙️ Default Workflow (start here)
⚙️ 默认工作流程(从这里开始)
When invoked, say:
"I'll start with the default workflow and assess what stage we're at, then continue from there. If everything is done, I'll come back and ask for your decisions. I can also do A/B/C alternatives — let me know if you want me to lay out capabilities and trade-offs."
The default workflow (run sequentially, wait between steps):
- Probe environment — is the dev server running? or
curl http://localhost:3000with a short timeout.agent-browser open <url> - Capture baseline — screenshot + console-error dump + interactive-element snapshot.
- Run the user's specific test (or the dev-server-verification checklist below if none specified).
- Diagnose failures with the Browser + Server correlation table.
- Iterate — fix issue, re-run, repeat (max 2 retry cycles).
Wait between every step before moving to the next. Don't batch.
调用时,请说明:
"我将从默认工作流程开始,评估当前所处阶段,然后继续推进。如果所有步骤完成,我会返回并询问您的决策。我也可以提供A/B/C替代方案——如果您希望我列出功能特性和权衡点,请告知。"
默认工作流程(按顺序执行,步骤间等待):
- 探测环境 —— 开发服务器是否在运行?使用或带短超时的
curl http://localhost:3000。agent-browser open <url> - 捕获基准状态 —— 截图 + 控制台错误导出 + 交互元素快照。
- 执行用户指定的测试(如果未指定,则执行下方的开发服务器验证清单)。
- 通过浏览器与服务器关联表诊断故障。
- 迭代优化 —— 修复问题,重新运行,重复(最多2次重试循环)。
每一步之间都要等待,再进入下一步。不要批量执行。
Watching for human comments while waiting
等待期间监控人工评论
When a step is waiting on the user, a CI run, or any external event, set up a polling watcher so you don't waste tokens spinning:
bash
undefined当步骤等待用户操作、CI运行或任何外部事件时,设置轮询监控器,避免浪费令牌:
bash
undefinedUse the /loop slash-command (Claude Code built-in)
Use the /loop slash-command (Claude Code built-in)
/loop 10m "check for new comments on PR #<N> via gh CLI; if none, re-ping reviewers"
/loop 10m "check for new comments on PR #<N> via gh CLI; if none, re-ping reviewers"
OR use /schedule for a single delayed wake-up
OR use /schedule for a single delayed wake-up
/schedule "in 20 minutes, re-check comments and continue"
Cadence: **start at 10 minutes, back off to 30 minutes** if nothing lands. If 30 minutes pass with no comments, **repeat the request** (re-ping CR, re-ask the user) and continue iterating./schedule "in 20 minutes, re-check comments and continue"
轮询节奏:**初始为10分钟**,如果无响应则延长至30分钟。如果30分钟后仍无评论,**重复请求**(重新提醒代码评审、再次询问用户)并继续迭代。A / B / C alternative approaches
A / B / C替代方案
When the default workflow isn't right, offer:
| Path | Capability | Trade-off |
|---|---|---|
| A — agent-browser only | Fast Rust CLI, minimal deps | No multi-context, no codegen |
| B — Playwright (webapp-testing) | Codegen, multi-context, video trace, network mocking | Heavier; Node dep; slower startup |
| C — Hybrid (agent-browser for the happy path + Playwright for adversarial / multi-tab tests) | Best of both | Two installs, two mental models |
Default to A unless the user requests Playwright features or you hit an agent-browser limitation.
当默认工作流程不适用时,提供以下选项:
| 方案 | 功能特性 | 权衡点 |
|---|---|---|
| A —— 仅使用agent-browser | 快速的Rust CLI,依赖极少 | 不支持多上下文,无代码生成功能 |
| B —— Playwright(Web应用测试) | 代码生成、多上下文、视频追踪、网络模拟 | 资源占用更高;依赖Node.js;启动速度较慢 |
| C —— 混合模式(agent-browser处理正常流程 + Playwright处理多标签/对抗性测试) | 兼顾两者优势 | 需要安装两个工具,学习两种使用模式 |
除非用户要求Playwright功能或遇到agent-browser的限制,否则默认选择A。
agent-browser
agent-browser
agent-browser
agent-browser
Fast browser automation CLI for AI agents. Chrome/Chromium via CDP with
accessibility-tree snapshots and compact element refs.
@eNInstall:
npm i -g agent-browser && agent-browser install面向AI Agent的快速浏览器自动化CLI。基于CDP协议对接Chrome/Chromium,支持无障碍树快照和简洁的元素引用。
@eN安装:
npm i -g agent-browser && agent-browser installStart here
入门指南
This file is a discovery stub, not the usage guide. Before running any
command, load the actual workflow content from the CLI:
agent-browserbash
agent-browser skills get core # start here — workflows, common patterns, troubleshooting
agent-browser skills get core --full # include full command reference and templatesThe CLI serves skill content that always matches the installed version,
so instructions never go stale. The content in this stub cannot change
between releases, which is why it just points at .
skills get core此文件为发现 Stub,而非使用指南。运行任何命令前,请从CLI加载实际工作流程内容:
agent-browserbash
agent-browser skills get core # 从这里开始——工作流程、常见模式、故障排查
agent-browser skills get core --full # 包含完整命令参考和模板CLI提供的技能内容始终与已安装版本匹配,因此说明不会过时。此Stub中的内容无法在版本间变更,因此仅作为指向的入口。
skills get coreSpecialized skills
专业技能
Load a specialized skill when the task falls outside browser web pages:
bash
agent-browser skills get electron # Electron desktop apps (VS Code, Slack, Discord, Figma, ...)
agent-browser skills get slack # Slack workspace automation
agent-browser skills get dogfood # Exploratory testing / QA / bug hunts
agent-browser skills get vercel-sandbox # agent-browser inside Vercel Sandbox microVMs
agent-browser skills get agentcore # AWS Bedrock AgentCore cloud browsersRun to see everything available on the
installed version.
agent-browser skills list当任务超出网页浏览器范围时,加载专业技能:
bash
agent-browser skills get electron # Electron桌面应用(VS Code、Slack、Discord、Figma等)
agent-browser skills get slack # Slack工作区自动化
agent-browser skills get dogfood # 探索性测试/QA/漏洞排查
agent-browser skills get vercel-sandbox # Vercel Sandbox微虚拟机中的agent-browser
agent-browser skills get agentcore # AWS Bedrock AgentCore云浏览器运行查看已安装版本支持的所有技能。
agent-browser skills listWhy agent-browser
选择agent-browser的理由
- Fast native Rust CLI, not a Node.js wrapper
- Works with any AI agent (Cursor, Claude Code, Codex, Continue, Windsurf, etc.)
- Chrome/Chromium via CDP with no Playwright or Puppeteer dependency
- Accessibility-tree snapshots with element refs for reliable interaction
- Sessions, authentication vault, state persistence, video recording
- Specialized skills for Electron apps, Slack, exploratory testing, cloud providers
- 基于原生Rust的快速CLI,而非Node.js包装器
- 兼容所有AI Agent(Cursor、Claude Code、Codex、Continue、Windsurf等)
- 通过CDP对接Chrome/Chromium,无需依赖Playwright或Puppeteer
- 支持带元素引用的无障碍树快照,实现可靠交互
- 会话管理、认证存储库、状态持久化、视频录制
- 针对Electron应用、Slack、探索性测试、云服务商的专业技能
Dev-server verification mode
开发服务器验证模式
(Merged from former agent-browser-verify skill — use when a dev server just started and you want a visual gut-check.)
(合并自原agent-browser-verify技能——当开发服务器刚启动,需要直观检查时使用。)
Dev Server Verification with agent-browser
使用agent-browser验证开发服务器
You MUST verify the dev server with agent-browser after starting it. Do not assume the page works just because the dev server process started. Many issues (blank pages, hydration errors, missing env vars, broken imports) are only visible in the browser. Run this verification before continuing with any other work:
启动开发服务器后,必须使用agent-browser进行验证。不要仅因为开发服务器进程启动就假设页面正常运行。许多问题(空白页面、 hydration错误、缺失环境变量、导入失败)只有在浏览器中才可见。继续其他工作前,请先运行此验证:
Quick Verification Flow
快速验证流程
bash
undefinedbash
undefined1. Open the dev server
1. 打开开发服务器
agent-browser open http://localhost:3000
agent-browser wait --load networkidle
agent-browser open http://localhost:3000
agent-browser wait --load networkidle
2. Screenshot for visual check
2. 截图用于视觉检查
agent-browser screenshot --annotate
agent-browser screenshot --annotate
3. Check for errors
3. 检查错误
agent-browser eval 'JSON.stringify(window.__consoleErrors || [])'
agent-browser eval 'JSON.stringify(window.__consoleErrors || [])'
4. Snapshot interactive elements
4. 快照交互元素
agent-browser snapshot -i
undefinedagent-browser snapshot -i
undefinedVerification Checklist
验证清单
Run each check and report results:
- Page loads — succeeds without timeout
agent-browser open - No blank page — snapshot shows meaningful content (not empty body)
- No error overlay — no Next.js/Vite error overlay detected
- Console errors — evaluate for error modals
document.querySelectorAll('[data-nextjs-dialog]') - Key elements render — snapshot shows expected interactive elements
-i - Navigation works — if multiple routes exist, verify at least the home route
执行每项检查并报告结果:
- 页面加载 —— 成功且无超时
agent-browser open - 无空白页面 —— 快照显示有意义的内容(非空body)
- 无错误浮层 —— 未检测到Next.js/Vite错误浮层
- 控制台错误 —— 执行检查错误模态框
document.querySelectorAll('[data-nextjs-dialog]') - 关键元素渲染 —— 快照显示预期的交互元素
-i - 导航正常 —— 如果存在多个路由,至少验证首页路由
Error Detection
错误检测
bash
undefinedbash
undefinedCheck for framework error overlays
检查框架错误浮层
agent-browser eval 'document.querySelector("[data-nextjs-dialog], .vite-error-overlay, #webpack-dev-server-client-overlay") ? "ERROR_OVERLAY" : "OK"'
agent-browser eval 'document.querySelector("[data-nextjs-dialog], .vite-error-overlay, #webpack-dev-server-client-overlay") ? "ERROR_OVERLAY" : "OK"'
Check page isn't blank
检查页面是否为空
agent-browser eval 'document.body.innerText.trim().length > 0 ? "HAS_CONTENT" : "BLANK"'
undefinedagent-browser eval 'document.body.innerText.trim().length > 0 ? "HAS_CONTENT" : "BLANK"'
undefinedOn Failure
验证失败时的处理
If verification fails:
- Screenshot the error state:
agent-browser screenshot error-state.png - Capture the error overlay text or console output
- Close the browser:
agent-browser close - Fix the issue in code
- Re-run verification (max 2 retry cycles to avoid infinite loops)
如果验证失败:
- 截图错误状态:
agent-browser screenshot error-state.png - 捕获错误浮层文本或控制台输出
- 关闭浏览器:
agent-browser close - 在代码中修复问题
- 重新运行验证(最多2次重试循环,避免无限循环)
Diagnosing a Hanging or Stuck Page
诊断挂起或卡住的页面
When the page appears stuck (spinner, blank content after load, frozen UI), the browser is only half the story. Correlate what you see in the browser with server-side evidence:
当页面出现卡住状态(加载 spinner、加载后空白内容、UI冻结)时,浏览器只是问题的一部分。需将浏览器中的现象与服务器端证据关联分析:
1. Capture Browser Evidence
1. 捕获浏览器端证据
bash
undefinedbash
undefinedScreenshot the stuck state
截图卡住状态
agent-browser screenshot stuck-state.png
agent-browser screenshot stuck-state.png
Check for pending network requests (XHR/fetch that never resolved)
检查待处理的网络请求(未完成的XHR/fetch)
agent-browser eval 'JSON.stringify(performance.getEntriesByType("resource").filter(r => r.duration === 0).map(r => r.name))'
agent-browser eval 'JSON.stringify(performance.getEntriesByType("resource").filter(r => r.duration === 0).map(r => r.name))'
Check console for errors or warnings
检查控制台错误或警告
agent-browser eval 'JSON.stringify(window.__consoleErrors || [])'
agent-browser eval 'JSON.stringify(window.__consoleErrors || [])'
Look for fetch calls to workflow/API routes that are pending
查找待处理的工作流/API路由请求
agent-browser eval 'document.querySelector("[data-nextjs-dialog]") ? "ERROR_OVERLAY" : "OK"'
undefinedagent-browser eval 'document.querySelector("[data-nextjs-dialog]") ? "ERROR_OVERLAY" : "OK"'
undefined2. Check Server Logs
2. 检查服务器日志
After capturing browser state, immediately check the backend:
bash
undefined捕获浏览器状态后,立即检查后端:
bash
undefinedStream Vercel runtime logs for the deployment
流式查看Vercel部署的运行时日志
vercel logs --follow
vercel logs --follow
If using Workflow DevKit, check run status
如果使用Workflow DevKit,检查运行状态
npx workflow inspect runs
npx workflow inspect run <run_id>
npx workflow inspect runs
npx workflow inspect run <run_id>
Check workflow health
检查工作流健康状态
npx workflow health
undefinednpx workflow health
undefined3. Correlate Browser + Server
3. 关联浏览器与服务器信息
| Browser Shows | Server Shows | Likely Issue |
|---|---|---|
| Spinner / loading forever | No recent function invocations | API route not being called — check fetch URL in client code |
| Spinner / loading forever | Function started but no step logs | Workflow step is stuck — add |
| Blank page, no errors | Build succeeded, no runtime errors | Hydration issue or missing data — check SSR vs client rendering |
| Network request pending | 504 Gateway Timeout in logs | Function timeout — increase |
| Console: "Failed to fetch" | OIDC/credential error in logs | Missing |
| Error overlay visible | Stack trace in runtime logs | Read the server error — it usually has more detail than the client |
| 浏览器现象 | 服务器状态 | 可能的问题 |
|---|---|---|
| 持续加载/spinner | 无最近的函数调用 | API路由未被调用——检查客户端代码中的fetch URL |
| 持续加载/spinner | 函数已启动但无步骤日志 | 工作流步骤卡住——在步骤入口/出口添加 |
| 空白页面,无错误 | 构建成功,无运行时错误 | Hydration问题或数据缺失——检查SSR与客户端渲染差异 |
| 网络请求待处理 | 日志中显示504 Gateway Timeout | 函数超时——增加 |
| 控制台显示"Failed to fetch" | 日志中显示OIDC/凭证错误 | 缺失 |
| 可见错误浮层 | 运行时日志中有堆栈跟踪 | 查看服务器错误——通常比客户端错误更详细 |
4. Fix and Re-verify
4. 修复并重新验证
After fixing the issue:
bash
undefined修复问题后:
bash
undefinedRe-open and verify the fix
重新打开并验证修复效果
agent-browser open http://localhost:3000
agent-browser wait --load networkidle
agent-browser screenshot after-fix.png
agent-browser eval 'document.body.innerText.trim().length > 0 ? "HAS_CONTENT" : "BLANK"'
agent-browser close
undefinedagent-browser open http://localhost:3000
agent-browser wait --load networkidle
agent-browser screenshot after-fix.png
agent-browser eval 'document.body.innerText.trim().length > 0 ? "HAS_CONTENT" : "BLANK"'
agent-browser close
undefinedOn Success
验证成功时的处理
bash
agent-browser closeReport: "Dev server verified — page loads, no errors detected, key UI elements render correctly."
bash
agent-browser close报告:“开发服务器验证通过——页面正常加载,未检测到错误,关键UI元素渲染正确。”
Suggest Verification After Implementation
建议在实现后进行验证
When you finish building or implementing a feature (wrote code, created routes, set up a project), briefly let the user know they can ask you to verify everything works with a browser check. One sentence is enough. Don't force it if only a small fix or question was involved.
<!-- cross-ref:start -->完成功能构建或实现(编写代码、创建路由、设置项目)后,简要告知用户可以请求您通过浏览器检查验证所有功能是否正常。一句话即可,若仅涉及小修复或简单问题则无需强制。
<!-- cross-ref:start -->See also (related skills — Browser / QA family)
相关技能(浏览器/QA系列)
If your issue relates to:
- Playwright toolkit for local web apps — check if appropriate.
webapp-testing - exploratory testing with full repro evidence — check if appropriate.
dogfood - agent-browser 0.26.0 Linux workarounds (read before dogfood) — check if appropriate.
dogfood-quirks
如果您的问题涉及:
- 通用浏览器自动化CLI + 开发服务器验证 —— 适用时请查看。
agent-browser - 带完整复现证据的探索性测试 —— 适用时请查看。
dogfood - agent-browser 0.26.0 Linux兼容方案(使用dogfood前阅读) —— 适用时请查看。
dogfood-quirks
Playwright toolkit (webapp-testing — merged)
Playwright工具包(webapp-testing——已合并)
Web Application Testing
Web应用测试
To test local web applications, write native Python Playwright scripts.
Helper Scripts Available:
- - Manages server lifecycle (supports multiple servers)
scripts/with_server.py
Always run scripts with first to see usage. DO NOT read the source until you try running the script first and find that a customized solution is abslutely necessary. These scripts can be very large and thus pollute your context window. They exist to be called directly as black-box scripts rather than ingested into your context window.
--help测试本地Web应用时,编写原生Python Playwright脚本。
可用辅助脚本:
- - 管理服务器生命周期(支持多服务器)
scripts/with_server.py
运行脚本前务必先执行查看用法。在尝试运行脚本并确认确实需要定制方案前,请勿阅读源代码。这些脚本可能非常庞大,会占用上下文窗口。它们旨在作为黑盒脚本直接调用,而非导入到上下文窗口中。
--helpDecision Tree: Choosing Your Approach
决策树:选择合适的方案
User task → Is it static HTML?
├─ Yes → Read HTML file directly to identify selectors
│ ├─ Success → Write Playwright script using selectors
│ └─ Fails/Incomplete → Treat as dynamic (below)
│
└─ No (dynamic webapp) → Is the server already running?
├─ No → Run: python scripts/with_server.py --help
│ Then use the helper + write simplified Playwright script
│
└─ Yes → Reconnaissance-then-action:
1. Navigate and wait for networkidle
2. Take screenshot or inspect DOM
3. Identify selectors from rendered state
4. Execute actions with discovered selectors用户任务 → 是否为静态HTML?
├─ 是 → 直接读取HTML文件识别选择器
│ ├─ 成功 → 使用选择器编写Playwright脚本
│ └─ 失败/不完整 → 按动态应用处理(见下方)
│
└─ 否(动态Web应用) → 服务器是否已运行?
├─ 否 → 运行:python scripts/with_server.py --help
│ 然后使用辅助脚本 + 编写简化的Playwright脚本
│
└─ 是 → 先侦察再执行:
1. 导航并等待networkidle状态
2. 截图或检查DOM
3. 从渲染状态识别选择器
4. 使用发现的选择器执行操作Example: Using with_server.py
示例:使用with_server.py
To start a server, run first, then use the helper:
--helpSingle server:
bash
python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.pyMultiple servers (e.g., backend + frontend):
bash
python scripts/with_server.py \
--server "cd backend && python server.py" --port 3000 \
--server "cd frontend && npm run dev" --port 5173 \
-- python your_automation.pyTo create an automation script, include only Playwright logic (servers are managed automatically):
python
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode
page = browser.new_page()
page.goto('http://localhost:5173') # Server already running and ready
page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute
# ... your automation logic
browser.close()启动服务器时,先执行,再使用辅助脚本:
--help单服务器:
bash
python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py多服务器(例如后端+前端):
bash
python scripts/with_server.py \
--server "cd backend && python server.py" --port 3000 \
--server "cd frontend && npm run dev" --port 5173 \
-- python your_automation.py创建自动化脚本时,仅包含Playwright逻辑(服务器由辅助脚本自动管理):
python
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode
page = browser.new_page()
page.goto('http://localhost:5173') # Server already running and ready
page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute
# ... your automation logic
browser.close()Reconnaissance-Then-Action Pattern
先侦察再执行模式
-
Inspect rendered DOM:python
page.screenshot(path='/tmp/inspect.png', full_page=True) content = page.content() page.locator('button').all() -
Identify selectors from inspection results
-
Execute actions using discovered selectors
-
检查渲染后的DOM:python
page.screenshot(path='/tmp/inspect.png', full_page=True) content = page.content() page.locator('button').all() -
从检查结果中识别选择器
-
使用发现的选择器执行操作
Common Pitfall
常见陷阱
❌ Don't inspect the DOM before waiting for on dynamic apps
✅ Do wait for before inspection
networkidlepage.wait_for_load_state('networkidle')❌ 不要在动态应用中未等待就检查DOM
✅ 务必在检查前等待
networkidlepage.wait_for_load_state('networkidle')Best Practices
最佳实践
- Use bundled scripts as black boxes - To accomplish a task, consider whether one of the scripts available in can help. These scripts handle common, complex workflows reliably without cluttering the context window. Use
scripts/to see usage, then invoke directly.--help - Use for synchronous scripts
sync_playwright() - Always close the browser when done
- Use descriptive selectors: ,
text=, CSS selectors, or IDsrole= - Add appropriate waits: or
page.wait_for_selector()page.wait_for_timeout()
- 将捆绑脚本作为黑盒使用 - 完成任务时,先考虑中的脚本是否能提供帮助。这些脚本可可靠处理常见的复杂工作流,且不会占用上下文窗口。使用
scripts/查看用法,然后直接调用。--help - 使用编写同步脚本
sync_playwright() - 完成后务必关闭浏览器
- 使用描述性选择器:、
text=、CSS选择器或IDrole= - 添加适当的等待:或
page.wait_for_selector()page.wait_for_timeout()
Reference Files
参考文件
- examples/ - Examples showing common patterns:
- - Discovering buttons, links, and inputs on a page
element_discovery.py - - Using file:// URLs for local HTML
static_html_automation.py - - Capturing console logs during automation
console_logging.py
- examples/ - 展示常见模式的示例:
- - 发现页面上的按钮、链接和输入框
element_discovery.py - - 对本地HTML使用file:// URL
static_html_automation.py - - 自动化过程中捕获控制台日志
console_logging.py
See also (related skills — Browser / QA family)
相关技能(浏览器/QA系列)
If your issue relates to:
- browser automation CLI (general + dev-server verify) — check if appropriate.
agent-browser - exploratory testing with full repro evidence — check if appropriate.
dogfood - agent-browser 0.26.0 Linux workarounds (read before dogfood) — check if appropriate.
dogfood-quirks
如果您的问题涉及:
- 通用浏览器自动化CLI + 开发服务器验证 —— 适用时请查看。
agent-browser - 带完整复现证据的探索性测试 —— 适用时请查看。
dogfood - agent-browser 0.26.0 Linux兼容方案(使用dogfood前阅读) —— 适用时请查看。
dogfood-quirks