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

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

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

**场景**：有一张 Excel 表格，里面有 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_editor` 读取 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 channel '#general'.
6. Upload 'cover.jpg' and paste the content of 'briefing.md'.
```

### 关键挑战与解决

* **上下文切换 (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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yeasy.gitbook.io/claude_guide/di-er-bu-fen-gong-ju-pian/05_computer_use/5.4_practical.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.