OpenClaw 浏览器自动化完整指南
浏览器自动化是 OpenClaw 最强大的功能之一，可以实现网页抓取、自动化测试、数据收集等任务。本文详细介绍如何使用 browser 工具完成各种自动化任务。
一、浏览器工具概述
OpenClaw 的 browser 工具基于 Playwright，支持：
- 页面导航和截图
- 元素查找和交互（点击、输入、选择）
- JavaScript 执行
- 文件上传下载
- 多标签页管理
基本用法
javascript
// 打开网页
browser(action="open", url="https://example.com")
// 页面快照（查看可交互元素）
browser(action="snapshot")
// 点击元素
browser(action="act", kind="click", ref="e12")
// 输入文本
browser(action="act", kind="type", ref="e15", text="搜索内容")二、实战案例：自动抓取新闻标题
场景说明
每天早晨自动抓取百度热搜榜前 10 条新闻，保存到本地文件。
完整代码
javascript
// 1. 打开百度热搜
browser(action="open", url="https://hot.baidu.com/")
// 2. 等待页面加载
browser(action="act", kind="wait", timeoutMs=5000)
// 3. 获取页面快照，查看元素结构
browser(action="snapshot", refs="aria")
// 4. 提取新闻标题（使用 JavaScript）
browser(action="act", kind="evaluate",
fn="() => {
const items = document.querySelectorAll('.hot-item');
return Array.from(items.slice(0, 10)).map(item => ({
rank: item.querySelector('.rank')?.innerText,
title: item.querySelector('.title')?.innerText,
heat: item.querySelector('.heat')?.innerText
}));
}")
// 5. 保存到文件
write(path="./baidu-hot-news.json", content=JSON.stringify(results, null, 2))运行结果示例
json
[
{
"rank": "1",
"title": "2026 年高考报名人数公布",
"heat": "1234.5 万"
},
{
"rank": "2",
"title": "新一代人工智能模型发布",
"heat": "987.3 万"
}
]三、实战案例：自动填写表单并提交
场景说明
自动填写用户反馈表单并提交，适用于批量测试或数据录入。
完整代码
javascript
// 1. 打开表单页面
browser(action="open", url="https://example.com/feedback")
// 2. 填写表单字段
browser(action="act", kind="fill", ref="name-input", text="张三")
browser(action="act", kind="fill", ref="email-input", text="zhangsan@example.com")
browser(action="act", kind="fill", ref="message-input", text="非常满意你们的产品！")
// 3. 选择下拉选项
browser(action="act", kind="select", ref="rating-select", values=["5"])
// 4. 勾选复选框
browser(action="act", kind="click", ref="agree-checkbox")
// 5. 提交表单
browser(action="act", kind="click", ref="submit-button")
// 6. 等待提交成功提示
browser(action="act", kind="wait", textGone="提交中...", timeoutMs=10000)
// 7. 截图保存
browser(action="screenshot", path="./submission-success.png")四、高级技巧
1. 使用 Aria 标签精确定位元素
javascript
// 推荐：使用 aria 标签，更稳定
browser(action="snapshot", refs="aria")
// 返回类似：e12="搜索按钮", e15="搜索输入框"
// 精确点击
browser(action="act", kind="click", ref="e12")2. 处理弹窗和对话框
javascript
// 等待弹窗出现并接受
browser(action="dialog", accept=true)
// 或者处理确认对话框
browser(action="act", kind="wait", text="确定要删除吗？")
browser(action="act", kind="click", ref="confirm-button")3. 文件上传
javascript
// 上传文件
browser(action="upload", paths=["./test-file.pdf"])4. 执行自定义 JavaScript
javascript
// 滚动到页面底部
browser(action="act", kind="evaluate",
fn="() => window.scrollTo(0, document.body.scrollHeight)")
// 获取页面所有链接
browser(action="act", kind="evaluate",
fn="() => Array.from(document.querySelectorAll('a')).map(a => a.href)")五、常见问题排查
问题 1：元素找不到
原因： 页面未完全加载或元素在 iframe 内
解决方案：
javascript
// 增加等待时间
browser(action="act", kind="wait", loadState="networkidle", timeoutMs=30000)
// 切换到 iframe
browser(action="snapshot", frame="iframe-name")问题 2：点击被拦截
原因： 元素被其他元素遮挡
解决方案：
javascript
// 先滚动到元素位置
browser(action="act", kind="evaluate",
fn="() => document.querySelector('#target').scrollIntoView()")
// 强制点击
browser(action="act", kind="click", ref="e12", button="right")问题 3：验证码处理
方案： 验证码需要人工介入，可以：
- 截图后发送给用户识别
- 使用第三方打码平台
- 对于简单验证码使用 OCR 识别
javascript
// 截图验证码区域
browser(action="screenshot", selector="#captcha-image", path="./captcha.png")
// 发送给用户
message(action="send", media="./captcha.png", message="请识别验证码")六、最佳实践
- 添加适当的等待：不要使用固定延迟，优先使用
wait等待特定状态 - 使用稳定的选择器：优先使用 aria 标签，避免使用易变的 XPath
- 错误处理：添加超时和重试机制
- 资源清理：完成后关闭浏览器释放资源
- 遵守 robots.txt：抓取前检查网站的爬虫政策
七、总结
浏览器自动化是提升效率的利器，掌握这些技巧可以：
- 自动化重复的网页操作
- 批量收集网络数据
- 自动测试网页功能
- 监控网站变化
记住：自动化应该节省时间，而不是制造新问题。始终添加适当的错误处理和日志记录。
相关资源：