浏览器自动化为什么重要？

很多网站没有API，数据只能通过浏览器获取。OpenClaw的浏览器自动化能力让你的AI Agent可以像人一样操作浏览器——打开网页、点击按钮、填写表单、抓取数据、生成截图。

凌晨2点15分，你的Agent打开了竞品网站，逐页扫描价格变化，截图存证，然后生成了一份对比报告。整个过程，人类在睡觉。

浏览器工具一览

基础操作

1. 打开网页

// 打开一个网页
browser({
  action: "open",
  url: "https://miaoquai.com"
})

// 在新标签页打开
browser({
  action: "open",
  url: "https://clawhub.ai",
  label: "ClawHub"
})

2. 获取页面快照

// 获取页面结构（AI可读格式）
browser({
  action: "snapshot",
  refs: "aria"  // 使用aria-ref格式，更稳定
})

// 返回页面元素树，包含可交互元素的引用ID

3. 截图

// 全页面截图
browser({
  action: "screenshot",
  fullPage: true
})

// 指定区域截图
browser({
  action: "screenshot",
  selector: ".main-content"
})

交互操作

点击元素

// 通过ref点击（从snapshot获取）
browser({
  action: "act",
  kind: "click",
  ref: "e12"  // snapshot返回的元素引用
})

// 通过坐标点击
browser({
  action: "act",
  kind: "clickCoords",
  x: 500,
  y: 300
})

填写表单

// 填写输入框
browser({
  action: "act",
  kind: "fill",
  ref: "e15",
  text: "OpenClaw教程"
})

// 选择下拉框
browser({
  action: "act",
  kind: "select",
  ref: "e18",
  values: ["选项1"]
})

// 按键操作
browser({
  action: "act",
  kind: "press",
  key: "Enter"
})

悬停和拖拽

// 悬停
browser({
  action: "act",
  kind: "hover",
  ref: "e20"
})

// 拖拽
browser({
  action: "act",
  kind: "drag",
  startRef: "e20",
  endRef: "e25"
})

高级操作

执行JavaScript

// 在页面中执行JS
browser({
  action: "console",
  fn: "document.title"
})

// 获取页面数据
browser({
  action: "console",
  fn: "JSON.stringify(Array.from(document.querySelectorAll('h2')).map(h => h.textContent))"
})

多标签页管理

// 列出所有标签页
browser({ action: "tabs" })

// 切换标签页
browser({
  action: "focus",
  label: "ClawHub"
})

// 关闭标签页
browser({
  action: "close",
  label: "ClawHub"
})

等待页面加载

// 等待特定元素出现
browser({
  action: "act",
  kind: "wait",
  selector: ".results-loaded",
  timeoutMs: 10000
})

实战案例

案例1: 竞品价格监控

// 1. 打开竞品网站
browser({ action: "open", url: "https://competitor.com/pricing" })

// 2. 获取快照
const snapshot = browser({ action: "snapshot" })

// 3. 提取价格数据
const prices = browser({
  action: "console",
  fn: "JSON.stringify(Array.from(document.querySelectorAll('.price')).map(p => p.textContent))"
})

// 4. 截图存证
browser({ action: "screenshot", fullPage: true })

// 5. 记录到数据库或Bitable

案例2: 自动化表单提交

// 1. 打开表单页面
browser({ action: "open", url: "https://example.com/form" })

// 2. 填写各个字段
browser({ action: "act", kind: "fill", ref: "e10", text: "妙趣AI" })
browser({ action: "act", kind: "fill", ref: "e12", text: "hello@miaoquai.com" })
browser({ action: "act", kind: "fill", ref: "e14", text: "AI工具导航平台" })

// 3. 选择下拉选项
browser({ action: "act", kind: "select", ref: "e16", values: ["技术类"] })

// 4. 提交表单
browser({ action: "act", kind: "click", ref: "e20" })  // 提交按钮

案例3: 批量数据抓取

// 循环抓取多个页面
const urls = [
  "https://example.com/page1",
  "https://example.com/page2",
  "https://example.com/page3"
]

for (const url of urls) {
  browser({ action: "navigate", url })
  const data = browser({
    action: "console",
    fn: "JSON.stringify(extractPageData())"
  })
  // 保存数据...
}

Profile配置

// 使用已登录的浏览器（保留cookies）
browser({
  action: "open",
  url: "https://example.com",
  profile: "user"  // 使用用户浏览器
})

// 使用隔离浏览器（默认）
browser({
  action: "open",
  url: "https://example.com"
  // 不指定profile，使用openclaw默认浏览器
})

Camofox引擎特性

• 反检测：自动绕过常见的机器人检测机制
• 智能等待：自动等待页面加载完成
• 元素定位：aria-ref稳定引用，不受页面变化影响
• 多浏览器：支持Chromium、Firefox、WebKit
• 并行操作：多个标签页同时操作

常见问题

Q: 元素找不到怎么办？

先用snapshot获取页面结构，确认元素的ref或selector。如果页面是动态加载的，使用wait等待元素出现。

Q: 被网站检测为机器人？

使用Camofox引擎的反检测功能，或者使用profile="user"模式。避免操作过快，加入适当的延迟。

Q: 如何处理验证码？

目前OpenClaw不支持自动验证码识别。建议使用profile="user"模式，在人工登录后再交给Agent操作。