🖥️ OpenClaw Computer Use 教程

🎬 开篇：当AI学会了"动手"

凌晨3点47分，我盯着屏幕上那个反复弹出的对话框，突然意识到——AI终于学会了"动手"。

不是那种只会聊天、写代码的AI，而是能真正操作你电脑的AI。点按钮、填表单、拖文件、截图识别……就像有个看不见的小人坐在你椅子上，替你把那些重复到想吐的操作全部自动化。

这就是 OpenClaw Computer Use——让AI Agent获得"眼睛"和"手"，直接操控桌面GUI的革命性能力。2026年，这已经不是科幻，而是每个OpenClaw用户都能用的标配技能。

📖 什么是 OpenClaw Computer Use？

Computer Use 是OpenClaw的一项核心能力，让AI Agent能够像人类一样操作电脑界面：

• 视觉感知：通过截图理解屏幕内容，识别按钮、文本框、菜单等UI元素
• 鼠标操作：点击、双击、右键、拖拽、滚动
• 键盘输入：打字、快捷键、组合键
• 应用控制：打开/关闭应用、切换窗口、多任务协作

🚀 快速开始：5分钟上手

1. 环境准备

Computer Use 需要 OpenClaw 的 browser 工具支持（基于Playwright），确保你已安装：

# 检查 OpenClaw 版本（需要 v2026.4+）
openclaw --version

# 确保 browser 工具可用
openclaw tools list | grep browser

2. 第一个 Computer Use Skill

创建一个自动打开浏览器并搜索的Skill：

// skills/computer-use-demo/openclaw.json
{
  "name": "computer-use-demo",
  "version": "1.0.0",
  "description": "演示Computer Use能力：自动搜索并截图",
  "runtime": "node",
  "main": "index.js",
  "permissions": ["browser"]
}

// skills/computer-use-demo/index.js
const { browser } = require('@openclaw/tools');

async function demo() {
  // 1. 打开浏览器
  await browser.action({ action: 'start', profile: 'openclaw' });
  
  // 2. 导航到Google
  await browser.action({ 
    action: 'open', 
    url: 'https://google.com' 
  });
  
  // 3. 等待页面加载
  await browser.action({ 
    action: 'act', 
    request: { kind: 'wait', loadState: 'networkidle' } 
  });
  
  // 4. 获取页面快照（AI"看"屏幕）
  const snapshot = await browser.action({ 
    action: 'snapshot',
    refs: 'aria'
  });
  
  console.log('页面结构:', snapshot);
  
  // 5. 在搜索框输入内容
  await browser.action({
    action: 'act',
    request: {
      kind: 'type',
      ref: 'e1', // 从snapshot获取的搜索框引用
      text: 'OpenClaw AI Agent'
    }
  });
  
  // 6. 按Enter搜索
  await browser.action({
    action: 'act',
    request: { kind: 'press', key: 'Enter' }
  });
  
  // 7. 截图保存结果
  await browser.action({
    action: 'screenshot',
    fullPage: false
  });
  
  console.log('✅ Computer Use 演示完成！');
}

demo();

🛠️ 核心功能详解

屏幕快照（Snapshot）

Computer Use 的"眼睛"——通过快照获取页面结构：

// 获取页面可访问性树（推荐，稳定）
const snapshot = await browser.action({
  action: 'snapshot',
  refs: 'aria',  // 使用Playwright的aria引用
  compact: true
});

// snapshot 返回结构化的页面元素
// 每个元素有 ref（如 e1, e2）、role、name 等属性
// AI 可以根据这些属性定位并操作元素

元素操作（Act）

Computer Use 的"手"——对页面元素执行操作：

// 点击按钮
await browser.action({
  action: 'act',
  request: {
    kind: 'click',
    ref: 'e5'  // 按钮的aria引用
  }
});

// 填写表单
await browser.action({
  action: 'act',
  request: {
    kind: 'fill',
    ref: 'e3',
    text: 'user@example.com'
  }
});

// 下拉选择
await browser.action({
  action: 'act',
  request: {
    kind: 'select',
    ref: 'e7',
    values: ['option-2']
  }
});

// 拖拽
await browser.action({
  action: 'act',
  request: {
    kind: 'drag',
    startRef: 'e1',
    endRef: 'e2'
  }
});

截图与视觉验证

// 全页截图
const screenshot = await browser.action({
  action: 'screenshot',
  fullPage: true,
  type: 'png'
});

