【Vercel实用Skill】agent-browser 技能-编程阁

面向AI代理的浏览器自动化CLI工具。用于网站交互、页面导航、表单填写、按钮点击、截图、数据提取、Web应用测试或自动化任何浏览器任务。

技能概述

agent-browser 技能是一个强大的浏览器自动化命令行工具，专为AI代理设计。它提供了完整的浏览器控制能力，包括导航、交互、数据提取和状态管理。该工具支持多种浏览器操作模式，包括无头模式、有头模式、移动设备模拟等，并提供了丰富的安全特性，如域名白名单、操作策略和内容边界保护。

下载地址：https://github.com/vercel-labs/agent-browser

主要功能

浏览器导航：打开URL、关闭浏览器、页面导航等基础操作
页面快照：获取页面交互元素的引用标识符，支持CSS选择器范围限定
元素交互：点击、填充、选择、按键、滚动等各种交互操作
信息获取：获取元素文本、当前URL、页面标题等信息
等待机制：等待元素出现、网络空闲、URL模式匹配等多种等待策略
文件下载：触发下载并等待下载完成
截图与PDF：全页截图、带注释截图、PDF导出
差异对比：比较页面状态、截图差异、URL对比
认证管理：保存和使用认证配置文件，支持加密存储
会话持久化：自动保存和恢复cookies及localStorage
并行会话：支持多个独立的浏览器会话同时运行
移动设备模拟：支持iOS模拟器和真实设备的Safari自动化
安全特性：域名白名单、操作策略、内容边界、输出限制
性能分析：Chrome DevTools性能分析支持
视频录制：录制浏览器会话用于调试和文档

触发条件

在以下情况下应该调用此技能：

用户需要"打开网站"或"导航到网页"
用户需要"填写表单"或"提交表单"
用户需要"点击按钮"或"执行点击操作"
用户需要"截图"或"保存页面截图"
用户需要"从页面抓取数据"或"提取网页内容"
用户需要"测试Web应用"或"自动化测试"
用户需要"登录网站"或"处理认证流程"
用户需要"自动化浏览器操作"或"浏览器自动化"
任何需要程序化Web交互的任务

核心工作流程

标准自动化流程

每个浏览器自动化都遵循以下模式：

导航：使用agent-browser open <url>打开页面
快照：使用agent-browser snapshot -i获取元素引用（如 @e1, @e2）
交互：使用引用进行点击、填充、选择等操作
重新快照：在导航或DOM更改后，获取新的引用

处理过程

1. 基础导航与快照

打开网页并获取页面元素信息：

agent-browser open https://example.com/form agent-browser snapshot -i # 输出: @e1 [input type="email"], @e2 [input type="password"], @e3 [button] "Submit"

2. 表单交互

使用元素引用进行表单填写和提交：

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

3. 命令链式调用

使用&&链接多个命令，提高效率：

# 链式打开 + 等待 + 快照 agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser snapshot -i # 链式多步交互 agent-browser fill @e1 "user@example.com" && agent-browser fill @e2 "password123" && agent-browser click @e3

4. 认证处理

使用认证保险库安全存储和使用凭据：

# 保存凭据（加密存储） echo "pass" | agent-browser auth save github --url https://github.com/login --username user --password-stdin # 使用保存的配置文件登录（LLM不会看到密码） agent-browser auth login github

5. 会话持久化

自动保存和恢复会话状态：

# 使用命名会话 agent-browser --session-name myapp open https://app.example.com/login # ... 登录流程 ... agent-browser close # 状态自动保存到 ~/.agent-browser/sessions/ # 下次自动加载状态 agent-browser --session-name myapp open https://app.example.com/dashboard

6. 数据提取

从页面提取文本和数据：

agent-browser open https://example.com/products agent-browser snapshot -i agent-browser get text @e5 # 获取特定元素文本 agent-browser get text body > page.txt # 获取所有页面文本 # JSON输出用于解析 agent-browser snapshot -i --json agent-browser get text @e1 --json

7. 移动设备模拟

在iOS模拟器上测试移动Safari：

# 列出可用的iOS模拟器 agent-browser device list # 在特定设备上启动Safari agent-browser -p ios --device "iPhone 16 Pro" open https://example.com # 移动特定手势 agent-browser -p ios tap @e1 # 点击 agent-browser -p ios swipe up # 滑动

输入要求

