> For the complete documentation index, see [llms.txt](https://yeasy.gitbook.io/claude_guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yeasy.gitbook.io/claude_guide/di-er-bu-fen-gong-ju-pian/05_computer_use/5.4_practical.md).

# 5.4 实战：桌面自动化案例

本节将把 Computer Use 投入到真实的（模拟）工作中。 下面通过三个不同难度的案例，展示从简单的网页任务到复杂的跨应用工作流。

所有示例默认在隔离容器、测试账号、非生产数据和可回滚环境中运行。涉及提交、上传、发送、购买、接受条款或影响真实用户的动作时，必须先生成草稿或预览，并由人类确认后再执行。

## 5.4.1 案例一：智能填表员

**场景**：有一份从 Excel 导出的测试客户表（customers.csv），里面有 10 个虚构客户的姓名和地址。需要把它们一个个复制粘贴到一个老旧的 CRM 测试环境网页表单里，并在人工确认后点击“提交”。

**难点**：CRM 系统没有 API，且 input 框的 `id` 是随机生成的，无法用传统爬虫。

### Agent 代码逻辑

```python
task = """
1. 打开桌面的 'customers.csv' 文件。
2. 打开 Firefox 浏览器，访问 'http://internal-crm.local'。
3. 对于 CSV 中的每一行：
    a. 此刻在 CRM 页面上找到 'Name' 框，输入姓名。
    b. 找到 'Address' 框，输入地址。
    c. 点击 'Submit' 按钮。
    d. 等待 'Success' 弹窗出现，点击 'OK'。
"""
run_agent(task)
```

### Claude 的执行流

1. **Read**: 调用 `str_replace_based_edit_tool` 读取 CSV 内容。
2. **Open**: 点击 Firefox 图标，输入 URL。
3. **Loop**:
   * Claude 会看着屏幕：“如果你能看到 'Name' 旁边那个白框，那就是输入框。”
   * 它不需要知道 DOM 结构，它像人一样认出了输入框。
   * 它输入数据，点击提交。
   * 它会等待屏幕变化（Visual Feedback 视觉反馈），确认弹窗出现后再进行下一条。

## 5.4.2 案例二：视觉自动化测试

**场景**：作为前端开发人员，想测试在不同分辨率下，网站的导航栏是否会重叠错位。

**难点**：传统的单元测试测不出来 CSS 的视觉 Bug。

### Agent 代码逻辑

```python
task = """
1. 打开我们的测试网站 staging.example.com。
2. 将浏览器窗口大小调整为 1920x1080。
    - 检查截图：导航栏的 'Login' 按钮是否被遮挡？
3. 将窗口调整为 375x812 (手机模式)。
    - 检查截图：汉堡菜单是否出现？
    - 点击汉堡菜单，确认侧边栏能否滑出。
4. 如果任何一步看起来不对劲，请把错误描述写在 'report.md' 里。
"""
```

### Claude 的执行流

这里 Claude 扮演了 QA 的角色。它不仅仅是在操作，更是在 **判断**。

* “Wait, at 375px width, the logo implies overlapping with the menu icon.” -> 记录 Bug。
* 这就是 Computer Use 的核心优势：**Semantic Understanding of UI (UI 的语义理解)**。

## 5.4.3 案例三：跨应用综合任务

**场景**：每日早报生成。需要从网上搜集今天的科技新闻，整理成摘要，配上一张图，然后发到 Slack 群里。

**涉及应用**：Chrome (搜索), VS Code (写摘要), Files (存图片), Slack (发送)。

### 任务描述

```
Task: Prepare the Daily Tech Briefing.
1. Search Google for 'top AI news today'.
2. Open 3 interesting articles in new tabs.
3. Summarize them into a markdown file 'briefing.md' on Desktop.
4. Find a relevant image from Google Images, save as 'cover.jpg'.
5. Open Slack, find a private test channel.
6. Upload 'cover.jpg' and paste the content of 'briefing.md' as a draft.
7. Ask for human approval before sending.
```

### 关键挑战与解决

* **上下文切换 (Context Switching)**: Claude 需要在浏览器和编辑器之间来回切换 (`Alt+Tab`)。它需要记住“我刚才在浏览器里看到了什么”，然后去编辑器里写下来。
* **文件路径**: 在上传图片时，Slack 的文件选择器是系统的原生窗口。Claude 需要能操作 Linux 的文件选择对话框（“Click User -> Desktop -> cover.jpg”）。这对传统自动化脚本来说是噩梦，但对 Claude 来说只是又一个 UI 界面而已。

## 5.4.4 提升成功率的技巧

在实战中，会发现 Claude 经常犯傻。比如盯着加载中的页面发呆，或者点不中那个微小的关闭按钮。

### 显式等待

告诉 Agent：“点击后，请等待页面完全加载，直到你看到某某标志出现，再进行下一步。”

### 键盘优于鼠标

* **Mouse**: `move(500, 300)` -> `click()`。容易受分辨率影响，容易点偏。
* **Keyboard**: `key('Super_L')` （打开开始菜单） -> `type('Chrome')` -> `key('Return')`。
* **Rule (原则)**: 能用快捷键（`Ctrl+C`, `Ctrl+V`, `Ctrl+T`）解决的，绝对不要用鼠标点。

### 错误恢复

让 Agent 具备韧性。 “由于网络波动，如果你点击提交后 10 秒没反应，先检查当前记录状态、页面提示和幂等键；只有确认未提交且获得人工许可后，才允许重新提交。”

***

Computer Use 虽好，但并非万能。目前它还处于 Beta 阶段，有着明显的局限性。我们需要了解这些边界，才能避坑。

➡️ [最佳实践与局限性](/claude_guide/di-er-bu-fen-gong-ju-pian/05_computer_use/5.5_best_practices.md)