Appearance
OpenClaw browser-use 技能完全指南：AI 驱动的浏览器自动化实战
让 AI 像真人一样操作浏览器：打开网页、点击按钮、填写表单、提取数据、截图存档。browser-use 技能把繁琐的网页操作交给 AI，释放你的时间。
browser-use 是什么？
browser-use 是 OpenClaw 的浏览器自动化技能，基于 Playwright 驱动，支持：
| 功能 | 说明 |
|---|---|
| 网页导航 | 打开 URL、前进、后退、刷新 |
| 元素操作 | 点击、输入、下拉选择、拖拽 |
| 数据提取 | 抓取文本、图片、链接、表格 |
| 截图录屏 | 全页截图、元素截图、录屏 |
| 表单处理 | 自动填写、提交、验证 |
| 多标签管理 | 打开多标签、切换、关闭 |
核心优势：
- 拟人化操作：绕过大部分自动化风控
- 多浏览器支持：无头 Chromium、真实 Chrome、云端浏览器
- AI 理解页面：自动识别元素，无需手写选择器
- 可视化调试：支持 headed 模式，实时看到操作过程
安装配置
安装技能
bash
openclaw skill install browser-use安装浏览器驱动
bash
# 安装 Playwright 浏览器
npx playwright install chromium
# 或安装所有浏览器
npx playwright install配置权限
在 ~/.openclaw/openclaw.json 中添加：
json
{
"skills": {
"browser-use": {
"enabled": true,
"permissions": ["browser", "network"],
"config": {
"headless": true,
"timeout": 30000,
"viewport": {
"width": 1280,
"height": 720
}
}
}
}
}配置参数说明
| 参数 | 默认值 | 说明 |
|---|---|---|
headless | true | 无头模式，不显示浏览器窗口 |
timeout | 30000 | 操作超时时间（毫秒） |
viewport.width | 1280 | 视口宽度 |
viewport.height | 720 | 视口高度 |
slowMo | 0 | 操作延迟（毫秒），调试用 |
基本操作
打开网页
用户：打开 https://www.example.com
Agent：[执行 browser_use action=open url=https://www.example.com]
已打开网页：https://www.example.com获取页面快照
用户：获取页面快照
Agent：[执行 browser_use action=snapshot]
页面结构：
- 标题：Example Domain
- 主要元素：
- 标题 "Example Domain"
- 链接 "More information..." [href="https://www.iana.org/domains/example"]
- 段落 "This domain is for use in illustrative examples..."点击元素
用户：点击"More information"链接
Agent：[执行 browser_use action=click ref=e5]
已点击链接，当前页面：https://www.iana.org/domains/example输入文本
用户：在搜索框输入"OpenClaw教程"
Agent：[执行 browser_use action=type selector=input[type="search"] text="OpenClaw教程"]
已输入文本，是否需要提交搜索？截图
用户：截取整个页面
Agent：[执行 browser_use action=screenshot full_page=true path="screenshot.png"]
截图已保存：screenshot.png数据提取
提取文本内容
用户：提取页面上所有文章标题
Agent：[执行 browser_use action=evaluate code="Array.from(document.querySelectorAll('h2')).map(el => el.textContent)"]
提取到 10 个标题：
1. OpenClaw 安装教程
2. OpenClaw 配置指南
3. OpenClaw 技能开发
...提取表格数据
用户：提取页面上的表格数据
Agent：[执行 browser_use action=evaluate code="..."]
提取到表格数据：
| 名称 | 价格 | 库存 |
|------|------|------|
| 商品A | ¥99 | 100 |
| 商品B | ¥199 | 50 |
...提取图片链接
用户：提取所有商品图片链接
Agent：[执行 browser_use action=evaluate code="Array.from(document.querySelectorAll('img.product')).map(el => el.src)"]
提取到 20 个图片链接：
- https://example.com/img/product1.jpg
- https://example.com/img/product2.jpg
...表单自动填写
登录表单示例
用户：帮我登录 example.com，用户名 test@example.com，密码 password123
Agent：[执行序列]
1. 打开 https://example.com/login
2. 输入用户名到 input[name="email"]
3. 输入密码到 input[name="password"]
4. 点击登录按钮
登录成功，当前页面：用户中心复杂表单示例
用户：填写注册表单，姓名张三，邮箱 zhangsan@example.com，选择"企业用户"
Agent：[执行序列]
1. 输入姓名：张三
2. 输入邮箱：zhangsan@example.com
3. 选择下拉选项：企业用户
4. 勾选同意协议
5. 点击提交
注册表单已填写并提交。高级操作
多标签管理
用户：在后台打开所有搜索结果链接
Agent：[执行序列]
1. 获取所有搜索结果链接
2. 逐个在新标签打开
3. 等待页面加载完成
4. 切换到第一个标签
已打开 10 个标签页，当前在第 1 个标签。标签操作命令：
| 操作 | 命令 |
|---|---|
| 新建标签 | action=tabs tab_action=new |
| 列出标签 | action=tabs tab_action=list |
| 切换标签 | action=tabs tab_action=select index=2 |
| 关闭标签 | action=tabs tab_action=close |
iframe 操作
用户：操作页面中的 iframe
Agent：[执行 browser_use action=snapshot frame_selector="iframe#main"]
iframe 内容已获取，可以继续操作。文件上传
用户：上传文件 report.pdf
Agent：[执行 browser_use action=file_upload selector="input[type='file']" paths_json='["/path/to/report.pdf"]']
文件已上传：report.pdf拖拽操作
用户：把元素A拖到元素B位置
Agent：[执行 browser_use action=drag start_ref=e1 end_ref=e2]
拖拽完成。实战案例一：批量截图
场景
需要对多个网页进行全页截图存档。
操作流程
用户：对以下网页批量截图：
https://site1.com
https://site2.com
https://site3.com
Agent：[执行流程]
1. 打开 site1.com → 截图保存 site1.png
2. 打开 site2.com → 截图保存 site2.png
3. 打开 site3.com → 截图保存 site3.png
截图完成，已保存 3 张图片。优化配置
json
{
"config": {
"full_page": true,
"wait_for": "networkidle",
"screenshot_type": "png"
}
}实战案例二：价格监控
场景
监控电商平台商品价格变化。
操作流程
用户：监控商品 https://shop.com/product/123 的价格，每天检查一次
Agent：[创建定时任务]
1. 定时器：每天 09:00 执行
2. 打开商品页面
3. 提取价格元素
4. 对比历史价格
5. 价格变化时发送通知
监控任务已创建，下次执行：明天 09:00数据提取代码
javascript
// 提取价格
const price = document.querySelector('.price-current')?.textContent;
// 提取库存
const stock = document.querySelector('.stock-status')?.textContent;
// 提取评分
const rating = document.querySelector('.rating-score')?.textContent;
return { price, stock, rating };实战案例三：自动填报表单
场景
每月自动填写政府部门统计报表。
操作流程
用户：填写统计局月报，数据在本月数据.xlsx
Agent：[执行流程]
1. 读取 Excel 文件获取数据
2. 打开统计局网站
3. 登录账号
4. 进入报表页面
5. 逐项填写数据
6. 上传附件
7. 提交报表
8. 截图确认
月报已提交，截图已保存。表单映射配置
json
{
"form_mapping": {
"企业名称": "company_name",
"营业收入": "revenue",
"从业人数": "employees",
"纳税金额": "tax"
}
}实战案例四：竞品分析
场景
抓取竞品网站产品信息进行对比分析。
操作流程
用户：分析竞品 A、B、C 的产品价格和规格
Agent：[执行流程]
1. 打开竞品 A 网站 → 提取产品列表
2. 打开竞品 B 网站 → 提取产品列表
3. 打开竞品 C 网站 → 提取产品列表
4. 整理对比表格
对比分析完成：
| 产品 | 竞品A | 竞品B | 竞品C |
|------|-------|-------|-------|
| 基础版 | ¥99 | ¥89 | ¥109 |
| 专业版 | ¥299 | ¥279 | ¥319 |
| 企业版 | ¥999 | ¥899 | ¥1199 |实战案例五：自动化测试
场景
对网站进行自动化功能测试。
操作流程
用户：测试登录功能是否正常
Agent：[执行测试用例]
1. 打开登录页
2. 输入测试账号
3. 点击登录
4. 验证是否跳转到首页
5. 检查用户名是否显示
6. 输出测试报告
测试结果：通过 ✅
- 登录成功
- 跳转正确
- 用户名显示正常测试配置
json
{
"test_cases": [
{
"name": "登录测试",
"steps": [
{"action": "open", "url": "/login"},
{"action": "type", "selector": "#email", "text": "test@example.com"},
{"action": "type", "selector": "#password", "text": "password"},
{"action": "click", "selector": "button[type=submit]"},
{"action": "wait_for", "selector": ".user-profile"}
],
"assertions": [
{"type": "url", "expected": "/dashboard"},
{"type": "text", "selector": ".username", "expected": "测试用户"}
]
}
]
}反爬虫技巧
降低被检测风险
| 技巧 | 配置 |
|---|---|
| 随机延迟 | slowMo: Math.random() * 1000 + 500 |
| 真实浏览器 | 使用 headed: true |
| 随机 User-Agent | 配置 userAgent 参数 |
| Cookie 持久化 | 保存登录状态 |
| 模拟人类行为 | 鼠标移动、滚动、随机停顿 |
配置示例
json
{
"config": {
"headless": false,
"slowMo": 500,
"args": [
"--disable-blink-features=AutomationControlled",
"--disable-infobars"
],
"userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"
}
}调试技巧
Headed 模式调试
json
{
"config": {
"headless": false
}
}实时看到浏览器操作过程。
查看控制台日志
用户：查看浏览器控制台输出
Agent：[执行 browser_use action=console_messages level="error"]
控制台错误日志：
- Failed to load resource: net::ERR_BLOCKED_BY_CLIENT查看网络请求
用户：查看所有网络请求
Agent：[执行 browser_use action=network_requests include_static=false]
网络请求列表：
- GET https://api.example.com/data → 200
- POST https://api.example.com/submit → 201常见问题
问题一：元素找不到
原因： 页面未加载完成
解决：
json
{
"wait_for": "selector",
"selector": ".target-element",
"wait_time": 5
}问题二：超时
原因： 网络慢或页面复杂
解决：
json
{
"timeout": 60000
}问题三：被检测为机器人
原因： 操作过于机械
解决：
- 使用 headed 模式
- 增加随机延迟
- 使用真实浏览器指纹
最佳实践
实践一：等待策略
优先使用 wait_for 而不是固定延迟：
json
{
"action": "wait_for",
"selector": ".loaded-element"
}实践二：错误重试
配置重试机制：
json
{
"retry": {
"maxAttempts": 3,
"backoff": "exponential"
}
}实践三：数据备份
截图保存关键步骤：
json
{
"screenshot_on_error": true,
"screenshot_dir": "./logs/screenshots"
}实践四：资源清理
操作完成后关闭浏览器：
用户：任务完成
Agent：[执行 browser_use action=stop]
浏览器已关闭，资源已释放。总结
| 功能 | 操作 |
|---|---|
| 打开网页 | action=open url=... |
| 点击元素 | action=click ref=... |
| 输入文本 | action=type text=... |
| 获取快照 | action=snapshot |
| 截图 | action=screenshot |
| 提取数据 | action=evaluate code=... |
| 多标签 | action=tabs tab_action=... |
browser-use 核心价值：
- 把重复的网页操作自动化
- AI 理解页面，无需手写选择器
- 拟人化操作，降低被检测风险
- 支持复杂多步骤工作流
从简单的单页面操作开始，逐步扩展到复杂的多站点自动化流程。关键是理解业务流程，拆解成可执行的原子操作，让 AI 按步骤执行。
