OpenClaw Skills Agent Browser（浏览器自动化工具）

agent-browser 是专为AI智能体开发的无头（无界面）浏览器命令行工具，无需可视化界面即可实现网页访问、动态内容渲染、页面元素交互、数据抓取等操作，完美适配智能体自动化处理网页相关任务的需求，无需人工介入。

核心功能

无头模式访问任意网页，支持JS动态渲染（兼容单页应用SPA）
抓取网页完整HTML、文本、指定元素内容
模拟浏览器基本操作（点击、输入、翻页）
支持设置请求头、代理、Cookie，适配个性化访问需求
输出结构化数据（JSON），便于智能体解析处理
支持网页截图、PDF导出，留存网页内容

👤 作者：Seth Rose
👉 Skills 下载地址：agent-browser-0.2.0.zip

快速安装

## 通过Homebrew包管理器安装agent-browser核心工具
brew install TheSethRose/tap/agent-browser
## 验证安装成功，查看版本信息
agent-browser --version

基础使用命令

1. 网页基础访问与内容抓取

## 访问指定网页，输出纯文本内容（自动渲染JS动态内容）
agent-browser visit https://example.com --text
## 访问网页，输出完整HTML源码（包含JS渲染后的内容）
agent-browser visit https://example.com --html
## 抓取网页中指定CSS选择器的元素内容（例：抓取所有h1标题）
agent-browser extract https://example.com --selector "h1"
## 抓取网页内容并以JSON格式输出（便于智能体解析）
agent-browser visit https://example.com --json

2. 页面交互操作（模拟人工操作）

## 模拟在指定输入框输入内容（selector为输入框选择器，--value为输入内容）
agent-browser interact https://example.com --selector "#search-input" --action input --value "AI智能体"
## 模拟点击网页指定按钮（例：点击搜索按钮）
agent-browser interact https://example.com --selector "#search-btn" --action click
## 模拟翻页，获取下一页内容（适配分页网页）
agent-browser navigate https://example.com/list --action next

3. 个性化访问配置

## 设置自定义User-Agent，模拟浏览器访问
agent-browser visit https://example.com --user-agent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36"
## 配置代理访问网页（适配内网/海外网页）
agent-browser visit https://example.com --proxy http://127.0.0.1:7890
## 携带Cookie访问网页，保持登录状态
agent-browser visit https://example.com --cookie "token=xxx; uid=123"

4. 网页内容留存

## 对指定网页进行截图，保存为PNG图片（默认保存到当前目录）
agent-browser screenshot https://example.com --save ./page-screenshot.png
## 将网页导出为PDF文件，留存完整内容
agent-browser export https://example.com --format pdf --save ./page-export.pdf

5. 高级筛选与数据提取

## 仅抓取网页中的链接（a标签），以列表形式输出
agent-browser extract https://example.com --selector "a" --attr "href"
## 抓取指定元素的多个属性（例：抓取图片的src和alt属性）
agent-browser extract https://example.com --selector "img" --attr "src,alt" --json
## 过滤掉网页中的广告内容，仅输出核心文本
agent-browser visit https://example.com --text --filter-ad

常用参数说明

参数	功能说明	适用场景
`--text`	输出网页纯文本内容	快速提取网页核心信息
`--html`	输出网页完整HTML源码	深度抓取网页所有内容
`--json`	结构化JSON格式输出	智能体解析、自动化脚本
`--selector`	指定CSS选择器	精准抓取页面指定元素
`--action`	定义交互动作（input/click/next）	模拟人工页面操作
`--proxy`	配置代理服务器	访问受限网页
`--screenshot`	网页截图	内容留存、视觉验证
`--export`	网页导出为PDF/HTML	长期保存网页内容

智能体适配特性

✅ 无头运行：无可视化界面，适配服务器/智能体后台运行
✅ JS渲染：支持Vue/React等单页应用，抓取动态内容
✅ 结构化输出：JSON格式数据，智能体可直接解析处理
✅ 轻量高效：命令行调用，无冗余依赖，响应速度快
✅ 高度可配置：支持代理、Cookie、请求头自定义，适配复杂场景

典型使用场景

AI智能体自动抓取网页资讯、行业数据并总结
自动化监控网页指定内容更新（如商品价格、公告）
模拟人工完成网页简单操作（搜索、表单提交）
批量抓取网页指定元素，整理结构化数据
智能体访问网页后，提取核心信息生成报告

官方信息

工具地址：https://clawhub.ai/TheSethRose/agent-browser
适用平台：macOS / Linux（兼容主流类Unix系统）
核心适配：AI智能体、自动化脚本、命令行网页操作
安装命令：brew install TheSethRose/tap/agent-browser

Agent Browser 技能使用指南

安装

从源码编译安装

## 克隆代码仓库
git clone https://github.com/vercel-labs/agent-browser
## 进入项目目录
cd agent-browser
## 安装项目依赖（使用 pnpm 包管理器）
pnpm install
## 编译项目代码
pnpm build
## 执行安装配置
agent-browser install

快速入门

