agent-browser自动化技能Skill agent-browser

agent-browser是一个由Vercel开发的命令行界面工具,专为AI代理设计,用于执行浏览器自动化任务。它支持网页导航、表单填写、数据爬取、截屏等功能,使用基于引用的元素选择,简化了AI驱动的自动化流程。关键词:浏览器自动化、AI代理、Vercel、CLI工具、网页交互、数据爬取、自动化测试。

AI智能体 0 次安装 0 次浏览 更新于 3/9/2026

name: agent-browser description: 使用Vercel的agent-browser CLI进行浏览器自动化。当你需要与网页交互、填写表单、截屏或爬取数据时使用。Playwright MCP的替代方案 - 使用基于引用元素选择的Bash命令。触发词包括"浏览网站"、“填写表单”、“点击按钮”、“截屏”、“爬取页面”、“网络自动化”。

agent-browser: CLI浏览器自动化

Vercel的无头浏览器自动化CLI,专为AI代理设计。使用基于辅助功能快照的引用选择(@e1, @e2)。

安装检查

# 检查安装
command -v agent-browser >/dev/null 2>&1 && echo "已安装" || echo "未安装 - 运行: npm install -g agent-browser && agent-browser install"

如果需要安装

npm install -g agent-browser
agent-browser install  # 下载Chromium

核心工作流程

快照 + 引用模式对LLM最优:

  1. 导航 到URL
  2. 快照 获取带引用的交互元素
  3. 交互 使用引用(@e1, @e2等)
  4. 重新快照 在导航或DOM更改后
# 步骤1:打开URL
agent-browser open https://example.com

# 步骤2:获取带引用的交互元素
agent-browser snapshot -i --json

# 步骤3:使用引用交互
agent-browser click @e1
agent-browser fill @e2 "搜索查询"

# 步骤4:更改后重新快照
agent-browser snapshot -i

关键命令

导航

agent-browser open <url>       # 导航到URL
agent-browser back             # 后退
agent-browser forward          # 前进
agent-browser reload           # 重新加载页面
agent-browser close            # 关闭浏览器

快照(对AI至关重要)

agent-browser snapshot              # 完整辅助功能树
agent-browser snapshot -i           # 仅交互元素(推荐)
agent-browser snapshot -i --json    # JSON输出用于解析
agent-browser snapshot -c           # 紧凑(移除空元素)
agent-browser snapshot -d 3         # 限制深度

交互

agent-browser click @e1                    # 点击元素
agent-browser dblclick @e1                 # 双击
agent-browser fill @e1 "文本"              # 清除并填写输入
agent-browser type @e1 "文本"              # 输入而不清除
agent-browser press Enter                  # 按下键
agent-browser hover @e1                    # 悬停元素
agent-browser check @e1                    # 选中复选框
agent-browser uncheck @e1                  # 取消选中复选框
agent-browser select @e1 "选项"          # 选择下拉选项
agent-browser scroll down 500              # 滚动(上/下/左/右)
agent-browser scrollintoview @e1           # 将元素滚动到视图中

获取信息

agent-browser get text @e1          # 获取元素文本
agent-browser get html @e1          # 获取元素HTML
agent-browser get value @e1         # 获取输入值
agent-browser get attr href @e1     # 获取属性
agent-browser get title             # 获取页面标题
agent-browser get url               # 获取当前URL
agent-browser get count "button"    # 计数匹配元素

截屏和PDF

agent-browser screenshot                      # 视口截屏
agent-browser screenshot --full               # 完整页面
agent-browser screenshot output.png           # 保存到文件
agent-browser screenshot --full output.png    # 完整页面到文件
agent-browser pdf output.pdf                  # 保存为PDF

等待

agent-browser wait @e1              # 等待元素
agent-browser wait 2000             # 等待毫秒数
agent-browser wait "文本"           # 等待文本出现

语义定位器(引用的替代方案)

agent-browser find role button click --name "提交"
agent-browser find text "注册" click
agent-browser find label "邮箱" fill "user@example.com"
agent-browser find placeholder "搜索..." fill "查询"

会话(并行浏览器)

# 运行多个独立的浏览器会话
agent-browser --session browser1 open https://site1.com
agent-browser --session browser2 open https://site2.com

# 列出活动会话
agent-browser session list

示例

登录流程

agent-browser open https://app.example.com/login
agent-browser snapshot -i
# 输出显示:文本框 "邮箱" [ref=e1], 文本框 "密码" [ref=e2], 按钮 "登录" [ref=e3]
agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password123"
agent-browser click @e3
agent-browser wait 2000
agent-browser snapshot -i  # 验证已登录

搜索和提取

agent-browser open https://news.ycombinator.com
agent-browser snapshot -i --json
# 解析JSON以找到故事链接
agent-browser get text @e12  # 获取标题文本
agent-browser click @e12     # 点击打开故事

表单填写

agent-browser open https://forms.example.com
agent-browser snapshot -i
agent-browser fill @e1 "张三"
agent-browser fill @e2 "john@example.com"
agent-browser select @e3 "美国"
agent-browser check @e4  # 同意条款
agent-browser click @e5  # 提交按钮
agent-browser screenshot confirmation.png

调试模式

# 运行可见浏览器窗口
agent-browser --headed open https://example.com
agent-browser --headed snapshot -i
agent-browser --headed click @e1

JSON输出

添加 --json 用于结构化输出:

agent-browser snapshot -i --json

返回:

{
  "success": true,
  "data": {
    "refs": {
      "e1": {"name": "提交", "role": "button"},
      "e2": {"name": "邮箱", "role": "textbox"}
    },
    "snapshot": "- button \"提交\" [ref=e1]
- textbox \"邮箱\" [ref=e2]"
  }
}

vs Playwright MCP

功能 agent-browser (CLI) Playwright MCP
界面 Bash命令 MCP工具
选择 引用(@e1) 引用(e1)
输出 文本/JSON 工具响应
并行 会话 标签页
最佳用于 快速自动化 工具集成

使用agent-browser当:

  • 你偏好基于Bash的工作流
  • 你想要更简单的CLI命令
  • 你需要快速的一次性自动化

使用Playwright MCP当:

  • 你需要深入的MCP工具集成
  • 你想要基于工具的响应
  • 你正在构建复杂的自动化