// 区域截图（指定坐标）
const regionShot = await browser.action({
  action: 'screenshot',
  fullPage: false,
  // 可以配合坐标裁剪
});

📋 实战场景：RPA自动化

场景1：自动填写表单

async function autoFillForm() {
  await browser.action({ action: 'open', url: 'https://example.com/form' });
  
  // 等待表单加载
  await browser.action({ 
    action: 'act', 
    request: { kind: 'wait', loadState: 'domcontentloaded' } 
  });
  
  const snapshot = await browser.action({ action: 'snapshot', refs: 'aria' });
  
  // 假设 snapshot 识别出：
  // e1: 姓名输入框
  // e2: 邮箱输入框
  // e3: 提交按钮
  
  await browser.action({
    action: 'act',
    request: { kind: 'type', ref: 'e1', text: '张三' }
  });
  
  await browser.action({
    action: 'act',
    request: { kind: 'type', ref: 'e2', text: 'zhangsan@example.com' }
  });
  
  await browser.action({
    action: 'act',
    request: { kind: 'click', ref: 'e3' }
  });
  
  console.log('✅ 表单自动填写完成');
}

场景2：数据抓取

async function scrapeData() {
  await browser.action({ action: 'open', url: 'https://news.ycombinator.com' });
  
  const snapshot = await browser.action({ 
    action: 'snapshot', 
    refs: 'aria' 
  });
  
  // 解析snapshot，提取标题和链接
  const items = [];
  // ... 解析逻辑（实际中可以用AI来解析snapshot）
  
  // 或者直接用evaluate执行JS
  const data = await browser.action({
    action: 'act',
    request: {
      kind: 'evaluate',
      expression: `
        Array.from(document.querySelectorAll('.titleline > a')).map(a => ({
          title: a.textContent,
          url: a.href
        }))
      `
    }
  });
  
  console.log('抓取到的数据:', data);
}

场景3：跨应用工作流

async function crossAppWorkflow() {
  // 1. 打开Excel（通过系统命令）
  await exec.command('start excel.exe');
  
  // 2. 等待Excel启动
  await new Promise(r => setTimeout(r, 3000));
  
  // 3. 使用Computer Use操作Excel界面
  // （需要桌面自动化，这里简化为browser示例）
  
  // 4. 打开浏览器获取最新数据
  await browser.action({ action: 'open', url: 'https://api.example.com/data' });
  
  // 5. 将数据复制到Excel
  // ... 自动化操作
  
  console.log('✅ 跨应用工作流完成');
}

✅ 最佳实践

1. 使用 aria refs 而非 CSS selector：aria引用更稳定，页面结构变化后仍然有效
2. 等待策略要合理：优先用 waitForSelector 或 loadState，避免硬编码 setTimeout
3. 异常处理：元素找不到时要有重试逻辑
4. 截图调试：关键步骤截图保存，方便排查问题
5. 权限最小化：只在Skill的 openclaw.json 中申请必要的权限

⚠️ 常见问题与解决

Q1: 元素 ref 找不到怎么办？

先用 snapshot 获取最新页面结构，ref可能会变化。可以在操作前重新snapshot。

Q2: 页面加载慢导致超时？

增加等待时间或使用更智能的等待策略：

// 等待特定元素出现
await browser.action({
  action: 'act',
  request: {
    kind: 'wait',
    selector: '.target-element',
    timeoutMs: 10000
  }
});

Q3: 如何处理验证码？

Computer Use 目前无法自动处理复杂验证码。建议：1) 使用测试环境关闭验证码；2) 人工介入；3) 使用验证码识别服务（需额外集成）。

Q4: 多标签页如何管理？

// 列出所有标签页
const tabs = await browser.action({ action: 'tabs' });

// 切换到特定标签页
await browser.action({
  action: 'focus',
  targetId: tabs[1].id
});

// 关闭标签页
await browser.action({
  action: 'close',
  targetId: tabs[2].id
});

🔗 相关资源

🎭 结语：AI的"手"才刚刚伸出

世界上有一种AI叫Computer Use，它不像ChatGPT只会"说"，也不像Midjourney只会"画"——它会"动"。

3分37秒，我看着AI自动填完第47个表单，突然明白：RPA的终局不是"录制宏"，而是让AI真正理解界面、理解任务、理解"为什么要这么做"。

OpenClaw Computer Use，就是这一步的起点。

—— 妙趣AI · 让AI学会"动手"