Claude Code 浏览器自动化怎么选？(2026最新)4 套方案实测对比（Agent Browser vs Playwright CLI/MCP vs DevTools）

用 AI 写代码已经不稀奇了，但让 AI 操控浏览器——打开网页、点击按钮、填写表单、抓取数据——这才是真正的"解放双手"。

在 Claude Code 生态中，目前有四个主流的浏览器自动化方案：Vercel 的 Agent Browser、Microsoft 的 Playwright CLI（2026 新方案）、Microsoft 的 Playwright MCP、Google 的 DevTools MCP。它们各有所长，选错了可能事倍功半。

本文将深入对比这四个方案，帮你在不同场景下做出最佳选择。

2026-02 更新：新增 Playwright CLI 方案——微软官方推荐的新一代 Token 高效方案，实测 Token 消耗比 MCP 降低 4-100 倍。

一、为什么需要浏览器自动化？

传统方式的痛点

假设你想让 AI 帮你做这些事：

• 打开竞品网站，截图看看他们的新功能
• 自动登录公司内部系统，导出报表
• 测试你刚写的网页，看看表单能不能正常提交
• 抓取某个页面的 API 返回值，排查 Bug

如果没有浏览器自动化，你只能：

1. 自己手动打开浏览器
2. 截图或复制内容
3. 粘贴给 AI 看

这不仅麻烦，而且很多动态内容（如需要登录的页面、JavaScript 渲染的内容）根本没法直接给 AI。

浏览器自动化的价值

有了浏览器自动化，AI 可以：

你说："帮我打开淘宝，搜索 iPhone 16，看看前 5 个商家的价格"

AI 做：
1. 启动浏览器
2. 打开 taobao.com
3. 在搜索框输入 "iPhone 16"
4. 点击搜索按钮
5. 读取前 5 个商品的价格
6. 整理成表格返回给你

整个过程你只需要一句话，AI 全程自动完成。

二、四大方案速览

在深入对比之前，先看一张总览表：

一句话总结：

• Agent Browser：轻量快速，日常浏览首选
• Playwright CLI：Token 高效 + 专业能力，编程 Agent 新首选
• Playwright MCP：功能最全，非 CLI 环境的稳定选择
• DevTools MCP：调试利器，开发排错首选

三、深入对比：各有什么绝活？

Agent Browser：快如闪电的"轻骑兵"

Agent Browser 是 Vercel 专门为 AI Agent 设计的浏览器自动化工具。它的核心设计理念是：用最少的信息，让 AI 理解网页。

核心机制：Snapshot + Refs

传统方案会把整个网页的 DOM 树或可访问性树发给 AI，动辄几万 Token。Agent Browser 不这样做——它只发送一个精简的"快照"，并给每个可交互元素分配一个简短的引用 ID（ref）。

# Agent Browser 的快照格式
- button "登录" [ref=e1]
- input "用户名" [ref=e2]
- input "密码" [ref=e3]
- link "忘记密码" [ref=e4]

AI 看到的就是这么简洁的结构。当它想点击"登录"按钮时，只需要说"点击 e1"，而不需要理解复杂的 CSS 选择器或 XPath。

Token 消耗对比

减少 93% 的 Token 消耗，意味着：

• 响应速度更快（AI 处理的信息更少）
• 成本更低（按 Token 计费的话）
• 更少触发上下文长度限制

适用场景

安装和使用

# 全局安装（推荐，性能最优）
npm install -g agent-browser

# 安装 Chromium 浏览器（首次安装必须执行）
agent-browser install

# 开始使用
agent-browser open https://example.com

# 也可以用 npx 免安装试用（但比全局安装慢）
npx agent-browser open https://example.com

在 Claude Code 中，Agent Browser 通常以 Skill 的方式接入，直接用自然语言指挥即可：

"用 Agent Browser 打开 https://example.com，截个图"

Playwright CLI：省 Token 的"特种部队"（2026 新方案）

Playwright CLI 是微软在 2026 年初推出的新一代浏览器自动化方案。如果说 Playwright MCP 是"重装步兵"，那 CLI 就是为编程 Agent（Claude Code、Cursor、Copilot）量身定制的"特种部队"——同样的战斗力，但补给消耗大幅降低。

