使用 agent-browser 进行浏览器自动化

安装

推荐使用 npm

npm install -g agent-browser
agent-browser install
agent-browser install --with-deps

从源代码安装

git clone https://github.com/vercel-labs/agent-browser
cd agent-browser
pnpm install
pnpm build
agent-browser install

快速开始

agent-browser open <url>        # 导航到页面
agent-browser snapshot -i       # 获取带引用标识的交互元素
agent-browser click @e1         # 通过引用标识点击元素
agent-browser fill @e2 "text"   # 通过引用标识填充输入框
agent-browser close             # 关闭浏览器

核心工作流程

1. 导航：agent-browser open <url>
2. 快照：agent-browser snapshot -i（返回带有引用标识的元素，如@e1、@e2）
3. 使用快照中的引用标识进行交互
4. 在导航或发生显著 DOM 变化后重新获取快照

命令

导航

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

快照（页面分析）

agent-browser snapshot            # 完整的无障碍访问树
agent-browser snapshot -i         # 仅交互式元素（推荐）
agent-browser snapshot -c         # 紧凑输出
agent-browser snapshot -d 3       # 限制深度为3
agent-browser snapshot -s "#main" # 限定到CSS选择器范围

交互操作（使用快照中的@refs）

agent-browser click @e1           # 单击
agent-browser dblclick @e1        # 双击
agent-browser focus @e1           # 聚焦元素
agent-browser fill @e2 "text"     # 清空并输入文本
agent-browser type @e2 "text"     # 输入文本（不清空）
agent-browser press Enter         # 按键
agent-browser press Control+a     # 组合键
agent-browser keydown Shift       # 按住按键
agent-browser keyup Shift         # 释放按键
agent-browser hover @e1           # 悬停
agent-browser check @e1           # 勾选复选框
agent-browser uncheck @e1         # 取消勾选复选框
agent-browser select @e1 "value"  # 选择下拉菜单项
agent-browser scroll down 500     # 滚动页面
agent-browser scrollintoview @e1  # 滚动元素到可视区域
agent-browser drag @e1 @e2        # 拖放
agent-browser upload @e1 file.pdf # 上传文件

获取信息

agent-browser get text @e1        # 获取元素文本
agent-browser get html @e1        # 获取innerHTML
agent-browser get value @e1       # 获取输入框值
agent-browser get attr @e1 href   # 获取属性
agent-browser get title           # 获取页面标题
agent-browser get url             # 获取当前URL
agent-browser get count ".item"   # 统计匹配元素数量
agent-browser get box @e1         # 获取边界框

检查状态

agent-browser is visible @e1      # 检查是否可见
agent-browser is enabled @e1      # 检查是否启用
agent-browser is checked @e1      # 检查是否勾选

截图与PDF

agent-browser screenshot          # 截图到标准输出
agent-browser screenshot path.png # 保存到文件
agent-browser screenshot --full   # 完整页面截图
agent-browser pdf output.pdf      # 保存为PDF

视频录制

agent-browser record start ./demo.webm    # 开始录制（使用当前URL和状态）
agent-browser click @e1                   # 执行操作
agent-browser record stop                 # 停止并保存视频
agent-browser record restart ./take2.webm # 停止当前录制并开始新的录制

录制会创建一个新的上下文，但会保留您会话中的Cookie/存储数据。如果未提供URL，它会自动返回到您当前的页面。为了获得流畅的演示效果，请先浏览页面，然后再开始录制。

等待

agent-browser wait @e1                     # 等待元素
agent-browser wait 2000                    # 等待毫秒数
agent-browser wait --text "Success"        # 等待文本
agent-browser wait --url "/dashboard"    # 等待URL模式
agent-browser wait --load networkidle      # 等待网络空闲
agent-browser wait --fn "window.ready"     # 等待JS条件

鼠标控制

agent-browser mouse move 100 200      # 移动鼠标
agent-browser mouse down left         # 按下按钮
agent-browser mouse up left           # 释放按钮
agent-browser mouse wheel 100         # 滚动滚轮

语义定位器（替代引用）

agent-browser find role button click --name "Submit"
agent-browser find text "Sign In" click
agent-browser find label "Email" fill "user@test.com"
agent-browser find first ".item" click
agent-browser find nth 2 "a" text

浏览器设置