## 打开指定 URL 页面
agent-browser open <url>
## 获取页面中可交互元素（附带引用标识）
agent-browser snapshot -i
## 通过元素引用标识点击元素
agent-browser click @e1
## 通过元素引用标识填充文本内容
agent-browser fill @e2 "文本内容"
## 关闭浏览器
agent-browser close

核心工作流程

导航：agent-browser open <url>（打开指定页面）
快照：agent-browser snapshot -i（获取带引用标识的元素，如 @e1、@e2）
使用快照返回的引用标识进行元素交互
页面导航或 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 选择器匹配的区域（#main 元素内）

元素交互（使用快照返回的 @ 引用标识）

agent-browser click @e1           # 点击元素
agent-browser dblclick @e1        # 双击元素
agent-browser focus @e1           # 聚焦到元素
agent-browser fill @e2 "文本"     # 清空元素原有内容后输入文本
agent-browser type @e2 "文本"     # 直接输入文本（不清空原有内容）
agent-browser press Enter         # 按下回车键
agent-browser press Control+a     # 按下组合键（Ctrl+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 "值"     # 选择下拉框指定值
agent-browser scroll down 500     # 向下滚动页面 500 像素
agent-browser scrollintoview @e1  # 滚动页面使元素可见
agent-browser drag @e1 @e2        # 将元素从 @e1 拖拽到 @e2 位置
agent-browser upload @e1 file.pdf # 向文件上传控件上传指定文件

获取页面/元素信息

agent-browser get text @e1        # 获取元素的文本内容
agent-browser get html @e1        # 获取元素的内部 HTML 代码
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"   # 统计匹配 CSS 选择器的元素数量
agent-browser get box @e1         # 获取元素的边界框信息（位置、尺寸）

检查元素状态

agent-browser is visible @e1      # 检查元素是否可见
agent-browser is enabled @e1      # 检查元素是否可用（未禁用）
agent-browser is checked @e1      # 检查复选框/单选框是否已勾选

截图与 PDF 导出

agent-browser screenshot          # 将截图输出到标准输出流（stdout）
agent-browser screenshot path.png # 将截图保存到指定文件
agent-browser screenshot --full   # 截取整页内容
agent-browser pdf output.pdf      # 将当前页面保存为 PDF 文件

视频录制

## 开始录制视频（基于当前页面状态，保存到指定文件）
agent-browser record start ./demo.webm
## 执行交互操作（示例：点击元素）
agent-browser click @e1
## 停止录制并保存视频
agent-browser record stop
## 停止当前录制并启动新的录制（保存到新文件）
agent-browser record restart ./take2.webm

录制会创建新的上下文，但保留会话中的 Cookie 和存储数据。若未指定 URL，录制时会自动回到当前页面。建议先探索页面，再启动录制以获得流畅的演示效果。

等待操作

agent-browser wait @e1                     # 等待元素出现
agent-browser wait 2000                    # 等待 2000 毫秒（2 秒）
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         # 滚动鼠标滚轮（数值控制滚动距离/方向）

语义化定位器（替代引用标识的方式）

## 查找角色为按钮、名称为“提交”的元素并点击
agent-browser find role button click --name "Submit"
## 查找包含“登录”文本的元素并点击
agent-browser find text "Sign In" click
## 查找标签为“邮箱”的输入框并填充内容
agent-browser find label "Email" fill "user@test.com"
## 查找第一个匹配 .item 选择器的元素并点击
agent-browser find first ".item" click
## 查找第二个匹配 a 标签的元素并获取其文本
agent-browser find nth 2 "a" text

浏览器设置

agent-browser set viewport 1920 1080      # 设置浏览器视口尺寸（宽 1920，高 1080）
agent-browser set device "iPhone 14"      # 模拟指定设备（示例：iPhone 14）
agent-browser set geo 37.7749 -122.4194   # 设置地理位置（示例：旧金山经纬度）
agent-browser set offline on              # 开启离线模式（off 为关闭）
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 名称 取值       # 设置指定 Cookie
agent-browser cookies clear               # 清空所有 Cookie
agent-browser storage local               # 获取所有 localStorage 数据
agent-browser storage local 键名          # 获取 localStorage 中指定键的值
agent-browser storage local set 键 值     # 设置 localStorage 键值对
agent-browser storage local clear         # 清空 localStorage 所有数据

网络控制

agent-browser network route <url>              # 拦截指定 URL 的请求
agent-browser network route <url> --abort      # 阻止指定 URL 的请求
agent-browser network route <url> --body '{}'  # 模拟指定 URL 的响应内容
agent-browser network unroute [url]            # 移除指定 URL 的拦截规则（无参数则清空所有）
agent-browser network requests                 # 查看已跟踪的请求列表
agent-browser network requests --filter api    # 过滤包含指定关键词的请求（示例：api）

标签页与窗口管理

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

框架（Frame）操作

agent-browser frame "#iframe"     # 切换到指定 iframe 框架（通过 CSS 选择器）
agent-browser frame main          # 切回主框架

对话框处理

agent-browser dialog accept [text]  # 确认对话框（可选输入文本，适用于 prompt 对话框）
agent-browser dialog dismiss        # 关闭/取消对话框

