OpenClaw浏览器自动化完全指南

凌晨1点22分，我盯着屏幕上的第17次登录失败日志陷入沉思。如果AI能自己点鼠标，该多好。后来我发现，它真的能。

什么是OpenClaw浏览器自动化

OpenClaw内置了一套强大的浏览器控制系统，让AI Agent能够像人类一样操作网页：打开页面、点击按钮、填写表单、截取屏幕、执行JavaScript。底层基于Chromium协议（CDP），支持v144+版本的浏览器。

核心能力包括：

环境准备

使用浏览器自动化前需要确保：

  1. 安装Chromium-based浏览器（Chrome v144+或Edge v144+）
  2. 启动OpenClaw Gateway服务
  3. 确认浏览器控制服务器状态正常

检查浏览器状态

// 通过OpenClaw工具检查浏览器状态
browser({
  action: "status"
})
// 返回：profiles, tabs, browser版本等信息

Snapshot：AI的"眼睛"

Snapshot是浏览器自动化的核心概念——AI通过获取页面的DOM结构来"看到"页面。它不会像人类一样看图片，而是读取一个精简的DOM树。

两种Snapshot模式

模式说明适用场景
role（默认）基于角色+名称的引用（如"按钮[提交]"）一般页面交互
aria基于ARIA引用ID的稳定标识需要跨调用保持引用稳定

获取页面快照

browser({
  action: "snapshot",
  targetId: "tab-uuid",       // 指定标签页
  refs: "role",                // 或 "aria"
  compact: true                // 精简模式，减少token消耗
})

最佳实践：拿到snapshot后，先用ARIA引用定位目标元素，然后在后续操作中保持使用同一个targetId，这样引用不会因DOM变化而失效。

Act：AI的"手"

Act是执行具体操作的方式，支持多种交互类型：

点击操作

// 单击
browser({ action: "act", kind: "click", ref: "e12" })

// 双击
browser({ action: "act", kind: "click", ref: "e12", doubleClick: true })

// 带修饰键的点击
browser({ action: "act", kind: "click", ref: "e12", modifiers: ["Shift", "Ctrl"] })

输入与表单

// 输入文本
browser({ action: "act", kind: "type", ref: "e5", text: "Hello World" })

// 慢速输入（模拟真人打字）
browser({ action: "act", kind: "type", ref: "e5", text: "Hello", slowly: true })

// 填充表单字段
browser({
  action: "act",
  kind: "fill",
  ref: "e5",
  text: "search query",
  submit: true              // 自动提交
})

选择与拖拽

// 下拉选择
browser({ action: "act", kind: "select", ref: "e8", values: ["option-2"] })

// 拖拽元素
browser({
  action: "act",
  kind: "drag",
  startRef: "e10",
  endRef: "e15"
})

截图与对比

// 整页截图
browser({
  action: "screenshot",
  targetId: "tab-uuid",
  fullPage: true,
  type: "png"
})

// 指定区域截图
browser({
  action: "screenshot",
  ref: "e12",
  width: 800,
  height: 600
})

多Profile配置

OpenClaw支持两种浏览器Profile：

Profile说明使用场景
openclaw（默认）隔离的OpenClaw管理浏览器常规自动化任务
user使用用户已登录的浏览器需要已有登录态的操作

使用用户浏览器（需用户在场）

browser({
  action: "snapshot",
  profile: "user",      // 使用已登录的用户浏览器
  target: "host"         // 在宿主机执行
})

高级技巧

1. JavaScript注入

browser({
  action: "act",
  kind: "evaluate",
  fn: "document.querySelector('.price').innerText"
})

2. 等待策略

// 等待特定元素出现
browser({
  action: "act",
  kind: "wait",
  textGone: "Loading...",
  timeoutMs: 5000
})

3. 文件上传

browser({
  action: "upload",
  paths: ["/path/to/file.pdf"],
  ref: "e20"           // 文件输入元素引用
})

最佳实践

  1. 优先用Snapshot+Act：不要用CSS选择器猜元素，先snapshot看清结构再操作
  2. 保持targetId一致：在同一标签页操作时，始终使用snapshot返回的targetId
  3. 控制token消耗：使用compact模式和maxChars参数避免快照过大
  4. 错误处理：操作失败时重新snapshot，DOM结构可能已经变化
  5. 避免act:wait：尽量用textGone等条件等待，而非固定等待时间

实际应用场景