微软在 Playwright MCP 官方仓库中明确推荐：

“Modern coding agents increasingly favor CLI-based workflows exposed as SKILLs over MCP because CLI invocations are more token-efficient.”

现代编程 Agent 越来越倾向于使用 CLI 工作流（以 Skill 方式暴露），因为 CLI 调用的 Token 效率更高。

核心机制：数据存磁盘，不存上下文

Playwright CLI 和 MCP 最本质的区别在于数据的存放位置：

Playwright MCP 的做法：
  网页快照 → 完整返回给 AI → 占用大量 Token
  截图 → 编码成数据返回 → 占用更多 Token
  Console 日志 → 每次都附带 → 持续消耗 Token

Playwright CLI 的做法：
  网页快照 → 保存为 YAML 文件 → AI 需要时才读取
  截图 → 保存为 PNG 文件 → AI 需要时才查看
  Console 日志 → 写入日志文件 → 按需检索

打个比方：MCP 就像一个话多的助手，每次汇报都把所有细节一股脑说完；CLI 就像一个高效的助手，只告诉你"报告写好了，放在桌上"，你需要的时候自己去看。

Token 消耗对比：实测数据

关键数据来自 TestCollab 和 SupaTest 的独立测评。

为什么差距这么大？因为 MCP 每一步都会把完整的可访问性树、Console 消息塞进上下文；而 CLI 只返回一个文件路径和简短的执行确认。Token 省下来了，上下文窗口也不会被撑爆。

工作流示例

# 1. 打开页面
playwright-cli open https://example.com --headed

# 2. 获取页面快照（保存为 YAML 文件，不塞进上下文）
playwright-cli snapshot
# 输出：Snapshot saved to .playwright/snapshots/page-001.yaml
# 快照中每个元素都有引用 ID（如 e8, e21, e35）

# 3. 用引用 ID 操作元素（极其简洁）
playwright-cli fill e8 "[email protected]"
playwright-cli fill e12 "password123"
playwright-cli click e15

# 4. 截图验证（保存为文件，不转为 Token）
playwright-cli screenshot
# 输出：Screenshot saved to .playwright/screenshots/page-001.png

# 5. 保存登录状态（下次可复用）
playwright-cli state-save login-state.json

注意看——每条命令的响应都非常短（一个文件路径），而不是几千 Token 的 DOM 树。这就是 CLI 高效的秘密。

50+ 命令全覆盖

Playwright CLI 并不是"阉割版 MCP"，它拥有完整的自动化能力：

适用场景

安装和使用

# 安装
npm install -g @playwright/cli@latest

# 初始化（自动安装浏览器）
playwright-cli install

# 开始使用
playwright-cli open https://example.com --headed

在 Claude Code 中，Playwright CLI 通常以 Skill 的方式接入，而不是 MCP Server。这也是微软推荐的方式。

CLI vs MCP：到底选哪个？

微软自己的建议很直白：

简单说：如果你在用 Claude Code，大多数情况下应该优先选 CLI。

Playwright MCP：稳如泰山的"重装步兵"

Playwright 是 Microsoft 开发的老牌浏览器自动化框架，被全球无数公司用于 E2E 测试。Playwright MCP 是它的 AI 扩展版，专门适配 Claude Code 等 AI 工具。

核心机制：Accessibility Tree（可访问性树）

Playwright 会把网页的完整可访问性树发送给 AI。这棵树包含了页面上所有元素的详细信息：角色、名称、状态、层级关系等。

# Playwright 的可访问性树片段
- document
  - navigation
    - link "首页"
    - link "产品"
    - link "关于我们"
  - main
    - heading "欢迎" [level=1]
    - form
      - textbox "用户名" [required]
      - textbox "密码" [required] [type=password]
      - button "登录"

信息更全面，但 Token 消耗也更高。

独特优势：跨浏览器 + 专业测试能力

Playwright 支持三大浏览器引擎：

