🌐 OpenClaw 浏览器自动化高级教程

从页面抓取到复杂交互 — 让AI Agent像人一样操作浏览器

📋 目录

🔍 浏览器工具全景

OpenClaw的browser工具支持以下核心操作：

🚀 基础操作

启动并打开页面

// 1. 检查浏览器状态
browser({ action: "status" })

// 2. 启动浏览器（如果未运行）
browser({ action: "start" })

// 3. 打开目标页面
browser({
  action: "open",
  url: "https://miaoquai.com/tools/"
})

获取页面快照

// snapshot 是最重要的操作 — 获取页面的结构化表示
browser({
  action: "snapshot",
  refs: "aria"    // 使用aria-ref，更稳定
})

// 返回类似：
// - heading "OpenClaw工具指南" [ref=e1]
// - link "Skills教程" [ref=e2]
// - button "搜索" [ref=e3]
// - textbox [ref=e4]

🎯 交互操作

点击元素

// 通过ref点击
browser({
  action: "act",
  kind: "click",
  ref: "e3"     // 从snapshot获取的ref
})

// 通过文本内容点击
browser({
  action: "act",
  kind: "click",
  text: "Skills教程"
})

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

输入文本

// 在输入框中输入
browser({
  action: "act",
  kind: "fill",
  ref: "e4",
  text: "OpenClaw教程"
})

// 模拟逐字输入（更像人类）
browser({
  action: "act",
  kind: "type",
  ref: "e4",
  text: "OpenClaw教程",
  slowly: true,
  delayMs: 50    // 每个字符间隔50ms
})

选择下拉框

browser({
  action: "act",
  kind: "select",
  ref: "e10",
  values: ["选项1"]    // 可以多选
})

键盘操作

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

// 组合键 Ctrl+A
browser({
  action: "act",
  kind: "press",
  key: "a",
  modifiers: ["Control"]
})

悬停

browser({
  action: "act",
  kind: "hover",
  ref: "e7"
})

📸 捕获操作

截图

// 可视区域截图
browser({
  action: "screenshot",
  type: "png"       // png或jpeg
})

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

// 特定元素截图
browser({
  action: "screenshot",
  selector: "#main-content",
  type: "png"
})

导出PDF

browser({
  action: "pdf"
})

获取控制台日志

browser({
  action: "console",
  level: "error"    // 只获取错误级别
})

🔧 高级技巧

多标签页管理

// 查看所有标签页
browser({ action: "tabs" })

// 打开新标签页
browser({
  action: "open",
  url: "https://example.com",
  label: "example"      // 给标签页命名
})

// 切换标签页
browser({
  action: "focus",
  targetId: "t1"        // 标签页ID
})

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

iframe操作

// 在iframe中操作
browser({
  action: "snapshot",
  frame: "iframe[name='content-frame']"
})

browser({
  action: "act",
  kind: "click",
  ref: "e15",
  frame: "iframe[name='content-frame']"
})

拖拽操作

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

调整窗口大小

browser({
  action: "act",
  kind: "resize",
  width: 1920,
  height: 1080
})

等待特定状态

// 等待页面加载完成
browser({
  action: "act",
  kind: "wait",
  loadState: "networkidle"    // 网络空闲
})

🔥 实战案例

案例一：自动搜索并提取结果

// 完整的搜索流程
// 1. 打开搜索引擎
browser({ action: "open", url: "https://www.google.com" })

// 2. 获取页面结构
browser({ action: "snapshot", refs: "aria" })
// → textbox [ref=e1] "搜索"
// → button [ref=e2] "Google搜索"

// 3. 输入搜索词
browser({ action: "act", kind: "fill", ref: "e1", text: "OpenClaw skills tutorial 2026" })

// 4. 点击搜索
browser({ action: "act", kind: "click", ref: "e2" })

// 5. 等待结果加载
browser({ action: "act", kind: "wait", loadState: "networkidle" })

// 6. 提取搜索结果
browser({ action: "snapshot", refs: "aria" })

案例二：表单自动填写

// 自动填写注册表单
browser({ action: "open", url: "https://example.com/register" })
browser({ action: "snapshot", refs: "aria" })

// 填写各个字段
browser({ action: "act", kind: "fill", ref: "e1", text: "张三" })
browser({ action: "act", kind: "fill", ref: "e2", text: "zhangsan@example.com" })
browser({ action: "act", kind: "fill", ref: "e3", text: "SecureP@ss123" })
browser({ action: "act", kind: "select", ref: "e4", values: ["开发者"] })
browser({ action: "act", kind: "click", ref: "e5" })  // 同意条款
browser({ action: "act", kind: "click", ref: "e6" })  // 提交

// 截图保存结果
browser({ action: "screenshot", type: "png" })

案例三：批量截图监控

// 监控多个页面的视觉变化
const urls = [
  "https://miaoquai.com",
  "https://miaoquai.com/tools/",
  "https://miaoquai.com/news/"
]

urls.forEach((url, i) => {
  browser({ action: "navigate", url: url })
  browser({ action: "act", kind: "wait", loadState: "networkidle" })
  browser({
    action: "screenshot",
    fullPage: true,
    type: "png"
  })
})

🔧 常见问题排查