导读:想让AI帮你操作网页?自动填表、抓取数据、截图分析?OpenClaw内置了强大的浏览器控制能力,基于Playwright引擎,让你的Agent可以像人一样操作浏览器。本教程从基础到高级,全面掌握浏览器自动化。
🎯 能做什么?
📊 数据抓取
自动抓取网页数据、价格监控、竞品分析、新闻聚合。
📝 表单自动填写
自动填写注册表单、提交申请、批量操作后台系统。
📸 截图分析
网页截图、UI测试、视觉回归测试、内容审计。
🔄 RPA流程
复杂的多步骤业务流程自动化,如订单处理、数据同步。
🔧 基础:浏览器控制
1. 启动浏览器
# OpenClaw内置浏览器控制,无需额外安装
# 检查浏览器状态
openclaw browser status
# 启动隔离浏览器(默认)
openclaw browser start
# 使用用户浏览器(保留登录态)
openclaw browser start --profile user
2. 基本操作
# 打开网页
openclaw browser open "https://example.com"
# 获取页面快照(结构化DOM)
openclaw browser snapshot
# 截图
openclaw browser screenshot
# 获取当前所有标签页
openclaw browser tabs
3. 页面交互
# 点击元素
openclaw browser click "登录按钮"
# 输入文本
openclaw browser type "搜索框" "OpenClaw教程"
# 选择下拉框
openclaw browser select "语言" "中文"
# 滚动页面
openclaw browser scroll down 500
# 等待元素出现
openclaw browser wait "#results"
🕷️ 进阶:智能网页抓取
1. 配置抓取Agent
# ~/.openclaw/config.yaml
agents:
web-scraper:
model: "gpt-4o-mini"
systemPrompt: |
你是一个网页数据抓取专家。
能力:
- 分析网页结构,找到目标数据
- 处理分页、懒加载、动态内容
- 清洗和格式化抓取的数据
- 处理反爬机制(验证码、频率限制)
规则:
- 遵守robots.txt
- 控制请求频率,不要给服务器造成压力
- 抓取的数据注明来源
2. 抓取示例:竞品价格监控
# 使用OpenClaw Browser工具抓取
# 步骤1: 打开目标网站
browser(action: "open", url: "https://competitor.com/pricing")
# 步骤2: 获取页面快照
snapshot = browser(action: "snapshot")
# 步骤3: AI分析页面结构,提取价格数据
# Agent会自动识别价格元素并提取
# 步骤4: 保存数据
write(path: "prices.json", content: extractedData)
# 步骤5: 定时执行
openclaw cron add \
--name "price-monitor" \
--schedule "0 */6 * * *" \
--task "抓取竞品价格并对比分析,变化超过5%时通知"
3. 抓取示例:新闻聚合
# 抓取多个新闻源
openclaw cron add \
--name "news-scraper" \
--schedule "0 */2 * * *" \
--task '抓取AI新闻:
1. 打开 https://news.ycombinator.com/
2. 获取首页所有标题和链接
3. 筛选AI相关的文章
4. 对每篇文章用web_fetch获取摘要
5. 生成新闻汇总保存到网站'
📝 表单自动填写
1. 简单表单
# 打开表单页面
browser(action: "open", url: "https://example.com/register")
# 填写各个字段
browser(action: "fill", ref: "input[name='username']", text: "testuser")
browser(action: "fill", ref: "input[name='email']", text: "test@example.com")
browser(action: "fill", ref: "input[name='password']", text: "securepass123")
# 选择下拉框
browser(action: "select", ref: "select[name='country']", values: ["中国"])
# 勾选复选框
browser(action: "click", ref: "input[name='agree_terms']")
# 提交表单
browser(action: "click", ref: "button[type='submit']")
2. 复杂表单(多步骤)
# 多步骤表单处理
# 步骤1: 基本信息
browser(action: "fill", ref: "#name", text: "张三")
browser(action: "fill", ref: "#phone", text: "13800138000")
browser(action: "click", ref: "#next-step")
# 步骤2: 等待新步骤加载
browser(action: "wait", loadState: "networkidle")
# 步骤3: 填写详细信息
browser(action: "fill", ref: "#company", text: "妙趣科技")
browser(action: "fill", ref: "#address", text: "北京市海淀区")
browser(action: "click", ref: "#submit")
📸 截图与视觉分析
1. 网页截图
# 全页面截图
browser(action: "screenshot", fullPage: true)
# 指定区域截图
browser(action: "screenshot", selector: "#main-content")
# 截图并保存
browser(action: "screenshot", fullPage: true)
# 截图会自动保存,可以在Agent中引用
2. UI测试
# 自动化UI测试
openclaw cron add \
--name "ui-test" \
--schedule "0 */4 * * *" \
--task '执行UI测试:
1. 打开网站首页并截图
2. 检查关键元素是否正常显示
3. 测试登录流程
4. 对比历史截图,检测UI变化
5. 异常时通过飞书通知开发团队'
🔐 登录态保持
1. 使用用户浏览器Profile
# 使用已登录的浏览器
# 这会复用你本地浏览器的cookies和登录态
browser(action: "open", url: "https://github.com", profile: "user")
# 所有操作都在你的登录会话中执行
browser(action: "snapshot") # 可以看到登录后的页面
2. Cookie管理
# 保存cookies到文件
exec: "openclaw browser cookies export cookies.json"
# 导入cookies
exec: "openclaw browser cookies import cookies.json"
# 在Agent中自动管理cookies
# OpenClaw会自动处理cookie的存储和恢复
⚠️ 安全提醒:使用用户浏览器Profile时,Agent可以访问你所有的登录网站。确保只在可信环境中使用,不要在共享机器上启用此功能。
🔄 RPA实战案例
案例1:自动发布文章到多个平台
# 自动化多平台发布流程
openclaw cron add \
--name "multi-platform-publish" \
--schedule "0 10 * * 1,3,5" \
--task '执行多平台发布:
1. 从 /var/www/miaoquai/articles/ 读取待发布文章
2. 打开 dev.to,使用用户Profile登录
3. 创建新文章,粘贴内容
4. 设置标签和封面图
5. 发布文章
6. 重复步骤2-5发布到hashnode
7. 记录发布结果到日志'
案例2:自动化数据报表
# 从多个后台系统抓取数据生成报表
openclaw cron add \
--name "auto-report" \
--schedule "0 9 * * 1" \
--task '生成周报:
1. 打开Google Analytics,截图本周流量数据
2. 打开SEO工具,导出关键词排名
3. 打开社交媒体后台,获取互动数据
4. 汇总所有数据生成周报
5. 保存到网站并推送给团队'
案例3:自动化客服回复
# 监控客服系统并自动回复常见问题
openclaw cron add \
--name "auto-cs" \
--schedule "*/15 * * * *" \
--task '处理客服消息:
1. 打开客服后台
2. 检查未处理的消息
3. 对于常见问题(FAQ),自动生成回复
4. 对于复杂问题,标记并通知人工客服
5. 记录处理结果'
⚡ 性能优化
1. 并发控制
# 同时打开多个标签页处理
# 使用多tab并行抓取
browser(action: "open", url: "https://site1.com")
browser(action: "open", url: "https://site2.com")
browser(action: "open", url: "https://site3.com")
# 在不同标签页间切换
browser(action: "focus", targetId: "tab1")
browser(action: "focus", targetId: "tab2")
2. 资源优化
# 禁用图片加载(仅抓取文本)
# 在Agent配置中设置
browser:
options:
blockResources: ["image", "font", "media"]
# 使用无头模式(默认)
browser:
headless: true
3. 错误处理
# Agent中定义错误处理策略
## 浏览器操作规则
- 操作前先检查元素是否存在
- 网络超时时自动重试(最多3次)
- 遇到验证码时通知人工处理
- 页面加载失败时切换备用方案
📋 常用操作速查
| 操作 | 命令 | 说明 |
|---|---|---|
| 打开页面 | browser open URL | 导航到指定URL |
| 页面快照 | browser snapshot | 获取结构化DOM |
| 截图 | browser screenshot | 页面截图 |
| 点击 | browser click REF | 点击元素 |
| 输入 | browser type REF TEXT | 输入文本 |
| 选择 | browser select REF VALUES | 选择下拉框 |
| 滚动 | browser scroll DIRECTION | 滚动页面 |
| 等待 | browser wait STATE | 等待加载 |
| 执行JS | browser evaluate FN | 执行JavaScript |
| 关闭 | browser close | 关闭标签页 |
💡 最佳实践
- 🎯 明确目标:每次操作前明确要抓取什么数据
- ⏳ 适当等待:页面动态内容需要等待加载完成
- 🔄 错误重试:网络不稳定时自动重试
- 📊 频率控制:不要过于频繁地请求同一网站
- 🔐 安全第一:不要在不信任的网站输入敏感信息
- 📝 日志记录:记录所有操作便于排查问题