mcpField
A
agent-browser-e2e

agent-browser-e2e

github.com/owenleezy测试与质量456 次安装31 周前更新
代码仓库

关于 agent-browser-e2e

用于验证端到端网页工作流的 agent-browser 技能，说明交互前的检查、故障恢复步骤，以及遇到失败或意外结果时的人工复核节点。

主要功能

  1. 01断言前等待网络空闲
  2. 02检查现有 JavaScript 错误
  3. 03导航后刷新元素引用
  4. 04测试移动视口和离线场景
  5. 05测试后恢复联网状态

适用场景

  1. 01验证完整的网页操作流程
  2. 02在移动视口中测试网站
  3. 03检查离线或 PWA 行为
  4. 04排查断言失败和页面错误

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/owenleezy/agent-browser-skill --skill agent-browser-e2e

安装后在 Claude Code 中输入/agent-browser-e2e确认已加载。

详细介绍

端到端验证 — 执行协议

内部模板。 入口：agent-browser 技能。

切勿

NEVER assert state before `wait --load networkidle` — page may still be rendering
NEVER reuse refs after navigation — run `snapshot` again after every page change
NEVER leave `set offline on` after offline test — always restore with `set offline off`
NEVER skip `errors` check before test steps begin — pre-existing JS errors invalidate results

执行顺序

# 1. Open and wait for stable state
AGENT_BROWSER_NATIVE=1 agent-browser open <url>
AGENT_BROWSER_NATIVE=1 agent-browser wait --load networkidle

# 2. Check for errors before any interaction
AGENT_BROWSER_NATIVE=1 agent-browser errors          # → judgment gate if critical errors found
AGENT_BROWSER_NATIVE=1 agent-browser snapshot -i

# 3. Login — prefer Auth Vault over manual fill
#    First time: save credentials once
AGENT_BROWSER_NATIVE=1 agent-browser auth save myapp --url <login-url> --username admin --password secret
#    Every subsequent run: one command
AGENT_BROWSER_NATIVE=1 agent-browser auth login myapp
AGENT_BROWSER_NATIVE=1 agent-browser wait --load networkidle

# 4. Execute test steps (prefer semantic locators)
AGENT_BROWSER_NATIVE=1 agent-browser find label "Email" fill "[email protected]"
AGENT_BROWSER_NATIVE=1 agent-browser find role button click --name "Sign In"

# 5. After every navigation: re-snapshot + re-wait
AGENT_BROWSER_NATIVE=1 agent-browser wait --load networkidle
AGENT_BROWSER_NATIVE=1 agent-browser snapshot -i

# 6. Assert state
AGENT_BROWSER_NATIVE=1 agent-browser is visible @e3
AGENT_BROWSER_NATIVE=1 agent-browser is checked @e5
AGENT_BROWSER_NATIVE=1 agent-browser get text @e1

# 7. Capture evidence
AGENT_BROWSER_NATIVE=1 agent-browser screenshot --full result.png

恢复方案

故障恢复方法
元素引用已失效重新运行 snapshot，重新定位
断言内容不匹配截图 + 判断关卡
页面未加载wait --load networkidle + 最多重试 3 次
预发布环境证书错误--ignore-https-errors（切勿用于生产环境）
页面响应缓慢AGENT_BROWSER_DEFAULT_TIMEOUT=60000
大页面的输出被截断使用 --max-output <chars> 增大限制

判断关卡

遇到以下情况时暂停并询问用户：

  • 测试步骤开始前发现 JS 错误
  • 预期内容 ≠ 实际内容（可能是 bug）
  • 所有重试均已耗尽，测试步骤仍失败

设备与环境变体

# Mobile viewport
AGENT_BROWSER_NATIVE=1 agent-browser set device "iPhone 15 Pro"

# Offline / PWA
AGENT_BROWSER_NATIVE=1 agent-browser set offline
AGENT_BROWSER_NATIVE=1 agent-browser reload
# ... assert offline state ...
AGENT_BROWSER_NATIVE=1 agent-browser set offline off   # ALWAYS restore

# Geo-aware
AGENT_BROWSER_NATIVE=1 agent-browser set geo 31.2304 121.4737

常见问题

错误做法修复方法
页面加载前就断言先运行 wait --load networkidle
导航后引用已失效每次导航后都重新运行 snapshot
忘记关闭 set offline离线测试后务必运行 set offline off
预发布环境证书错误--ignore-https-errors — 切勿用于生产环境
find ref e3 fill "..."❌ ref 不是有效的 find 子命令。直接使用 @ref：fill @e3 "text" / click @e3
对话框中的标签不明确模态框打开时，find label "X" 会匹配页面上的第一个元素，可能命中背景筛选器，而不是对话框字段。优先使用 find placeholder "..."，或先用 snapshot -s ".dialog-class" 限定范围
应用打开新标签页（window.open）agent-browser 会停留在原标签页。使用 tab list 检测，然后切换：tab 1（从 0 开始的索引）
javascript "..." 不存在JS 执行命令是 eval "JS code"，不是 javascript
对话框阻止点击运行 dialog status 确认，然后运行 dialog dismiss 或 dialog accept
等待下载点击下载触发按钮后运行 wait --download <path>，不要依赖固定的 wait 3000

评论

支持 Markdown