Browser 自动化实战：让 OpenClaw 接管真实网页工作流

日常工作中，大量时间被消耗在重复性的网页操作上——登录后台系统、从多个页面抓取数据、反复填写表单提交。这些操作流程固定、步骤清晰，却又不得不亲手完成。OpenClaw 的 Browser Relay 模块正是为解决这类问题而生：让 AI Agent 像人类一样操控浏览器，把你从机械劳动中解放出来。

本文将从架构原理到实战配置，完整拆解如何用 OpenClaw 实现浏览器自动化。

Browser Relay 是什么

Browser Relay 是 OpenClaw 内置的浏览器控制模块，充当 AI Agent 与真实浏览器之间的桥梁。它的核心职责是：

• 指令翻译：将 Agent 的自然语言意图转换为具体的浏览器操作
• 会话管理：维护浏览器实例的生命周期，包括启动、复用和回收
• 状态同步：实时将页面状态（DOM、截图、网络请求）反馈给 Agent
• 安全隔离：在沙箱环境中执行操作，防止越权访问

架构上，Browser Relay 底层依赖 Playwright，支持 Chromium、Firefox 和 WebKit 三大引擎。你可以把它理解为一个"浏览器遥控器"——Agent 发出指令，Relay 负责执行并汇报结果。

# config/browser.yml
browser:
  enabled: true
  engine: "playwright"
  browsers:
    chromium:
      enabled: true
      headless: true
  defaults:
    viewport:
      width: 1920
      height: 1080
    timeout: 30000
    locale: "zh-CN"

Playwright 动作链：用代码描述网页操作

Playwright 动作链是 Browser Relay 的执行单元。每个动作链由一系列有序步骤组成，每个步骤对应一个浏览器操作：导航、等待、点击、输入、提取等。

OpenClaw 使用 YAML 格式定义动作链，支持变量插值和条件判断：

steps:
  - action: "navigate"
    url: "https://example.com/page"

  - action: "wait"
    selector: "#target-element"
    timeout: 5000

  - action: "fill"
    selector: "input[name='query']"
    value: "{{search_term}}"

  - action: "click"
    selector: "button[type='submit']"

  - action: "extract"
    selector: ".result-list .item"
    output_var: "results"

动作链的强大之处在于可组合性——你可以把多个小动作链串联成复杂的工作流，也可以在 Agent 对话中动态生成。

实战场景 1：自动登录后台系统

最常见的需求：每天登录某个管理后台，查看数据或执行操作。手动操作需要打开浏览器、输入账号密码、处理验证码、等待加载。用 OpenClaw 可以一步到位。

# config/forms.yml
forms:
  admin_login:
    url: "https://admin.example.com/login"
    description: "自动登录管理后台"

    steps:
      - action: "navigate"
        url: "https://admin.example.com/login"

      - action: "wait"
        selector: "#username"
        timeout: 8000

      - action: "fill"
        selector: "#username"
        value: "${ADMIN_USERNAME}"

      - action: "fill"
        selector: "#password"
        value: "${ADMIN_PASSWORD}"

      - action: "click"
        selector: "button[type='submit']"

      - action: "wait"
        selector: ".dashboard-container"
        timeout: 15000
        message: "等待仪表盘加载完成"

      - action: "screenshot"
        path: "screenshots/login_success.png"

执行登录：

# 运行预定义的登录流程
claw forms run admin_login

# 也可以配合定时任务，每天自动登录并截图
claw schedule add --name "daily_login" \
  --cron "0 9 * * *" \
  --command "claw forms run admin_login"

注意：账号密码通过环境变量注入（${ADMIN_USERNAME}），永远不要把凭据硬编码在配置文件中。

实战场景 2：自动抓取网页数据并整理

假设你需要每天从竞品网站抓取产品价格，或者从内部系统导出报表数据。Browser Relay 可以模拟真实用户行为，绕过简单的反爬机制。

scraping:
  rules:
    competitor_prices:
      url: "https://competitor.example.com/products"
      allowed: true

      steps:
        - action: "navigate"
          url: "https://competitor.example.com/products"

        - action: "wait"
          selector: ".product-grid"

        - action: "extract"
          selector: ".product-card"
          fields:
            name: ".product-name"
            price: ".product-price"
            stock: ".stock-status"
          output_var: "products"

      pagination:
        enabled: true
        max_pages: 10
        next_button: "a.next-page"

  limits:
    delay_between_requests: 3000
    max_concurrent: 2
    respect_robots_txt: true

抓取完成后，Agent 可以自动整理数据：

