Claude Code Computer Use：AI 自主控制电脑

什么是 Computer Use

Claude Code 的 Computer Use（计算机使用）功能是一项革命性的能力，让 AI 能够像人类一样操作电脑。它不再仅仅局限于读取代码和执行命令，而是可以控制鼠标、键盘，截图屏幕，操作浏览器和桌面应用程序。

传统的 AI 编程助手需要我们手动执行它给出的命令，但 Computer Use 让 Claude Code 可以自主完成复杂的工作流程：

• 自动打开浏览器并导航到指定网页
• 填写表单、点击按钮
• 截取屏幕内容进行分析
• 执行一系列多步骤操作
• 自动化测试 Web 应用

这项功能基于「截图 → 分析 → 行动」的循环机制，Claude Code 会不断截取屏幕截图，分析当前界面状态，然后决定下一步操作。

---

Computer Use 工作原理

核心工作流程

┌─────────────┐    截图    ┌─────────────┐    分析     ┌─────────────┐
│   电脑屏幕   │ ────────▶ │  Claude AI  │ ──────────▶ │  决定动作   │
└─────────────┘            └─────────────┘             └─────────────┘
       ▲                                                    │
       │                                                    ▼
       │                                            ┌─────────────┐
       └────────────────────────────────────────────│  执行动作   │
                                                      └─────────────┘
                                                               │
                                                               ▼
                                                         ┌─────────────┐
                                                         │ 鼠标/键盘   │
                                                         │   操作      │
                                                         └─────────────┘

可用操作

Claude Code 的 Computer Use 提供以下操作能力：

操作	描述
screenshot	截取当前屏幕或指定区域的截图
mouse_move	移动鼠标到指定坐标
mouse_click	在指定位置点击鼠标
mouse_double_click	双击
mouse_drag	拖拽操作
keypress	模拟键盘按键
type	输入文本
scroll	滚动页面

坐标系统

Computer Use 使用相对坐标系统（0-1 范围），无论屏幕分辨率如何，坐标都能正确定位：

• x: 0.5, y: 0.5 表示屏幕中心
• x: 0, y: 0 表示左上角
• x: 1, y: 1 表示右下角

---

启用 Computer Use

环境配置

首先，我们需要配置 Claude Code 以启用 Computer Use 功能。在项目根目录的 CLAUDE.md 中添加配置：

# 项目配置

## Computer Use
允许 AI 使用计算机控制功能：
- 浏览器自动化
- 桌面应用操作
- 自动化测试

## 安全设置
需要在确认后执行以下操作：
- 支付相关操作
- 敏感数据访问
- 系统级配置更改

通过命令行启用

# 启动 Claude Code 并启用 Computer Use
claude --enableComputerUse

# 或者在对话中启用
> 启用 Computer Use 功能

确认模式

出于安全考虑，某些敏感操作需要用户确认：

⚠️ 即将执行以下操作：
- 在 github.com 填写表单
- 输入内容：example@email.com

是否允许执行？(y/n)

---

实际应用场景

场景一：自动化 Web 测试

我们可以用 Computer Use 编写自动化测试脚本，替代传统的 Selenium 或 Playwright：

// test/automation.ts - Web 自动化测试示例
import { ComputerUse } from '@anthropic-ai/claude-code';

async function runE2ETest() {
  const cu = new ComputerUse();

  // 1. 打开浏览器并导航到测试页面
  await cu.navigate('https://example-app.com/login');

  // 2. 等待页面加载
  await cu.waitForSelector('#username');

  // 3. 填写登录表单
  await cu.type('#username', 'testuser@example.com');
  await cu.type('#password', 'SecurePassword123');

  // 4. 点击登录按钮
  await cu.click('#login-button');

  // 5. 等待跳转并验证
  await cu.waitForSelector('.dashboard');
  const screenshot = await cu.screenshot();

  console.log('登录测试完成');
  return screenshot;
}

场景二：数据抓取

Computer Use 可以帮助我们从那些没有公开 API 的网站抓取数据：

// scrape/product-scraper.ts
async function scrapeProducts() {
  const cu = new ComputerUse();

  // 导航到电商网站
  await cu.navigate('https://shop.example.com/category/electronics');

  const products = [];

  // 遍历多页
  for (let page = 1; page <= 5; page++) {
    // 等待商品列表加载
    await cu.waitForSelector('.product-card');

    // 截图分析当前页面
    const screenshot = await cu.screenshot();

    // 使用 Claude 分析截图内容
    const productsOnPage = await analyzeProductScreenshot(screenshot);
    products.push(...productsOnPage);

    // 点击下一页
    if (page < 5) {
      await cu.click('.pagination .next');
      await cu.wait(1000); // 等待加载
    }
  }

  return products;
}

场景三：表单批量填写

批量处理需要重复填写的表单：

// automation/form-filler.ts
async function fillRegistrationForms(data: UserData[]) {
  const cu = new ComputerUse();

  for (const user of data) {
    // 导航到注册页面
    await cu.navigate('https://app.example.com/register');

    // 填写表单字段
    await cu.type('#firstName', user.firstName);
    await cu.type('#lastName', user.lastName);
    await cu.type('#email', user.email);
    await cu.type('#phone', user.phone);

    // 选择下拉选项
    await cu.select('#country', user.country);
    await cu.select('#plan', user.plan);

    // 同意条款
    await cu.click('#terms-checkbox');

    // 提交表单
    await cu.click('#submit-button');

    // 等待处理
    await cu.waitForSelector('.success-message');

    console.log(`已提交: ${user.email}`);
  }
}

场景四：自动化 UI 验证