agent-browser set viewport 1920 1080      # 设置视口大小
agent-browser set device "iPhone 14"      # 模拟设备
agent-browser set geo 37.7749 -122.4194   # 设置地理位置
agent-browser set offline on              # 切换离线模式
agent-browser set headers '{"X-Key":"v"}' # 额外HTTP头
agent-browser set credentials user pass   # HTTP基本认证
agent-browser set media dark              # 模拟配色方案

Cookie & 存储

agent-browser cookies                     # 获取所有Cookie
agent-browser cookies set name value      # 设置Cookie
agent-browser cookies clear               # 清除Cookie
agent-browser storage local               # 获取所有localStorage
agent-browser storage local key           # 获取特定键值
agent-browser storage local set k v       # 设置值
agent-browser storage local clear         # 清除所有

网络

agent-browser network route <url>              # 拦截请求
agent-browser network route <url> --abort      # 阻止请求
agent-browser network route <url> --body '{}'  # 模拟响应
agent-browser network unroute [url]            # 移除路由
agent-browser network requests                 # 查看追踪的请求
agent-browser network requests --filter api    # 过滤请求

标签页与窗口

agent-browser tab                 # 列出标签页
agent-browser tab new [url]       # 新建标签页
agent-browser tab 2               # 切换到标签页
agent-browser tab close           # 关闭标签页
agent-browser window new          # 新建窗口

框架

agent-browser frame "#iframe"     # 切换到 iframe
agent-browser frame main          # 返回主框架

对话框

agent-browser dialog accept [text]  # 接受对话框
agent-browser dialog dismiss        # 取消对话框

JavaScript

agent-browser eval "document.title"   # 运行 JavaScript

状态管理

agent-browser state save auth.json    # 保存会话状态
agent-browser state load auth.json    # 加载已保存状态

示例：表单提交

agent-browser open https://example.com/form
agent-browser snapshot -i
# 输出显示：文本框 "Email" [ref=e1], 文本框 "Password" [ref=e2], 按钮 "Submit" [ref=e3]

agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password123"
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser snapshot -i  # 检查结果

示例：使用保存状态进行身份验证

# 登录一次
agent-browser open https://app.example.com/login
agent-browser snapshot -i
agent-browser fill @e1 "username"
agent-browser fill @e2 "password"
agent-browser click @e3
agent-browser wait --url "/dashboard"
agent-browser state save auth.json

# 后续会话：加载已保存状态
agent-browser state load auth.json
agent-browser open https://app.example.com/dashboard

会话（并行浏览器）

agent-browser --session test1 open site-a.com
agent-browser --session test2 open site-b.com
agent-browser session list

JSON 输出（用于解析）

添加--json以获得机器可读的输出：

agent-browser snapshot -i --json
agent-browser get text @e1 --json

调试

agent-browser open example.com --headed              # 显示浏览器窗口
agent-browser console                                # 查看控制台消息
agent-browser console --clear                        # 清空控制台
agent-browser errors                                 # 查看页面错误
agent-browser errors --clear                         # 清除错误
agent-browser highlight @e1                          # 高亮元素
agent-browser trace start                            # 开始录制跟踪
agent-browser trace stop trace.zip                   # 停止并保存跟踪
agent-browser record start ./debug.webm              # 从当前页面开始录制
agent-browser record stop                            # 保存录制
agent-browser --cdp 9222 snapshot                    # 通过 CDP 连接

故障排除

• 如果在Linux ARM64上找不到命令，请使用bin文件夹中的完整路径。
• 如果找不到元素，请使用快照来查找正确的引用。
• 如果页面未加载，请在导航后添加等待命令。
• 使用 --headed 选项可以在调试时看到浏览器窗口。

选项

• --session<名称>使用一个隔离的会话。
• --json 提供JSON格式的输出。
• --full 截取整个页面的截图。
• --headed 显示浏览器窗口。
• --timeout 设置命令超时时间（毫秒）。
• --cdp<端口>通过Chrome DevTools协议连接。

注意事项

• 引用在每次页面加载时是稳定的，但导航后会改变。
• 导航后务必使用快照以获取新的引用。
• 对于输入字段，使用fill而不是type，以确保清除现有文本。

报告问题

• 技能问题：请在以下地址提交问题https://github.com/TheSethRose/Agent-Browser-CLI
• agent-browser CLI问题：请在以下地址提交问题https://github.com/vercel-labs/agent-browser