• Chromium（Chrome、Edge）
• Firefox
• WebKit（Safari）

这意味着你可以用同一套指令，测试你的网站在不同浏览器上的表现。

此外，Playwright 还有很多专业测试特性：

• 自动等待：元素可交互后才操作，不怕页面加载慢
• 网络拦截：可以 mock API 返回值
• 多标签页管理：同时操控多个页面
• 视频录制：自动录制操作过程

适用场景

安装和配置

// claude_desktop_config.json 或 settings.json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-server-playwright"]
    }
  }
}

DevTools MCP：洞察秋毫的"侦察兵"

DevTools MCP 是 Google 官方出品，直接封装了 Chrome DevTools Protocol（CDP）。如果你用过 Chrome 的开发者工具（F12），你就知道它有多强大。

核心机制：Chrome DevTools Protocol

CDP 是 Chrome 浏览器的"后门"，通过它可以访问浏览器的几乎所有内部信息：

• Console 输出
• Network 请求和响应
• DOM 结构和样式
• JavaScript 执行环境
• 性能指标
• …

DevTools MCP 把这些能力暴露给 AI，让 AI 成为你的"高级调试助手"。

独特优势：调试能力无敌

其他两个方案侧重于"操作"浏览器，DevTools MCP 侧重于"理解"浏览器内部发生了什么。

你说："页面白屏了，帮我查查原因"

DevTools MCP 会：
1. 检查 Console 有没有报错
2. 查看 Network 请求是否失败
3. 分析 JavaScript 执行是否有异常
4. 检查关键元素是否正常渲染
5. 给出诊断结论

这是其他方案做不到的。

适用场景

安装和配置

DevTools MCP 需要配合 Chrome 扩展使用：

1. 安装 MCP Server：

{
  "mcpServers": {
    "devtools": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-server-chrome-devtools"]
    }
  }
}

2. 在 Chrome 中安装配套扩展（从 Chrome Web Store）

3. 启动 Chrome 时开启远程调试：

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# Windows
chrome.exe --remote-debugging-port=9222

四、实战选择指南

场景一：我就想让 AI 帮我看看网页

推荐：Agent Browser

你只是想让 AI 打开某个网页、截个图、看看内容，不需要复杂操作。Agent Browser 最快、最省 Token。

"帮我打开 competitor.com，看看他们的定价页面"
"截个图给我看看首页长什么样"
"这个表单能不能正常显示"

场景二：我需要测试复杂的用户流程

推荐：Playwright CLI（如果你在用 Claude Code）/ Playwright MCP（如果在沙盒环境）

注册、登录、下单、支付、退出——这种多步骤流程需要稳定可靠的执行。2026 年的新推荐是 Playwright CLI——它拥有和 MCP 相同的 Playwright 底层能力，但 Token 消耗低 4 倍以上，长流程中不会撑爆上下文。

"用 Playwright CLI 测试用户注册流程：填写表单→验证邮箱→完善资料→跳转到主页"
"跑一遍完整的下单流程，截图保存每一步的结果"

如果你的 Agent 没有 Shell 权限（如浏览器内的 AI 助手），那仍然选 Playwright MCP。

场景三：我的页面有 Bug，需要排查

推荐：DevTools MCP

页面白屏、接口报错、样式错乱——这些问题需要深入浏览器内部才能定位。DevTools MCP 是唯一能直接访问 Console、Network、DOM 的方案。

"页面打开后一直在转圈，帮我看看是哪个接口卡住了"
"这个按钮点击后没反应，帮我查查有没有 JS 报错"

场景四：我的项目需要长时间、大量浏览器操作

推荐：Playwright CLI

如果你的任务涉及 50+ 步的浏览器操作（比如批量测试、大规模数据采集），Playwright MCP 的上下文会逐步膨胀直到溢出。CLI 的"数据存磁盘"架构天然适合长时间运行。

"依次打开这 100 个 URL，对每个页面执行快照→检查元素→截图，结果存到 results 目录"

场景五：我需要同时具备多种能力

可以组合使用！

四个方案并不互斥，你完全可以同时配置，让 AI 根据任务自动选择最合适的工具。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    },
    "devtools": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-server-chrome-devtools"]
    }
  }
}

