Agent browser

Skill lane2077/claude-code-harness-zh/skills/agent-browser

像手脚一样操控浏览器。页面跳转、表单填写、截图、数据抓取都能处理。用户提出导航网站、填写表单、截图、提取网页数据、测试 Web 应用或自动化浏览器流程时使用。触发词包括 'go to [url]'、'click on'、'fill out the form'、'take a screenshot'、'scrape'、'automate'、'test the website'、'log into' 等。不要用于：仅分享 URL、嵌入链接、单纯处理截图图片文件。From its SKILL.md

Install

npx -y skills add lane2077/claude-code-harness-zh --skill agent-browser

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

5.8 KB, as published. Nobody here has run it

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`	关闭浏览器

信息获取

命令	说明
`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

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