使用此技能时，用户需要提供：

目标URL：要访问的网站地址
操作指令：具体的浏览器操作（点击、填充、截图等）
认证信息（可选）：如果需要登录，提供用户名和密码
会话名称（可选）：用于并行会话或状态持久化
选择器或引用（可选）：特定元素的CSS选择器或快照引用

输出说明

技能将提供：

页面快照：包含交互元素及其引用标识符的可访问性树
截图文件：PNG格式的页面截图（可带注释）
PDF文件：页面PDF导出
提取的文本：页面或元素的文本内容
页面信息：当前URL、页面标题等
差异报告：页面状态或截图的对比结果
错误信息：控制台错误和网络错误

使用示例

示例1：表单提交

agent-browser open https://example.com/signup
agent-browser snapshot -i
agent-browser fill @e1 "Jane Doe"
agent-browser fill @e2 "jane@example.com"
agent-browser select @e3 "California"
agent-browser check @e4
agent-browser click @e5
agent-browser wait --load networkidle

示例2：数据提取

agent-browser open https://example.com/products
agent-browser snapshot -i
agent-browser get text @e5 # 获取特定元素文本
agent-browser get text body > page.txt # 获取所有页面文本
agent-browser snapshot -i --json # JSON格式输出

示例3：并行会话

agent-browser --session site1 open https://site-a.com
agent-browser --session site2 open https://site-b.com
agent-browser --session site1 snapshot -i
agent-browser --session site2 snapshot -i
agent-browser session list

示例4：带注释的截图

agent-browser screenshot --annotate # 输出包括图像路径和图例：
# [1] @e1 button "Submit"
# [2] @e2 link "Home"
# [3] @e3 textbox "Email"
agent-browser click @e2 # 使用注释截图中的引用

安全特性

内容边界（推荐用于AI代理）

启用内容边界以帮助LLM区分工具输出和不受信任的页面内容：

export AGENT_BROWSER_CONTENT_BOUNDARIES=1
agent-browser snapshot # 输出：
# --- AGENT_BROWSER_PAGE_CONTENT nonce=<hex> origin=https://example.com ---
# [accessibility tree]
# --- END_AGENT_BROWSER_PAGE_CONTENT nonce=<hex> ---

域名白名单

限制导航到受信任的域名：

export AGENT_BROWSER_ALLOWED_DOMAINS="example.com,*.example.com"
agent-browser open https://example.com # 允许
agent-browser open https://malicious.com # 阻止

操作策略

使用策略文件限制破坏性操作：

export AGENT_BROWSER_ACTION_POLICY=./policy.json
# policy.json 示例：
{"default": "deny", "allow": ["navigate", "snapshot", "click", "scroll", "wait", "get"]}

最佳实践

引用生命周期管理：页面更改后引用会失效，必须在导航、表单提交或动态内容加载后重新快照
使用链式命令：当不需要读取中间命令输出时，使用&&链接命令以提高效率
会话命名：运行多个代理或自动化时，始终使用命名会话以避免冲突
认证安全：使用认证保险库而非在命令中暴露密码，通过stdin传递密码避免shell历史记录
等待策略：对于慢速页面，使用wait --load networkidle而非依赖默认超时
注释截图：当页面有未标记的图标按钮或需要视觉推理时，使用--annotate标志
语义定位器：当引用不可用或不可靠时，使用语义定位器（如find text "Sign In" click）
会话清理：完成后始终关闭浏览器会话以避免进程泄漏
控制台检查：定期检查浏览器控制台以发现不可见的错误
输出限制：对于大型页面，设置AGENT_BROWSER_MAX_OUTPUT防止上下文溢出

配置文件

在项目根目录创建agent-browser.json进行持久化设置：

{ "headed": true, "proxy": "http://localhost:8080", "profile": "./browser-data" }

优先级（从低到高）：~/.agent-browser/config.json<./agent-browser.json< 环境变量 < CLI标志

深度文档参考

参考文档	使用场景
references/commands.md	完整命令参考及所有选项
references/snapshot-refs.md	引用生命周期、失效规则、故障排除
references/session-management.md	并行会话、状态持久化、并发抓取
references/authentication.md	登录流程、OAuth、2FA处理、状态重用
references/video-recording.md	录制工作流用于调试和文档
references/profiling.md	Chrome DevTools性能分析
references/proxy-support.md	代理配置、地理测试、轮换代理