再加上 Agent Browser 和 Playwright CLI 的 Skill，你就拥有了完整的浏览器自动化能力矩阵。推荐组合：日常用 Agent Browser，测试用 Playwright CLI，调试用 DevTools MCP。

五、进阶技巧

1. 保存登录状态

很多网站需要登录才能访问，每次都手动登录很麻烦。你可以让 AI 保存 Cookie：

"用 Agent Browser 打开 xxx.com，让我登录，然后保存登录信息"

下次访问时，AI 会自动加载之前保存的 Cookie，无需重新登录。

2. 无头模式

如果你不需要看到浏览器界面（比如在服务器上运行），可以使用无头模式：

"用 Playwright 在无头模式下测试登录流程"

3. 截图对比

开发前端时，经常需要对比修改前后的效果。可以这样做：

"截图保存为 before.png"
# 修改代码
"再截一张图保存为 after.png，然后对比两张图的差异"

4. 批量操作

需要对多个页面执行相同操作时：

"依次打开这 10 个 URL，截图保存到 screenshots 文件夹"

六、常见问题

Q1：为什么我的 Playwright MCP 连接不上？

检查几个常见问题：

1. 确保已安装 Node.js 18+
2. 确保 MCP Server 配置正确
3. 尝试手动运行 npx @anthropic-ai/mcp-server-playwright 看报错

Q2：DevTools MCP 提示"无法连接到 Chrome"？

确保：

1. Chrome 已启动并开启了远程调试端口（9222）
2. 没有其他程序占用该端口
3. Chrome 扩展已安装并启用

Q3：Agent Browser 截图是空白的？

可能是页面还没加载完。尝试：

"打开页面后等待 3 秒再截图"

Q4：哪个方案最稳定？

如果追求稳定性，Playwright MCP 是最佳选择。它有完善的等待机制和错误处理，是生产级的自动化框架。

Q5：Token 真的差这么多吗？

是的。在实际测试中，执行相同的 10 步操作：

• Playwright MCP：约 114,000 tokens
• DevTools MCP：约 50,000 tokens
• Playwright CLI：约 27,000 tokens
• Agent Browser：约 7,000 tokens

差距确实很大。特别是 Playwright CLI 相比同门的 MCP 版本，Token 消耗降低了约 4 倍，这在长时间运行的自动化任务中是质的区别——MCP 可能跑到一半上下文就溢出了，CLI 却能稳定跑完。

Q6：Playwright CLI 和 MCP 可以同时装吗？

可以。CLI 以 Shell 命令方式工作，MCP 以 MCP Server 方式工作，两者不冲突。你甚至可以让 AI 在简单操作时用 CLI（省 Token），在需要完整可访问性树分析时切换到 MCP。

总结

记住这个口诀：

• 看看、填表 → Agent Browser
• 测试、跑流程（有 Shell 权限）→ Playwright CLI
• 测试、跑流程（沙盒环境）→ Playwright MCP
• 调试、抓请求 → DevTools MCP

2026 年的建议：如果你只装一个，装 Playwright CLI——它兼顾了 Token 效率和专业能力，是编程 Agent 的最佳默认选择。如果你想要最省 Token 的日常浏览体验，再加一个 Agent Browser。

现在，去让你的 AI 助手真正"动起来"吧！

相关阅读

• Claude Code 完全指南：从入门到精通
• Claude Code 最佳实践
• Claude Code 常用命令速查
• Anthropic 发布 Claude Cowork：让 AI 直接操作你的电脑文件
• OpenClaw 的 30 天狂飙：180K Star、40+ 漏洞、创始人加入 OpenAI

参考资料：

• Vercel Agent Browser GitHub
• Playwright MCP 官方仓库
• Playwright CLI 深度评测 - TestCollab
• MCP vs CLI 对比分析 - SupaTest
• Chrome DevTools Protocol 文档

相关阅读 / Related

• AI 自动化导航 Hub
• Claude Code 使用教程（OpenClaw 实战）
• Codex CLI 实战指南