Agent Browser Skill
Fast browser automation using accessibility tree snapshots with refs for deterministic element selection.
Why Use This Over Built-in Browser Tool
Use agent-browser when:
- - Automating multi-step workflows
- Need deterministic element selection
- Performance is critical
- Working with complex SPAs
- Need session isolation
Use built-in browser tool when:
- - Need screenshots/PDFs for analysis
- Visual inspection required
- Browser extension integration needed
Core Workflow
CODEBLOCK0
Key Commands
Navigation
CODEBLOCK1
Snapshot (Always use -i --json)
CODEBLOCK2
Interactions (Ref-based)
CODEBLOCK3
Get Information
CODEBLOCK4
Check State
CODEBLOCK5
Wait
CODEBLOCK6
Sessions (Isolated Browsers)
CODEBLOCK7
State Persistence
CODEBLOCK8
Screenshots & PDFs
CODEBLOCK9
Network Control
CODEBLOCK10
Cookies & Storage
CODEBLOCK11
Tabs & Frames
CODEBLOCK12
Snapshot Output Format
CODEBLOCK13
Best Practices
- 1. Always use
-i flag - Focus on interactive elements - Always use
--json - Easier to parse - Wait for stability - INLINECODE2
- Save auth state - Skip login flows with INLINECODE3
- Use sessions - Isolate different browser contexts
- Use
--headed for debugging - See what's happening
Example: Search and Extract
CODEBLOCK14
Example: Multi-Session Testing
CODEBLOCK15
Installation
CODEBLOCK16
Credits
Skill created by Yossi Elkrief (@MaTriXy)
agent-browser CLI by Vercel Labs
技能名称: agent-browser
详细描述:
Agent Browser 技能
利用可访问性树快照与引用实现确定性元素选择，实现快速浏览器自动化。
为何使用此工具而非内置浏览器工具
使用 agent-browser 的场景：
- - 自动化多步骤工作流
- 需要确定性元素选择
- 性能至关重要
- 处理复杂单页应用
- 需要会话隔离
使用内置浏览器工具的场景：
- - 需要截图/PDF 用于分析
- 需要视觉检查
- 需要浏览器扩展集成
核心工作流
bash
1. 导航并快照
agent-browser open https://example.com
agent-browser snapshot -i --json
2. 从 JSON 解析引用，然后交互
agent-browser click @e2
agent-browser fill @e3 text
3. 页面变化后重新快照
agent-browser snapshot -i --json
关键命令
导航
bash
agent-browser open
agent-browser back | forward | reload | close
快照（始终使用 -i --json）
bash
agent-browser snapshot -i --json # 交互元素，JSON 输出
agent-browser snapshot -i -c -d 5 --json # + 紧凑模式，深度限制
agent-browser snapshot -s #main -i # 限定选择器范围
交互（基于引用）
bash
agent-browser click @e2
agent-browser fill @e3 text
agent-browser type @e3 text
agent-browser hover @e4
agent-browser check @e5 | uncheck @e5
agent-browser select @e6 value
agent-browser press Enter
agent-browser scroll down 500
agent-browser drag @e7 @e8
获取信息
bash
agent-browser get text @e1 --json
agent-browser get html @e2 --json
agent-browser get value @e3 --json
agent-browser get attr @e4 href --json
agent-browser get title --json
agent-browser get url --json
agent-browser get count .item --json
检查状态
bash
agent-browser is visible @e2 --json
agent-browser is enabled @e3 --json
agent-browser is checked @e4 --json
等待
bash
agent-browser wait @e2 # 等待元素
agent-browser wait 1000 # 等待毫秒数
agent-browser wait --text Welcome # 等待文本
agent-browser wait --url /dashboard # 等待 URL
agent-browser wait --load networkidle # 等待网络空闲
agent-browser wait --fn window.ready === true
会话（隔离浏览器）
bash
agent-browser --session admin open site.com
agent-browser --session user open site.com
agent-browser session list
或通过环境变量：AGENTBROWSERSESSION=admin agent-browser ...
状态持久化
bash
agent-browser state save auth.json # 保存 Cookie/存储
agent-browser state load auth.json # 加载（跳过登录）
截图与 PDF
bash
agent-browser screenshot page.png
agent-browser screenshot --full page.png
agent-browser pdf page.pdf
网络控制
bash
agent-browser network route /ads/* --abort # 拦截
agent-browser network route /api/* --body {x:1} # 模拟
agent-browser network requests --filter api # 查看
Cookie 与存储
bash
agent-browser cookies # 获取所有
agent-browser cookies set name value
agent-browser storage local key # 获取 localStorage
agent-browser storage local set key val
标签页与框架
bash
agent-browser tab new https://example.com
agent-browser tab 2 # 切换到标签页
agent-browser frame @e5 # 切换到 iframe
agent-browser frame main # 返回主框架
快照输出格式
json
{
success: true,
data: {
snapshot: ...,
refs: {
e1: {role: heading, name: Example Domain},
e2: {role: button, name: Submit},
e3: {role: textbox, name: Email}
}
}
}
最佳实践
- 1. 始终使用 -i 标志 - 聚焦于交互元素
- 始终使用 --json - 更易解析
- 等待稳定 - agent-browser wait --load networkidle
- 保存认证状态 - 使用 state save/load 跳过登录流程
- 使用会话 - 隔离不同浏览器上下文
- 使用 --headed 调试 - 查看正在发生什么
示例：搜索与提取
bash
agent-browser open https://www.google.com
agent-browser snapshot -i --json
AI 识别搜索框 @e1
agent-browser fill @e1 AI agents
agent-browser press Enter
agent-browser wait --load networkidle
agent-browser snapshot -i --json
AI 识别结果引用
agent-browser get text @e3 --json
agent-browser get attr @e4 href --json
示例：多会话测试
bash
管理员会话
agent-browser --session admin open app.com
agent-browser --session admin state load admin-auth.json
agent-browser --session admin snapshot -i --json
用户会话（同时进行）
agent-browser --session user open app.com
agent-browser --session user state load user-auth.json
agent-browser --session user snapshot -i --json
安装
bash
npm install -g agent-browser
agent-browser install # 下载 Chromium
agent-browser install --with-deps # Linux：+ 系统依赖
致谢
技能由 Yossi Elkrief (@MaTriXy) 创建
agent-browser CLI 由 Vercel Labs 开发
