26. Computer Use（屏幕操作）
Computer Use 让 Claude Code 能够"看到"你的屏幕并操控鼠标和键盘，就像一个远程桌面助手。
🎯 什么是 Computer Use？
核心概念
传统 Claude Code：
你: "帮我测试这个网页的登录功能"
Claude: "我无法看到浏览器，请你手动截图..."
Computer Use：
你: "帮我测试这个网页的登录功能"
Claude: [看到屏幕]
→ 移动鼠标到用户名输入框
→ 输入测试账号
→ 点击登录按钮
→ 检查是否跳转到首页
→ 报告测试结果为什么需要 Computer Use？
场景 1：测试 Web 应用 UI
你有一个前端项目，需要测试：
- 按钮点击是否正常
- 表单验证是否工作
- 页面布局是否正确
- 响应式设计是否适配
传统方式：手动截图 + 文字描述
Computer Use：直接操作浏览器，实时反馈场景 2：操作无 API 的桌面软件
某些老旧软件或专用工具没有 API：
- Figma 原型验证
- 本地数据库管理工具
- 企业内部管理系统
Computer Use：像人类一样操作 GUI场景 3：自动化 GUI 操作
重复性的 GUI 操作：
- 批量处理图片（Photoshop）
- 填报表单
- 跨应用数据迁移
Computer Use：自动化这些繁琐操作场景 4：调试 Chrome 扩展
扩展运行在浏览器中，难以用常规方式测试：
- Popup 界面交互
- Content Script 注入
- 右键菜单触发
Computer Use：直接在浏览器中操作和验证🚀 使用方式
零配置启用
Computer Use 无需额外安装或配置，直接使用即可：
你: 请打开浏览器访问 http://localhost:3000，测试登录功能
Claude:
→ 启动 Computer Use
→ 识别当前屏幕状态
→ 打开浏览器
→ 访问 localhost:3000
→ [操作界面...]
→ 完成测试基本操作
Claude Code 通过 Computer Use 可以执行以下操作：
| 操作 | 说明 |
|---|---|
| 🖱️ 鼠标移动 | 移动鼠标到指定位置 |
| 🖱️ 鼠标点击 | 单击、双击、右键点击 |
| ⌨️ 键盘输入 | 输入文字、快捷键 |
| 📸 屏幕截图 | 捕获当前屏幕状态 |
| 🔄 滚动 | 上下滚动页面 |
💻 实战场景
场景 1：Web 应用端到端测试
你: 访问 http://localhost:3000，完成以下测试流程：
1. 注册一个新用户
2. 登录
3. 创建一个新项目
4. 编辑项目设置
5. 删除项目
Claude:
🧪 端到端测试流程
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[步骤 1] 注册新用户
→ 访问 http://localhost:3000/register
→ 找到用户名输入框
→ 输入：test_user_001
→ 找到邮箱输入框
→ 输入：test@example.com
→ 找到密码输入框
→ 输入：Test@12345
→ 点击"注册"按钮
✓ 注册成功，跳转到登录页
[步骤 2] 登录
→ 输入邮箱：test@example.com
→ 输入密码：Test@12345
→ 点击"登录"按钮
✓ 登录成功，跳转到首页
[步骤 3] 创建新项目
→ 点击"新建项目"按钮
→ 输入项目名称：Test Project
→ 选择项目类型：Web
→ 点击"创建"按钮
✓ 项目创建成功
[步骤 4] 编辑项目设置
→ 进入项目设置页面
→ 修改项目描述
→ 更改可见性为"私有"
→ 保存设置
✓ 设置更新成功
[步骤 5] 删除项目
→ 进入项目管理页面
→ 找到 Test Project
→ 点击删除按钮
→ 确认删除对话框
✓ 项目删除成功
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ 所有测试步骤通过！场景 2：调试前端布局问题
你: 打开 Chrome 访问 localhost:3000/dashboard，检查这个仪表盘页面
在不同分辨率下的布局是否正常
Claude:
📊 布局测试
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[1920x1080 桌面视图]
→ 调整浏览器窗口到 1920x1080
→ 截图分析布局
✓ 侧边栏正常显示
✓ 内容区域自适应
⚠️ 图表在小屏幕上被截断
[1366x768 笔记本视图]
→ 调整浏览器窗口到 1366x768
✓ 侧边栏折叠为图标模式
✓ 内容区域正常
⚠️ 底部导航被遮挡
[768x1024 平板视图]
→ 调整浏览器窗口到 768x1024
✓ 切换到移动端布局
✓ 导航变为汉堡菜单
✓ 内容单列显示
[375x812 手机视图]
→ 调整浏览器窗口到 375x812
⚠️ 模态框超出屏幕
❌ 某些按钮无法点击
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
发现的问题：
1. 🟡 1920px 下图表被截断
2. 🟡 1366px 下底部导航被遮挡
3. ❌ 375px 下模态框超出屏幕
建议的修复方案：
1. 为图表容器添加 max-width 和 overflow-auto
2. 调整底部导航的 z-index 和定位
3. 移动端模态框使用全屏模式场景 3：与 Voice Mode 结合
你（语音）: "帮我打开浏览器，搜索 Claude Code 教程，
找到 GitHub 仓库链接，复制到剪贴板"
Claude [Computer Use]:
→ 打开浏览器
→ 访问搜索引擎
→ 输入搜索关键词
→ 找到 GitHub 仓库链接
→ 复制到剪贴板
Claude: 已完成！GitHub 链接已复制到剪贴板。💡 Voice Mode + Computer Use = 语音指挥屏幕操作
- 语音说需求 → Computer Use 执行操作
- 特别适合双手不方便的场景
- 自然语言驱动 GUI 操作
⚠️ 当前限制
已知限制
| 限制 | 说明 | 应对策略 |
|---|---|---|
| 🐢 速度慢 | 每个操作需要"看-想-做"循环 | 适合耐心测试，不适合时间敏感场景 |
| 🎯 精细操作不靠谱 | 小按钮、密集 UI 可能误操作 | 尽量放大窗口，简化测试流程 |
| 👁️ 视觉识别偏差 | 复杂 UI 可能误识别元素 | 提供清晰的截图和描述 |
| 🔄 状态同步延迟 | 页面变化后需要重新截图 | 操作后等待页面稳定 |
不适合的场景
- ❌ 需要高速操作的任务
- ❌ 精确到像素级的 UI 操作
- ❌ 需要 100% 准确率的关键流程
- ❌ 长时间连续操作（可能累积误差）
🎓 最佳实践
✅ DO - 应该做的
当成耐心但手速慢的测试员
Claude: "我发现登录按钮可以点击，但动画效果 似乎有延迟..." → 善于发现 UI 问题 → 但操作速度不如人类给明确的操作指令
✅ "点击页面上方蓝色导航栏中的'设置'按钮" ❌ "去设置里面改一下"分步骤执行复杂任务
✅ 分步骤描述操作流程 ✅ 每步完成后确认配合截图使用
先让 Claude 看到当前状态 再给出下一步操作指令用于探索性测试
让 Claude 自由探索应用 发现你意想不到的 UI 问题
❌ DON'T - 避免做的
❌ 期望精确的像素级操作
不要要求 Claude 精确拖拽到某个像素位置❌ 用于生产环境的关键操作
Computer Use 可能误操作 不要在真实生产数据上使用❌ 时间敏感的自动化
Computer Use 速度较慢 不适合需要快速响应的场景❌ 复杂的多级菜单导航
深层嵌套的菜单容易迷失 尽量使用快捷键或 URL 导航
🔄 Computer Use vs 其他方案
| 方案 | 适用场景 | 优势 | 劣势 |
|---|---|---|---|
| Computer Use | GUI 测试、无 API 的应用 | 零配置、通用性强 | 速度慢、不够精确 |
| Playwright/Puppeteer | Web 自动化测试 | 快速、精确、可编程 | 需要 API 支持 |
| MCP 工具 | 有 API 的工具 | 高效、可靠 | 需要开发 MCP Server |
| 手动操作 | 一次性、不可预测的场景 | 最灵活 | 耗时、不可重复 |
💡 使用技巧
技巧 1：先截图再操作
你: 先截图看一下当前屏幕状态
Claude: [截图]
当前屏幕显示：
- VS Code 编辑器打开在前台
- 终端在底部面板
- Chrome 浏览器在后台
你: 好的，现在打开 Chrome 访问 localhost:3000技巧 2：简化界面
操作前：
- 关闭不必要的窗口
- 放大目标区域
- 隐藏无关的 UI 元素
这样 Claude 可以更准确地识别目标技巧 3：提供备选方案
你: 点击"提交"按钮。如果找不到按钮，
尝试按 Ctrl+Enter 提交表单
Claude: [尝试点击按钮]
→ 找到了"提交"按钮，点击成功📚 下一步
了解 Computer Use 后，继续学习 27. Voice Mode（语音模式）
🔗 相关资源
💡 API 推荐：https://apipro.maynor1024.live/ - 一站式接入各种AI服务，注册即送0.2刀