🌐 OpenClaw 浏览器自动化实战教程

📌 为什么需要浏览器自动化？

有些网站没有API，只有网页界面。这时候就需要浏览器自动化——让AI Agent像人一样操作浏览器，完成数据采集、表单填写、页面交互等任务。

浏览器自动化场景

🚀 快速开始

1. 创建浏览器标签页

// 创建新标签页并打开网页
const tab = await camofox_create_tab({
  url: "https://example.com"
});
// 返回 tabId: "t1"

2. 获取页面快照

// 获取页面可访问性快照（推荐）
const snapshot = await camofox_snapshot({
  tabId: "t1"
});
// 返回元素引用列表，如 e1, e2, e3...

3. 交互操作

// 点击元素
await camofox_click({ tabId: "t1", ref: "e5" });

// 输入文本
await camofox_type({ 
  tabId: "t1", 
  ref: "e3", 
  text: "搜索关键词" 
});

// 滚动页面
await camofox_scroll({ 
  tabId: "t1", 
  direction: "down", 
  amount: 500 
});

🔧 核心API详解

camofox_snapshot - 页面快照

// 获取页面结构化数据
const result = await camofox_snapshot({
  tabId: "t1",
  offset: 0  // 分页偏移量
});

// 返回格式：
{
  refs: [
    { ref: "e1", role: "heading", name: "标题", level: 1 },
    { ref: "e2", role: "link", name: "链接文字", url: "..." },
    { ref: "e3", role: "textbox", name: "搜索框" }
  ],
  hasMore: false
}

camofox_evaluate - 执行JavaScript

// 在页面上下文中执行JS
const result = await camofox_evaluate({
  tabId: "t1",
  expression: `
    document.querySelectorAll('.product-price')
      .map(el => el.textContent)
  `
});
// 返回价格列表

camofox_navigate - 使用搜索宏

// 使用预设搜索宏
await camofox_navigate({
  tabId: "t1",
  macro: "@google_search",
  query: "OpenClaw tutorial"
});

// 支持的搜索宏：
// @google_search - Google搜索
// @youtube_search - YouTube搜索
// @amazon_search - Amazon搜索
// @reddit_search - Reddit搜索
// @wikipedia_search - Wikipedia搜索

🎯 实战案例：自动采集竞品数据

// 1. 打开竞品网站
const tab = await camofox_create_tab({
  url: "https://competitor.com/pricing"
});

// 2. 等待页面加载
await new Promise(r => setTimeout(r, 2000));

// 3. 获取页面快照
const snapshot = await camofox_snapshot({ tabId: tab.tabId });

// 4. 提取价格数据
const prices = await camofox_evaluate({
  tabId: tab.tabId,
  expression: `
    Array.from(document.querySelectorAll('.plan-price'))
      .map(el => ({
        plan: el.closest('.plan').querySelector('.plan-name').textContent,
        price: el.textContent
      }))
  `
});

// 5. 截图保存证据
await camofox_screenshot({ tabId: tab.tabId });

// 6. 关闭标签页
await camofox_close_tab({ tabId: tab.tabId });

🔗 相关推荐