在开发过程中自动验证 UI 状态：

// test/visual-regression.ts
async function verifyUIState(expectedState: UIState) {
  const cu = new ComputerUse();

  // 导航到页面
  await cu.navigate(expectedState.url);

  // 等待完整加载
  await cu.waitForLoad();

  // 截取截图
  const screenshot = await cu.screenshot();

  // 分析截图
  const analysis = await analyzeScreenshot(screenshot, expectedState);

  return {
    passed: analysis.matches,
    differences: analysis.differences,
    screenshot: screenshot
  };
}

---

与传统自动化工具对比

特性	Computer Use	Selenium	Playwright	AutoIt
设置难度	低	中	中	高
跨平台	原生支持	需要驱动	需要驱动	仅 Windows
AI 能力	内置	无	无	无
维护成本	低	高	中	高
视觉理解	原生	需额外配置	需额外配置	无
学习曲线	低	中	中	高

优势分析

1. AI 驱动的智能定位：传统的 XPath/CSS 选择器经常因为页面变化而失效，Computer Use 使用视觉分析，可以处理动态变化的界面

2. 无需等待加载：Claude Code 会分析截图自动判断元素是否加载完成，无需手动编写等待逻辑

3. 异常处理：传统自动化脚本遇到意外情况就会失败，Computer Use 可以根据实际情况调整策略

4. 录制与回放：可以通过自然语言描述操作，让 AI 理解意图后执行

---

最佳实践

1. 合理的等待时间

虽然 AI 会自动判断页面是否加载完成，但在页面跳转后适当等待可以提高稳定性：

// 在页面导航后等待
await cu.navigate('https://example.com');
await cu.wait(1500); // 等待页面稳定

// 在点击可能触发跳转的按钮后等待
await cu.click('#submit');
await cu.waitForNavigation();

2. 截图区域优化

只截取相关区域可以提高分析效率和准确性：

// 截取特定区域
const header = await cu.screenshot({
  x: 0,
  y: 0,
  width: 1,
  height: 0.1  // 仅顶部 10%
});

// 截取元素所在区域
const modal = await cu.screenshot({
  selector: '.modal-dialog'
});

3. 状态检查点

在关键步骤后验证状态：

async function clickAndVerify(selector: string, expectedText: string) {
  await cu.click(selector);
  await cu.wait(500);

  const screenshot = await cu.screenshot();
  const hasText = await analyzeText(screenshot, expectedText);

  if (!hasText) {
    throw new Error(`Expected text "${expectedText}" not found`);
  }
}

4. 错误恢复策略

实现自动重试和恢复：

async function robustClick(selector: string, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      await cu.click(selector);
      return;
    } catch (error) {
      console.log(`尝试 ${i + 1}/${maxRetries} 失败，重试中...`);
      await cu.wait(1000);

      // 滚动到元素可见区域
      await cu.scrollTo(selector);
    }
  }
  throw new Error(`无法点击元素: ${selector}`);
}

---

安全考虑

敏感信息保护

Computer Use 可以访问屏幕上的所有内容，我们需要注意：

1. 避免自动输入敏感凭证：让用户手动输入密码
2. 截图包含敏感信息时自动模糊：

// 自动模糊敏感区域
await cu.screenshot({
  blurRegions: [
    { x: 0.8, y: 0.9, width: 0.2, height: 0.1 } // 模糊右下角
  ]
});

3. 限制数据导出：不要自动导出包含个人信息的截图

沙盒环境

对于自动化任务，建议在隔离环境中运行：

// 使用独立的浏览器配置文件
const cu = new ComputerUse({
  profileDir: '/path/to/isolated/profile',
  sandbox: true
});

操作审计

记录所有自动化操作以供审计：

const auditLog = [];

async function auditedClick(selector: string, reason: string) {
  auditLog.push({
    action: 'click',
    selector,
    reason,
    timestamp: new Date().toISOString()
  });

  await cu.click(selector);
}

---

常见问题与解决方案

Q1: 点击位置不准确

问题：元素点击位置偏移

解决方案：

• 检查屏幕缩放设置
• 使用相对坐标而非绝对坐标
• 先截图确认元素位置

Q2: 页面元素找不到

问题：动态加载的元素无法定位

解决方案：

• 增加等待时间
• 使用滚动让元素进入视口
• 使用文本内容定位而非选择器

Q3: 操作太慢

问题：每次截图分析耗时过长

解决方案：

• 减少不必要的截图
• 使用元素截取而非全屏
• 批量操作时关闭截图

Q4: 浏览器兼容性问题

问题：某些浏览器自动化不工作

解决方案：

• 使用支持 CDP 的浏览器（Chrome/Edge）
• 更新浏览器版本
• 检查是否有安全软件阻止

---

总结

Claude Code 的 Computer Use 功能为我们打开了一扇新的大门，让 AI 不再是只能读代码的工具，而是能够像人类一样操作电脑的助手。

它特别适合：

• 自动化重复性 Web 操作
• 端到端测试
• 数据抓取（特别是没有 API 的网站）
• 批量表单处理
• UI 状态验证

虽然它不是银弹，在某些场景下传统的自动化工具可能更合适，但 Computer Use 的智能性和易用性使其成为日常工作中不可或缺的利器。

计算机使用能力不是要取代人类，而是让我们从繁琐的重复工作中解放出来，去做更有创造性的事情。学会善用 AI 的力量，让它成为你工作效率的倍增器！

---

下一步

下一篇文章我们将深入探讨 Claude Code Tool Use，了解如何通过工具调用实现 AI 与外部系统的深度集成，敬请期待！