User: 抓取竞品产品页面，整理成价格对比表

Agent: 好的，正在抓取数据...

[使用 browser_navigate 访问竞品页面]
[使用 browser_extract 提取产品信息]
[翻页并继续提取]

抓取完成，共获取 86 条产品数据。以下是价格对比摘要：

| 产品类别 | 竞品均价 | 我方均价 | 差异 |
|---------|---------|---------|------|
| 基础版   | ¥299    | ¥279    | -6.7% |
| 专业版   | ¥899    | ¥999    | +11.1% |
| 企业版   | ¥2999   | ¥2499   | -16.7% |

建议：专业版定价偏高，可考虑调整。

实战场景 3：自动填写表单提交

批量提交表单是另一个高频场景，比如批量注册测试账号、批量提交工单、自动填写报销单等。

forms:
  expense_report:
    url: "https://oa.example.com/expense/new"
    description: "自动填写报销单"

    steps:
      - action: "navigate"
        url: "https://oa.example.com/expense/new"

      - action: "wait"
        selector: "form.expense-form"

      - action: "fill"
        selector: "input[name='title']"
        value: "{{expense.title}}"

      - action: "fill"
        selector: "input[name='amount']"
        value: "{{expense.amount}}"

      - action: "select"
        selector: "select[name='category']"
        value: "{{expense.category}}"

      - action: "fill"
        selector: "textarea[name='description']"
        value: "{{expense.description}}"

      - action: "upload"
        selector: "input[type='file']"
        file: "{{expense.receipt_path}}"

      - action: "click"
        selector: "button.submit-btn"

      - action: "wait"
        selector: ".success-toast"
        timeout: 10000

      - action: "extract"
        selector: ".expense-id"
        output_var: "expense_number"

批量执行：

# 从 CSV 读取数据批量提交
claw forms run expense_report \
  --data-file expenses.csv \
  --delay 2000

配置要点

Headless vs Headed 模式

browser:
  browsers:
    chromium:
      headless: true   # 无头模式：服务器部署，无需显示器
      # headless: false  # 有头模式：调试时使用，可以看到浏览器界面

• Headless（无头）：推荐用于生产环境，资源消耗低，适合 Docker 部署
• Headed（有头）：调试时使用，能直观看到每一步操作，方便排查问题

超时处理

browser:
  defaults:
    timeout: 30000  # 全局默认超时 30 秒

  retry:
    enabled: true
    max_attempts: 3
    backoff: "exponential"  # 指数退避：1s, 2s, 4s
    retry_on:
      - "TimeoutError"
      - "NavigationError"

错误重试策略

网络不稳定、页面加载慢是常态。合理的重试策略至关重要：

automation:
  error_handling:
    # 重试配置
    retry:
      max_attempts: 3
      initial_delay: 1000   # 首次重试等待 1 秒
      max_delay: 10000      # 最大等待 10 秒
      backoff_multiplier: 2 # 每次翻倍

    # 降级策略
    fallback:
      on_timeout: "screenshot_and_skip"  # 超时则截图跳过
      on_element_not_found: "retry_with_alternative_selector"
      on_navigation_error: "clear_cache_and_retry"

    # 失败通知
    on_failure:
      notify:
        - channel: "telegram"
          user_id: "${ADMIN_TELEGRAM_ID}"

安全注意事项

浏览器自动化涉及真实的网络交互，安全问题不容忽视：

• 凭据管理：所有账号密码必须通过环境变量或密钥管理服务注入，禁止硬编码
• 域名白名单：严格限制 Agent 可访问的域名范围，防止被注入恶意 URL
• 沙箱隔离：在 Docker 容器中运行浏览器实例，与宿主机隔离
• 操作审计：记录所有浏览器操作日志，支持事后追溯
• 速率限制：设置合理的请求间隔，避免触发目标网站的反爬机制
• 遵守 robots.txt：尊重目标网站的爬虫协议

browser:
  security:
    sandbox: true
    allowed_domains:
      - "*.your-company.com"
      - "admin.example.com"
    block_downloads: true
    cookies:
      clear_on_exit: true
      accept_third_party: false

小结

Browser Relay 让 OpenClaw 从"只会聊天"进化为"能动手干活"。通过 Playwright 动作链，你可以把任何重复性的网页操作编排成自动化工作流。关键在于：

1. 从简单场景入手，先跑通一个登录或抓取流程
2. 逐步添加错误处理和重试机制
3. 始终把安全放在第一位
4. 善用 headed 模式调试，用 headless 模式部署

把机械劳动交给 Agent，把创造性工作留给自己。