OpenClaw 浏览器自动化指南

💻 实战示例

示例 1: 自动登录网站

// 场景：自动登录某网站

// 1. 打开登录页
browser({ action: "open", url: "https://example.com/login" });

// 2. 获取快照，识别输入框和按钮
// 返回结果示例：
// - Input 'username' [ref=i3]
// - Input 'password' [ref=i5]  
// - Button 'Login' [ref=b8]

// 3. 输入用户名
browser({
  action: "act",
  kind: "type",
  ref: "i3",
  text: "my-username"
});

// 4. 输入密码
browser({
  action: "act",
  kind: "type",
  ref: "i5",
  text: "my-password"
});

// 5. 点击登录按钮
browser({
  action: "act",
  kind: "click",
  ref: "b8"
});

// 6. 等待页面加载并截图验证
browser({
  action: "screenshot",
  fullPage: true
});

示例 2: 自动填写表单

// 场景：自动填写注册表单

browser({ action: "open", url: "https://example.com/register" });

// 获取快照识别表单元素
const snapshot = browser({ action: "snapshot" });

// 依次填写各字段
// 姓名
browser({ action: "act", kind: "type", ref: "name-input", text: "张三" });

// 邮箱
browser({ action: "act", kind: "type", ref: "email-input", text: "zhangsan@example.com" });

// 选择下拉框
browser({
  action: "act",
  kind: "select",
  ref: "country-select",
  values: ["China"]
});

// 勾选复选框
browser({
  action: "act",
  kind: "click",
  ref: "agree-checkbox"
});

// 提交表单
browser({
  action: "act",
  kind: "click",
  ref: "submit-btn"
});

示例 3: 网页内容抓取

// 场景：抓取某网站文章列表

// 1. 打开目标页面
browser({ action: "open", url: "https://news.example.com" });

// 2. 使用 evaluate 提取数据
const articles = browser({
  action: "act",
  kind: "evaluate",
  fn: `() => {
    const items = document.querySelectorAll('.article-item');
    return Array.from(items).map(item => ({
      title: item.querySelector('.title').textContent,
      link: item.querySelector('a').href,
      summary: item.querySelector('.summary').textContent
    }));
  }`
});

// 3. 翻页获取更多内容
browser({
  action: "act",
  kind: "click",
  ref: "next-page-btn"
});

// 4. 等待加载
browser({
  action: "act",
  kind: "wait",
  timeMs: 2000
});

// 5. 继续提取...

示例 4: 截图保存证据

// 场景：自动化测试后截图留证

// 全页面截图
browser({
  action: "screenshot",
  fullPage: true,
  outputFormat: "png",
  filePath: "/var/www/miaoquai/screenshots/test-result.png"
});

// 指定区域截图
browser({
  action: "screenshot",
  ref: "error-message",  // 仅截图特定元素
  width: 800,
  height: 600
});

示例 5: 多标签页操作

// 场景：需要同时操作多个页面

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

// 打开新页面
browser({
  action: "open",
  url: "https://example.com/page2",
  target: "new-tab"
});

// 切换标签页
browser({
  action: "focus",
  targetId: "tab-2"
});

// 关闭标签页
browser({
  action: "close",
  targetId: "tab-2"
});