OpenClaw实战教程系列第11篇 - 浏览器自动化
让 AI 操作浏览器：截图、填表、点按钮——网页操作的终极自动化。
为什么需要浏览器自动化？
想象这些场景：
场景 1：每天查看数据
每天早上登录后台，查看昨日数据，截图保存。
场景 2：自动填表
填写重复性表单，每次 20 分钟。
场景 3：监控网站变化
监控竞争对手价格，有变化时通知。
场景 4：自动化测试
每次部署后，手动点击测试流程。
OpenClaw 的浏览器工具能帮你自动化所有这些操作。
浏览器工具简介
OpenClaw 内置了 browser 工具，让 AI 能控制浏览器：
┌─────────────────────────────────────────────┐
│ 你的指令："打开 example.com，截图" │
│ ↓ │
│ ┌─────────────────┐ │
│ │ OpenClaw AI │ │
│ └────────┬────────┘ │
│ ↓ │
│ ┌─────────────────┐ │
│ │ browser 工具 │ │
│ │ - navigate │ │
│ │ - screenshot │ │
│ │ - click/type │ │
│ └────────┬────────┘ │
│ ↓ │
│ ┌─────────────────┐ │
│ │ 浏览器实例 │ │
│ │ (Chromium) │ │
│ └─────────────────┘ │
└─────────────────────────────────────────────┘
基本操作
1. 导航到网页
你：打开 https://news.ycombinator.com
AI：正在打开 Hacker News...
（调用 browser navigate）
✓ 已加载 https://news.ycombinator.com
页面标题：Hacker News
2. 截图
你：截图保存到桌面
AI：正在截图...
（调用 browser screenshot）
✓ 截图已保存：~/Desktop/screenshot_2025-01-20.png
3. 获取页面信息
你：这个页面有什么内容？
AI：正在分析页面...
（调用 browser snapshot）
页面结构：
- 标题：Hacker News
- 主要内容：30 条新闻
- 导航栏：new, past, comments, ask, show, jobs
- 第一条新闻："Show HN: I built..."
4. 点击元素
你：点击第一条新闻的标题
AI：正在点击...
（调用 browser click）
✓ 已点击，页面导航到文章详情
5. 输入文字
你：在搜索框输入 "OpenClaw"
AI：正在输入...
（调用 browser type）
✓ 已输入 "OpenClaw"
实战案例
案例 1：自动填写表单
场景：每天登录后台，填写昨日数据报表
对话：
你：帮我填写数据报表
AI：好的，我需要：
1. 打开报表页面
2. 填写数据
3. 提交
让我开始...
[步骤 1] 导航到报表页面...
✓ 已打开 https://admin.example.com/report
[步骤 2] 填写数据...
- 日期：自动填入昨天日期
- 访问量：读取 analytics 数据填入
- 收入：读取数据库填入
[步骤 3] 提交...
✓ 已提交报表
🎉 报表填写完成！
案例 2：抓取网页数据
场景：采集 Hacker News Top 10 标题
对话：
你：采集 HN 首页 Top 10 标题
AI：正在采集...
1. 导航到 news.ycombinator.com
2. 获取页面内容
3. 提取标题
✓ 采集完成：
1. Show HN: OpenClaw - AI Agent Gateway
2. The future of coding agents
3. Why I switched to Rust
4. ...
需要我保存到文件吗？
案例 3：监控网站变化
场景：监控产品价格，降价时通知
配置（在 HEARTBEAT.md 中）：
### 价格监控
- [ ] 打开 product page
- [ ] 获取当前价格
- [ ] 与上次记录对比
- [ ] 如果降价 > 10%，发送通知
案例 4：自动化测试
场景：每次部署后自动测试登录流程
配置（在 Cron 中）：
{
"schedule": "0 */6 * * *",
"prompt": "测试登录流程：
1. 打开登录页
2. 输入测试账号
3. 点击登录
4. 验证是否登录成功
5. 报告结果"
}
限制与注意事项
1. 反爬虫检测
问题：Cloudflare、Reddit 等网站有强防护，可能无法访问
表现：
AI：正在打开...
⚠️ 检测到验证码/人机验证
无法自动通过，需要手动操作
解决：
-
使用无头浏览器模式
-
降低操作频率
-
使用 rebrowser-playwright（反检测 fork）
2. 资源限制
限制：
-
最多同时 3 个 tab
-
内存占用 < 2GB
-
单个操作超时 60 秒
优化建议：
用完立即关闭 tab：
browser close # 关闭当前 tab
3. 登录态问题
问题：每次新 session 浏览器是全新的，没有 cookie
解决：
你：我需要登录后才能操作
AI：请告诉我：
1. 登录网址
2. 用户名
3. 密码（或提供登录后的 cookie）
或者你可以在浏览器中手动登录后告诉我"已登录"
高级技巧
技巧 1：保存登录态
如果需要保持登录状态，可以让 AI 保存 cookie：
你：登录后保存 cookie，下次直接用
AI：好的，登录后我会保存 cookie 到 ~/.openclaw/cookies/
技巧 2：批量操作
你：打开这 5 个链接，分别截图
AI：批量操作中...
✓ 链接 1/5：截图完成
✓ 链接 2/5：截图完成
✓ 链接 3/5：截图完成
...
技巧 3：结合其他工具
你：查一下今天天气，截图发到 Telegram
AI：
1. 打开天气网站
2. 搜索"北京天气"
3. 截图
4. 发送到 Telegram
✓ 已发送
故障排除
Q1: 浏览器无法启动？
检查：
# 检查 Chromium 是否已安装
openclaw doctor
# 手动安装
openclaw install browser
Q2: 页面加载超时？
原因：
-
网络慢
-
页面太大
-
有复杂 JavaScript
解决：
你：等待 10 秒让页面完全加载
AI：等待中...
（调用 browser wait）
Q3: 找不到元素？
原因：
-
元素还没加载
-
选择器不对
-
元素是动态生成的
解决：
你：等 3 秒再点击
AI：等待 3 秒后重试...
✓ 找到元素并点击
进阶技巧合集
掌握了基础操作后，这些进阶技巧能让你的自动化更稳定、更强大。
技巧 1：反检测策略
问题：很多网站能识别出你在用自动化工具
表现：
⚠️ 检测到异常访问
⚠️ 请完成人机验证
⚠️ Access Denied
解决方案：
方案 A：使用反检测浏览器
OpenClaw 支持配置反检测浏览器（如 rebrowser-playwright）:
# 安装反检测版本
npm install rebrowser-playwright
# 在 openclaw.json 中配置
{
"browser": {
"type": "rebrowser-playwright",
"stealth": true
}
}
方案 B：模拟真实用户行为
你：打开网站时要像真人一样,随机停顿、移动鼠标
AI：好的,我会:
1. 随机延迟 1-3 秒
2. 模拟鼠标移动轨迹
3. 滚动页面浏览内容
4. 然后再执行操作
✓ 已完成,看起来更自然了
方案 C：使用真实浏览器环境
-
使用你日常登录过的浏览器 profile
-
保留 cookie 和浏览历史
-
避免使用 headless 模式
相关资源：
技巧 2：多重选择器策略
问题：网站改版后，按钮 ID 变了，脚本失效
传统做法：
你：点击提交按钮
AI：找不到 #submit-btn 元素
❌ 脚本失败
改进做法：
你：点击提交按钮,试试这些选择器:
1. #submit-btn
2. button[type="submit"]
3. 包含"提交"文字的按钮
AI：正在尝试...
- #submit-btn ❌ 未找到
- button[type="submit"] ✓ 找到了!
✓ 已点击
最佳实践：
-
同时使用 ID、class、文本内容、XPath 多种定位方式
-
设置回退策略
-
定期检查选择器是否仍然有效
技巧 3：智能等待
错误示范：
// 固定等待 5 秒(浪费时间或不够用)
await sleep(5000);
正确做法：
你：等待页面完全加载后再操作
AI：使用智能等待策略:
1. 等待 DOM 元素出现
2. 等待网络请求完成
3. 等待 JavaScript 执行完毕
✓ 页面就绪(实际只等了 1.2 秒)
OpenClaw 自动处理：
-
AI 会自动判断页面状态
-
只在必要时等待
-
超时自动重试
技巧 4：资源优化
场景：采集 100 个页面，浏览器越来越慢
优化方案：
你：批量采集时禁用图片和 CSS,只要文本内容
AI：好的,配置资源过滤:
- 禁用图片加载 ✓
- 禁用 CSS ✓
- 禁用字体 ✓
速度提升 3 倍!
并发控制：
你：同时打开 3 个 tab 采集数据
AI：并发执行中...
Tab 1: 采集中...
Tab 2: 采集中...
Tab 3: 采集中...
✓ 全部完成,总耗时 2 分钟
(单线程需要 6 分钟)
技巧 5：Session 管理
场景：需要用多个账号操作
方案：
你：用账号 A 登录后采集数据,然后切换到账号 B
AI：使用独立 session:
1. 创建 session-A
2. 登录账号 A
3. 采集数据
4. 保存 session-A 的 cookie
5. 创建 session-B
6. 登录账号 B
7. 采集数据
✓ 两个账号互不干扰
技巧 6：调试与监控
开发阶段：
你：慢动作执行,每步截图,方便调试
AI：开启调试模式:
- 每步延迟 500ms
- 自动截图保存到 ~/debug/
- 记录详细日志
✓ 调试模式已启用
生产环境：
你：如果失败了,自动重试 3 次,并发送通知
AI：配置容错策略:
- 失败自动重试(最多 3 次)
- 记录错误日志
- 发送 Telegram 通知
✓ 已配置
Trace 分析：
OpenClaw 自动记录每次执行的 trace，失败时可以回放：
你：上次执行为什么失败了?
AI：查看 trace 记录...
失败原因:
- 时间: 2025-01-20 14:32:15
- 步骤: 点击"下一页"按钮
- 错误: 元素被遮挡(有弹窗)
建议: 先关闭弹窗再点击
工具与资源推荐
核心工具对比
OpenClaw 底层可以使用不同的浏览器引擎：
| 工具 | 优势 | 适用场景 | 官方资源 |
|---|---|---|---|
| Playwright | 跨浏览器、速度快、现代化 | 企业级项目、需要多浏览器支持 | GitHub |
| Puppeteer | Chrome 专用、生态成熟、插件丰富 | Chrome/Chromium 项目 | Google 官方 |
| Selenium | 老牌工具、语言支持最多 | 传统项目、需要多语言 | Selenium 官方 |
OpenClaw 默认使用 Playwright（推荐），也支持切换到其他引擎。
反检测工具
-
rebrowser-patches: 修复 CDP 检测漏洞 (GitHub)
-
puppeteer-extra: 插件系统，支持 stealth、recaptcha 等 (GitHub)
-
playwright-extra: Playwright 版本的增强插件 (GitHub)
学习资源
AI 驱动的浏览器自动化
无代码方案
如果不想写代码，这些工具也值得尝试：
验证清单
-
成功打开过网页
-
成功截图并保存
-
成功点击过元素
-
成功输入过文字
-
尝试过自动化流程（登录+操作）
-
了解反爬虫限制
-
尝试过反检测策略
-
配置过多重选择器
-
使用过资源优化提速
下一步
浏览器让 AI 能操作网页，下一篇让它控制更多设备：
→ [第 12 篇 | Node 节点] — 控制手机、平板、其他电脑，实现跨设备操作。
💬 读者讨论
你最想用浏览器自动化做什么？
A. 数据采集
B. 自动填表
C. 自动化测试
D. 其他（请评论）
欢迎在评论区分享！