🌐 OpenClaw 浏览器自动化教程

什么是 OpenClaw Browser？

OpenClaw 的 Browser 工具允许 AI Agent 控制浏览器执行各种 Web 操作：导航页面、截图、点击按钮、填写表单、提取数据等。基于 Playwright 构建，支持 Chromium 内核浏览器。

核心功能

功能	action	说明
页面快照	snapshot	获取页面可访问性树（推荐）
截图	screenshot	截取页面图片
导航	navigate	跳转到指定URL
执行操作	act	点击、输入、选择等交互
打开标签	open	打开新标签页
查看标签	tabs	列出所有标签页
控制台	console	查看浏览器控制台输出
PDF	pdf	将页面导出为PDF

基础用法

1. 打开页面并截图

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

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

2. 获取页面快照（推荐）

// snapshot 返回页面的可访问性树
// 比 screenshot 更高效，且 Agent 可以理解页面结构
browser({
  action: "snapshot",
  refs: "aria"  // 使用 aria-ref 标识元素
})

3. 页面导航

// 导航到新页面
browser({
  action: "navigate",
  url: "https://example.com/search?q=AI+Agent"
})

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

交互操作

点击元素

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

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

输入文本

// 在输入框中输入文本
browser({
  action: "act",
  kind: "type",
  ref: "e15",
  text: "OpenClaw教程"
})

// 填充表单字段
browser({
  action: "act",
  kind: "fill",
  ref: "e15",
  text: "OpenClaw教程"
})

选择下拉框

browser({
  action: "act",
  kind: "select",
  ref: "e20",
  values: ["option2"]
})

键盘操作

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

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

滚动页面

browser({
  action: "act",
  kind: "hover",
  ref: "e30"  // 滚动到该元素
})

实战案例

案例1：搜索并提取结果

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

// 2. 获取页面快照
browser({ action: "snapshot", refs: "aria" })
// → 找到搜索框 ref: "e5", 搜索按钮 ref: "e8"

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

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

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

案例2：网页截图并保存

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

// 全页截图
browser({
  action: "screenshot",
  fullPage: true,
  type: "png"
})
// 截图自动保存到媒体存储

案例3：导出页面为 PDF

browser({ action: "open", url: "https://miaoquai.com/tools/" })

browser({ action: "pdf" })
// PDF 自动保存到媒体存储

浏览器配置

选择浏览器 Profile

// 使用隔离的 OpenClaw 浏览器（默认）
browser({ action: "open", url: "..." })

// 使用用户已登录的浏览器（需要用户在场）
browser({ action: "open", url: "...", profile: "user" })

设置超时

browser({
  action: "act",
  kind: "click",
  ref: "e12",
  timeoutMs: 10000  // 10秒超时
})

最佳实践

• 优先使用 snapshot：比 screenshot 更高效，Agent 可以理解页面结构
• 使用 aria refs：更稳定的元素标识方式
• 避免 act:wait：仅在无法确定页面状态时使用
• 保持标签页管理：使用后关闭不需要的标签页
• 处理弹窗：使用 dialog action 处理 alert/confirm