🌐 OpenClaw 浏览器自动化完全指南

网页抓取 · 表单填写 · RPA流程 · 截图分析 · 登录态保持

导读:想让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等待加载
执行JSbrowser evaluate FN执行JavaScript
关闭browser close关闭标签页

💡 最佳实践