执行 JavaScript 代码

## 执行指定的 JavaScript 代码并返回结果（示例：获取页面标题）
agent-browser eval "document.title"

会话状态管理

agent-browser state save auth.json    # 将当前会话状态（Cookie、存储等）保存到文件
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 "用户名"
agent-browser fill @e2 "密码"
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

多会话（并行浏览器）

## 启动名为 test1 的会话，打开 site-a.com
agent-browser --session test1 open site-a.com
## 启动名为 test2 的会话，打开 site-b.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
## 停止录制并保存追踪日志到文件
agent-browser trace stop trace.zip
## 从当前页面开始录制视频
agent-browser record start ./debug.webm
## 停止录制并保存视频
agent-browser record stop
## 通过 Chrome DevTools Protocol（CDP）连接并执行快照
agent-browser --cdp 9222 snapshot

常见问题排查

Linux ARM64 架构下若提示命令未找到，使用 bin 目录下的完整路径执行
元素查找失败时，重新执行 snapshot 命令获取最新的元素引用标识
页面加载异常时，在导航命令后添加 wait 命令等待页面加载
使用 --headed 参数打开可见浏览器窗口，直观调试操作流程

通用选项

--session <名称>：使用独立的隔离会话
--json：输出 JSON 格式数据
--full：截取整页截图
--headed：显示浏览器窗口（有头模式）
--timeout：设置命令超时时间（单位：毫秒）
--cdp <端口>：通过 Chrome DevTools Protocol 端口连接浏览器

注意事项

元素引用标识（@e1 等）仅在当前页面加载后稳定，页面导航后会失效
页面导航后务必重新执行 snapshot 获取新的元素引用标识
填充输入框时优先使用 fill 命令（自动清空原有内容），而非 type 命令

问题反馈

技能文档相关问题：在 https://github.com/TheSethRose/Agent-Browser-CLI 提交 Issue
CLI 工具本身问题：在 https://github.com/vercel-labs/agent-browser 提交 Issue

贡献指南（Agent Browser 技能）

本文档适用于为 Agent Browser 技能贡献代码/文档，该技能是 agent-browser CLI 工具的封装层，请先定位问题归属再反馈。

问题反馈指引

在此仓库提交 Issue 的场景

技能文档描述不清或内容缺失
SKILL.md 中的示例代码无法运行
使用该技能封装层调用 CLI 工具时需要技术支持
技能缺失某个 CLI 工具已支持的命令/功能

在 agent-browser 仓库提交 Issue 的场景

CLI 工具崩溃或抛出错误
命令行为与文档描述不符
浏览器自动化功能存在 Bug
需要给 CLI 工具新增功能

提交 Issue 前的准备

安装最新版本工具
```
npm install -g agent-browser@latest
```
在终端直接测试命令，定位问题是否属于技能封装层

Issue 提交模板

使用以下模板提供完整信息：

### 问题描述
[清晰简洁地描述 Bug 现象]


### 复现步骤
1. [第一步操作]
2. [第二步操作]
3. [观察到的错误结果]


### 预期行为
[描述你期望的正常行为]


### 环境信息
- **技能版本：** [例如 1.0.2]
- **agent-browser 版本：** [执行 agent-browser --version 的输出]
- **Node.js 版本：** [执行 node -v 的输出]
- **操作系统：** [例如 macOS Sonoma、Windows 11、Ubuntu 22.04]


### 补充信息
- [完整的错误输出或堆栈跟踪信息]
- [截图]
- [问题出现的网站 URL]

向技能中新增命令

当上游 CLI 工具新增命令时，需同步更新 SKILL.md：

保留“安装”章节内容
将新命令添加到对应分类下
补充使用示例

w3cschool 编程狮，随时随地学编程

OpenClaw Skills Agent Browser（浏览器自动化工具）

核心功能

快速安装

基础使用命令

1. 网页基础访问与内容抓取

2. 页面交互操作（模拟人工操作）

3. 个性化访问配置

4. 网页内容留存

5. 高级筛选与数据提取

常用参数说明

智能体适配特性

典型使用场景

官方信息

Agent Browser 技能使用指南

安装

推荐使用 npm 安装

从源码编译安装

快速入门

核心工作流程

命令说明

页面导航

页面快照（页面分析）

元素交互（使用快照返回的 @ 引用标识）

获取页面/元素信息

检查元素状态

截图与 PDF 导出

视频录制

等待操作

鼠标控制

语义化定位器（替代引用标识的方式）

浏览器设置

Cookie 与本地存储

网络控制

标签页与窗口管理

框架（Frame）操作

对话框处理

执行 JavaScript 代码

会话状态管理

示例：表单提交

示例：使用保存的状态实现免登

多会话（并行浏览器）

JSON 格式输出（便于程序解析）

调试功能

常见问题排查

通用选项

注意事项

问题反馈

贡献指南（Agent Browser 技能）

问题反馈指引

在此仓库提交 Issue 的场景

在 agent-browser 仓库提交 Issue 的场景

提交 Issue 前的准备

Issue 提交模板

向技能中新增命令