| ← 返回 Claude Code 最佳实践 |  |
基于广泛的研究，我分析了截图中的两个工具以及第三个主要竞争者。以下是帮助你选择最佳自动化测试工具的详细分析。
- 来源： Google Chrome 团队官方
- 发布时间： 2025 年 9 月公开预览
- 架构： 基于 Chrome DevTools Protocol (CDP) + Puppeteer
- Token 使用： ~19.0k tokens（上下文的 9.5%）
- 工具： 6 个类别共 26 个专业工具
- 来源： Anthropic 官方扩展
- 发布时间： Beta 版，向所有付费计划（Pro、Max、Team、Enterprise）推出
- 架构： 具有 computer-use 功能的浏览器扩展
- Token 使用： ~15.4k tokens（上下文的 7.7%）
- 工具： 16 个工具，包括 computer use 功能
- 来源： Microsoft（官方 + 社区实现）
- 架构： 基于无障碍树（accessibility tree）的自动化
- Token 使用： ~13.7k tokens（上下文的 6.8%）
- 工具： 21 个工具
| 功能 | Chrome DevTools MCP | Claude in Chrome | Playwright MCP |
|---|---|---|---|
| 主要用途 | 调试与性能 | 通用浏览器自动化 | UI 测试与 E2E |
| 浏览器支持 | 仅 Chrome | 仅 Chrome | Chromium、Firefox、WebKit |
| Token 效率 | 19.0k (9.5%) | 15.4k (7.7%) | 13.7k (6.8%) |
| 元素选择 | CSS/XPath 选择器 | 视觉 + DOM | 无障碍树（语义化） |
| 性能追踪 | ✅ 优秀 | ❌ 无 | |
| 网络检查 | ✅ 深度分析 | ||
| 控制台日志 | ✅ 完全访问 | ✅ 完全访问 | |
| 跨浏览器 | ❌ 否 | ❌ 否 | ✅ 是 |
| CI/CD 集成 | ✅ 优秀 | ❌ 差（需要登录） | ✅ 优秀 |
| 无头模式 | ✅ 是 | ❌ 否 | ✅ 是 |
| 认证 | 需要设置 | 使用你的会话 | 需要设置 |
| 定时任务 | ❌ 否 | ✅ 是 | ❌ 否 |
| 成本 | 免费 | 需要付费计划 | 免费 |
| 本地设置 | 需要 Node.js | 浏览器扩展 | 需要 Node.js |
INPUT AUTOMATION (8): click, drag, fill, fill_form, handle_dialog,
hover, press_key, upload_file
NAVIGATION (6): close_page, list_pages, navigate_page,
new_page, select_page, wait_for
EMULATION (2): emulate, resize_page
PERFORMANCE (3): performance_analyze_insight,
performance_start_trace, performance_stop_trace
NETWORK (2): get_network_request, list_network_requests
DEBUGGING (5): evaluate_script, get_console_message,
list_console_messages, take_screenshot,
take_snapshot
BROWSER CONTROL: navigate, read_page, find, computer
(click, type, scroll)
FORM INTERACTION: form_input, javascript_tool
MEDIA: upload_image, get_page_text, gif_creator
TAB MANAGEMENT: tabs_context_mcp, tabs_create_mcp
DEVELOPMENT: read_console_messages, read_network_requests
UTILITIES: shortcuts_list, shortcuts_execute,
resize_window, update_plan
NAVIGATION: navigate, goBack, goForward, reload
INTERACTION: click, fill, select, hover, press,
drag, uploadFile
ELEMENT QUERIES: getElement, getElements, waitForSelector
ASSERTIONS: assertVisible, assertText, assertTitle
PAGE STATE: screenshot, getAccessibilityTree,
evaluateScript
BROWSER MGMT: newPage, closePage
✅ 性能测试
- 记录包含 Core Web Vitals 的性能追踪
- 识别渲染瓶颈和布局偏移
- 内存泄漏检测和 CPU 分析
✅ 深度调试
- 网络请求检查（headers、payloads、timing）
- 控制台错误分析和堆栈追踪
- 实时 DOM 检查
✅ CI/CD 流水线
- 支持无头执行
- 稳定、基于脚本的自动化
- 不依赖认证状态
理想工作流： "找出为什么这个页面很慢" 或 "调试这个 API 调用"
✅ 手动测试辅助
- 在登录账户时进行测试
- 带视觉上下文的探索性测试
- 录制可回放的工作流
✅ 快速验证
- 设计验证（对比 Figma 和输出）
- 新功能抽查
- 开发期间读取控制台错误
✅ 重复性浏览器任务
- 定时自动检查
- 多标签工作流管理
- 从你录制的动作中学习
理想工作流： "检查我的更改看起来是否正确" 或 "用我的登录测试这个表单"
✅ E2E 测试自动化
- 跨浏览器测试（Chrome、Firefox、Safari）
- 生成可复用的测试脚本
- 生成 Page Object Model
✅ 可靠的 UI 测试
- 无障碍树 = 无脆弱选择器
- 确定性交互
- 不易因 UI 更改而中断
✅ CI/CD 集成
- 流水线无头模式
- 从自然语言生成 Playwright 测试文件
- 与测试管理工具集成
理想工作流： "为这个用户流编写 E2E 测试" 或 "跨浏览器测试这个"
| 工具 | Token 使用 | 上下文占比 | 效率评级 |
|---|---|---|---|
| Playwright MCP | ~13.7k | 6.8% | ⭐⭐⭐⭐⭐ 最佳 |
| Claude in Chrome | ~15.4k | 7.7% | ⭐⭐⭐⭐ 良好 |
| Chrome DevTools MCP | ~19.0k | 9.5% | ⭐⭐⭐ 可接受 |
影响： 使用 200k token 上下文时：
- Playwright 为你的工作留下 186.3k tokens
- Claude in Chrome 留下 184.6k tokens
- Chrome DevTools 留下 181k tokens
对于包含大量代码上下文的复杂会话，Playwright 和 Chrome DevTools 之间约 5.3k token 的差异可能会有影响。
- ✅ 默认隔离的浏览器配置文件
- ✅ 无云依赖
- ✅ 完全本地控制
⚠️ 远程调试端口安全（使用隔离配置文件）
⚠️ 无缓解措施时攻击成功率为 23.6%（有防御措施时降至 11.2%）⚠️ 使用你的实际浏览器会话（cookie 暴露风险）⚠️ 被阻止访问金融/成人/盗版网站⚠️ 仍处于测试阶段，存在已知漏洞
- ✅ 隔离的浏览器上下文
- ✅ 无云依赖
- ✅ 成熟的安全模型（Microsoft 支持）
- ✅ 可以安全处理认证
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest从 Chrome Web Store 安装（需要 Pro/Max/Team/Enterprise 计划）
# 首先，安装浏览器
npx playwright install
# 然后添加到 Claude Code（用户作用域 = 所有项目）
claude mcp add playwright -s user -- npx @playwright/mcp@latest用于： 日常 E2E 测试、跨浏览器验证、生成测试脚本
原因：
- 最低的 token 使用（为你的代码留出更多上下文）
- 跨浏览器支持（Chrome、Firefox、Safari）
- 无障碍树方式 = 更可靠的选择器
- 优秀的 CI/CD 集成
- 可以生成实际的 Playwright 测试文件
- 免费，无需订阅
用于： 性能调试、网络分析、Core Web Vitals
原因：
- 性能追踪和调试无可匹敌
- 深度网络请求检查
- 官方 Google 工具，长期支持
- 当你需要回答"为什么这个很慢？"时必不可少
用于： 登录时的快速手动验证、探索性测试、设计验证
原因：
- 适合开发期间的快速视觉检查
- 可以读取你的登录状态
- 适合"这看起来对吗？"的验证
- 跳过 CI/CD 或严肃的测试自动化
# 同时安装 Playwright 和 Chrome DevTools MCP
npx playwright install
claude mcp add playwright -s user -- npx @playwright/mcp@latest
claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest1. 开发 → Claude Code（终端）
2. 测试 → Playwright MCP（E2E、跨浏览器）
3. 调试 → Chrome DevTools MCP（性能、网络）
4. 验证 → Claude in Chrome（快速视觉检查）
5. CI/CD → Playwright MCP（无头、自动化）
| 如果你需要... | 使用这个 |
|---|---|
| 跨浏览器 E2E 测试 | Playwright MCP |
| 性能分析 | Chrome DevTools MCP |
| 网络调试 | Chrome DevTools MCP |
| 快速视觉验证 | Claude in Chrome |
| CI/CD 自动化 | Playwright MCP |
| 测试脚本生成 | Playwright MCP |
| 最低 token 使用 | Playwright MCP |
| 登录会话测试 | Claude in Chrome |
| 控制台日志调试 | Chrome DevTools MCP |
同时安装 Playwright MCP 和 Chrome DevTools MCP。 使用 Playwright 作为主要测试工具（它更省 token、跨浏览器、更适合 E2E）。当你需要深度性能分析或网络调试时使用 Chrome DevTools。仅在你需要登录会话时进行快速手动验证时使用 Claude in Chrome。
- Chrome DevTools MCP - GitHub
- Anthropic - Piloting Claude in Chrome
- Claude in Chrome Help Center
- Playwright MCP - GitHub
- Simon Willison - Using Playwright MCP with Claude Code
- Testomat.io - Playwright MCP Claude Code
- MCP Integration Guide - Scrapeless
- Chrome DevTools MCP Guide - Vladimir Siedykh
- Addy Osmani - Give your AI eyes
本报告由 Claude Code 使用 Opus 4.5 模型于 2025 年 12 月 19 日生成。