使用 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         # 导航至页面
agent-browser snapshot -i       # 获取带引用（refs）的可交互元素
agent-browser click @e1         # 通过引用点击元素
agent-browser fill @e2 "text"   # 通过引用向输入框填充文本
agent-browser close             # 关闭浏览器

核心工作流

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

命令

导航

agent-browser open       # 导航至指定 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       # 按住 Shift 键
agent-browser keyup Shift         # 松开 Shift 键
agent-browser hover @e1           # 鼠标悬停
agent-browser check @e1           # 勾选复选框
agent-browser uncheck @e1         # 取消勾选复选框
agent-browser select @e1 "value"  # 从下拉框中选择值
agent-browser scroll down 500     # 页面向下滚动 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   # 获取指定属性（如 href）
agent-browser get title           # 获取页面标题
agent-browser get url             # 获取当前 URL
agent-browser get count ".item"   # 统计匹配元素数量
agent-browser get box @e1         # 获取元素边界框（bounding box）

检查状态

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 # 停止当前录制并立即开始新录制

录制会创建一个全新上下文，但保留您当前会话中的 cookies / storage。若未提供 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"     # 等待 JavaScript 条件满足

鼠标控制

agent-browser mouse move 100 200      # 移动鼠标至坐标 (100, 200)
agent-browser mouse down left         # 按下鼠标左键
agent-browser mouse up left           # 松开鼠标左键
agent-browser mouse wheel 100         # 向上滚动滚轮 100 单位

语义定位器（替代 refs 的方式）

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 Basic Auth 凭据
agent-browser set media dark              # 模拟深色主题配色方案

Cookies 与 Storage

agent-browser cookies                     # 获取全部 cookies
agent-browser cookies set name value      # 设置 cookie
agent-browser cookies clear               # 清空所有 cookies
agent-browser storage local               # 获取全部 localStorage 数据
agent-browser storage local key           # 获取指定 key 的 localStorage 值
agent-browser storage local set k v       # 设置 localStorage 中某 key 的值
agent-browser storage local clear         # 清空全部 localStorage 数据

网络

agent-browser network route               # 拦截请求
agent-browser network route  --abort      # 阻止请求
agent-browser network route  --body '{}'  # 模拟响应体
agent-browser network unroute [url]            # 移除已配置的路由规则
agent-browser network requests                 # 查看已追踪的请求列表
agent-browser network requests --filter api    # 按关键词过滤请求

标签页与窗口

agent-browser tab                 # 列出所有标签页
agent-browser tab new [url]       # 新建标签页（可选跳转至 URL）
agent-browser tab 2               # 切换至第 2 个标签页
agent-browser tab close           # 关闭当前标签页
agent-browser window new          # 新建浏览器窗口

框架（Frames）

agent-browser frame "#iframe"     # 切换至指定 iframe
agent-browser frame main          # 切换回主文档（main frame）

对话框（Dialogs）

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 参数以获得机器可读的 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                            # 开始记录性能追踪（trace）
agent-browser trace stop trace.zip                   # 停止追踪并保存为 ZIP 文件
agent-browser record start ./debug.webm              # 从当前页面开始录制视频
agent-browser record stop                            # 停止录制并保存
agent-browser --cdp 9222 snapshot                    # 通过 Chrome DevTools Protocol 连接

常见问题排查

• 若在 Linux ARM64 平台上提示命令未找到，请使用 bin 目录下的完整路径。
• 若找不到目标元素，请使用 snapshot 命令确认其正确引用（ref）。
• 若页面尚未加载完成，请在导航命令后添加 wait 命令。
• 调试时可使用 --headed 参数显示浏览器窗口以便观察行为。

选项

• --session ：使用隔离的会话环境。
• --json：以 JSON 格式输出结果。
• --full：执行全页截图。
• --headed：显示浏览器窗口（GUI 模式）。
• --timeout：设置命令超时时间（毫秒）。
• --cdp ：通过 Chrome DevTools Protocol 连接指定端口的浏览器实例。

注意事项

• 引用（refs）在单次页面加载期间保持稳定，但在导航后会失效并发生变化。
• 每次导航后都应重新执行 snapshot 以获取最新引用。
• 对输入框操作请优先使用 fill 而非 type，确保原有内容被清除。

报告问题

• 功能层面的问题（Skill issues）：请在 https://github.com/TheSethRose/Agent-Browser-CLI 提交 issue
• agent-browser CLI 工具本身的问题：请在 https://github.com/vercel-labs/agent-browser 提交 issue