agent-browser

Agent Browser Skill

这是一个执行浏览器自动化的技能。使用 agent-browser CLI 完成 UI 调试、验证和自动操作。

---

触发短语

这个技能会在以下短语出现时自动触发：

• 「打开页面」「检查 URL」
• 「点击一下」「输入内容」「填写表单」
• 「截个图」
• 「检查 UI」「测试页面」
• "open this page", "click on", "fill the form", "screenshot"

---

功能详情

功能	详情
浏览器自动化	See references/browser-automation.md
AI 快照工作流	See references/ai-snapshot-workflow.md

执行步骤

Step 0: 检查 agent-browser

# 检查是否已安装
which agent-browser

# 若未安装
npm install -g agent-browser
agent-browser install

Step 1: 分类用户请求

请求类型	对应动作
打开 URL	agent-browser open <url>
点击元素	先快照 → agent-browser click @ref
表单输入	先快照 → agent-browser fill @ref "text"
检查状态	agent-browser snapshot -i -c
截图	agent-browser screenshot <path>
调试	agent-browser --headed open <url>

Step 2: AI 快照工作流（推荐）

大多数操作都推荐先获取快照，再通过元素引用进行操作：

# 1. 打开页面
agent-browser open https://example.com

# 2. 获取快照（面向 AI，仅保留交互元素）
agent-browser snapshot -i -c

# 输出示例:
# - link "Home" [ref=e1]
# - button "Login" [ref=e2]
# - input "Email" [ref=e3]
# - input "Password" [ref=e4]
# - button "Submit" [ref=e5]

# 3. 通过元素引用进行操作
agent-browser click @e2           # 点击 Login 按钮
agent-browser fill @e3 "[email protected]"
agent-browser fill @e4 "password123"
agent-browser click @e5           # Submit

Step 3: 确认结果

# 用快照确认当前状态
agent-browser snapshot -i -c

# 或检查 URL
agent-browser get url

# 获取截图
agent-browser screenshot result.png

---

快速参考

基础操作

命令	说明
open <url>	打开 URL
snapshot -i -c	面向 AI 的快照
click @e1	点击元素
fill @e1 "text"	向表单填值
type @e1 "text"	输入文本
press Enter	按键
screenshot [path]	截图
close	关闭浏览器

导航

命令	说明
back	后退
forward	前进
reload	刷新

信息获取

命令	说明
get text @e1	获取文本
get html @e1	获取 HTML
get url	当前 URL
get title	页面标题

等待

命令	说明
wait @e1	等待元素出现
wait 1000	等待 1 秒

调试

命令	说明
--headed	显示浏览器窗口
console	控制台日志
errors	页面错误
highlight @e1	高亮元素

---

会话管理

并行管理多个标签页 / 会话：

# 指定会话
agent-browser --session admin open https://admin.example.com
agent-browser --session user open https://example.com

# 会话列表
agent-browser session list

# 在特定会话中操作
agent-browser --session admin snapshot -i -c

---

与 MCP 浏览器工具的取舍

工具	推荐度	用途
agent-browser	★★★	第一选择，面向 AI 的快照能力很强
chrome-devtools MCP	★★☆	适合 Chrome 已经打开的场景
playwright MCP	★★☆	适合复杂的 E2E 测试

原则：先尝试 agent-browser，只有不顺利时再使用 MCP 工具。

---

注意事项

• agent-browser 默认使用 headless 模式
• 可以通过 --headed 显示浏览器
• 会话会一直保留，直到显式执行 close
• 需要认证的网站请善用 session