Playwright CLI vs MCP Server:谁才是 Claude Code 的最佳拍档?

BBetter Stack
컴퓨터/소프트웨어AI/미래기술

Transcript

00:00:00Playwright CLI 是与编码智能体协同工作的最新方式,它允许你管理
00:00:04本地和会话存储、拍摄快照、管理标签页——基本上是在终端中
00:00:09发挥 Playwright 引擎的全部能力。
00:00:12但为什么有人会用它,而不是用 Playwright MCP 服务器呢?
00:00:17事实上,为什么越来越多的工具正从 MCP 服务器转而构建成 CLI?
00:00:22点击订阅,让我们一探究竟。
00:00:24首先,让我们通过一个简单的任务来测试 Playwright CLI 和 MCP 服务器。
00:00:31我将让它帮我测试一个我一直在开发的
00:00:35Twitter 视频下载工具。
00:00:36我会让 Playwright 获取这条推文的链接,粘贴到这里,提取
00:00:40视频,然后等待 10 秒再截图,接着清理本地存储
00:00:45以便下一个智能体能在一个干净的环境中开始。
00:00:48我们先在 Claude Code 中尝试 Playwright CLI,安装后
00:00:54我们就能在这里看到这个技能。
00:00:56注意,它只占用 68 个 token。
00:00:59现在我给它这个提示词,明确告诉智能体使用
00:01:03Playwright CLI 技能,以便让操作更简单一些。
00:01:06现在我按回车,它加载技能,将 URL 输入文本框,点击
00:01:11“提取视频”,然后等待 10 秒。
00:01:13现在它完成了截图,清理了本地存储,并关闭了浏览器。
00:01:17一切搞定,它显示截图保存在这里,如果我们看一下,
00:01:21可以看到视频已成功下载。
00:01:24整个过程大约消耗了 16% 的 token。
00:01:27现在让我们用 MCP 服务器尝试同样的操作。
00:01:29我们可以使用 MCP 命令来检查是否已安装。
00:01:33在开始之前,先看看上下文占用情况。
00:01:35向上滚动可以看到,已经使用了 15% 的上下文,因为
00:01:41加载了所有这些 MCP 工具,它们大约占用 3.6K 个 token。
00:01:46好,记住这一点,我们将使用相同的提示词。
00:01:50注意,这次我使用的是 Playwright MCP 服务器工具,而不是 CLI 技能。
00:01:55它开始调用 MCP 服务器,这会打开一个新浏览器。
00:01:59然后它把链接粘贴到了输入框。
00:02:01接着点击按钮。
00:02:02我注意到 MCP 服务器请求的权限比 CLI 多得多,这也没关系。
00:02:08但在截图时遇到了一些问题,可能是因为我已经有了一个
00:02:12同名文件。
00:02:13我又用 Playwright MCP 服务器试了一次,即使尝试了
00:02:17不同的截图名称,它在提取截图时仍多次报错。
00:02:22现在它运行结束了。
00:02:23除了截图,它完成了其他所有任务。
00:02:26现在看下上下文,使用了 35K,即 18%。
00:02:32只比 CLI 多一点点,大部分开销是 MCP 工具本身占用的。
00:02:37但实际上有一种方法可以完成同样的任务且占用更少的上下文,
00:02:43我稍后会在视频中详细说明。
00:02:45我知道这只是一个例子,在某些场景下,MCP 服务器
00:02:51消耗的 token 可能比 Playwright CLI 少,虽然我表示怀疑。
00:02:56你可能觉得 16% 和 18% 差别并不大。
00:03:02但 CLI 相比 MCP 服务器还有其他优势。
00:03:06默认情况下,Playwright MCP 服务器不会开放所有可用工具。
00:03:11事实上,你必须手动开启像 PDF 生成或追踪等额外工具
00:03:16才能使用它们,因为它们太占上下文了。
00:03:19然而,CLI 没有这种限制。
00:03:22事实上,所有工具从一开始就是可用的。
00:03:25CLI 不仅对智能体有用,对人类也很有用,因为对于
00:03:29需要重复执行的任务,甚至是端到端测试,你可以创建一个简单的 Bash 脚本,
00:03:34让人类可以运行来验证结果,智能体同样也可以运行。
00:03:39但这并不意味着 MCP 服务器一无是处,如果你想构建一个
00:03:44能在任何地方运行的智能体循环,比如浏览器、桌面或移动应用,
00:03:49而不只是在终端,那么 MCP 服务器就是完美的选择。因为它是一种
00:03:54智能体访问工具的标准协议。而且由于 Playwright 运行 JS 或 TS 代码,
00:03:59你可以在任何支持 JavaScript 运行时的环境中运行它。
00:04:03此外,MCP 服务器默认运行在有头模式,而 CLI 运行在无头模式,
00:04:09因为它被设计为在编码智能体的后台运行。
00:04:13如果你很在意减少 Playwright MCP 服务器的 token 消耗,
00:04:17你可以通过开关特定工具来进行配置。
00:04:20事实上,如果你的目标是使用尽可能少的 token,那你也不该
00:04:26使用 Playwright CLI。因为 Zilliz 的 Agent Browser 虽然底层运行 Playwright,
00:04:32但它拥有 Rust 编写的 CLI,速度更快,且设计之初就比 Playwright 更省 token,
00:04:38就像你在我之前的例子中看到的那样。
00:04:39观看下一段视频,了解 Agent Browser 的一切,
00:04:43将你的编码智能体浏览技能提升到新高度。

Key Takeaway

虽然 MCP 服务器提供了标准化的跨平台协议,但在 Claude Code 等终端环境中,Playwright CLI 凭借更低的 Token 消耗、更全的功能访问和更高的脚本灵活性成为更优选择。

Highlights

Playwright CLI 允许在终端中直接调用 Playwright 引擎的所有功能,包括状态管理和截图。

在 Claude Code 测试中,CLI 仅占用 68 个 token,而 MCP 服务器因加载大量工具占用约 3.6K 个 token。

CLI 默认开放所有功能(如 PDF 生成和追踪),而 MCP 服务器为了节省上下文必须手动开启特定工具。

MCP 服务器的优势在于其标准协议属性,适用于非终端环境(如移动端或桌面应用)的智能体循环。

CLI 运行在无头模式,适合后台自动化;MCP 服务器通常运行在有头模式,方便实时观察。

Zilliz 的 Agent Browser 作为 Rust 编写的替代方案,在 token 消耗和速度上比 Playwright 更具优势。

Timeline

Playwright CLI 简介与核心优势

视频开篇介绍了 Playwright CLI 这一与编码智能体协作的新工具,它集成了标签页管理、快照拍摄及会话存储等核心功能。主讲人指出,该工具实质上是在终端环境中释放了 Playwright 引擎的完整能力。针对目前开发者社区从 MCP 服务器转向 CLI 模式的趋势,视频提出了探讨其背后原因的议题。这一节设定了全文的基调,即对比两种技术栈在实际编码场景中的表现。通过对 CLI 定义的界定,为后续的实测环节做好了理论铺垫。

实测对比:Twitter 视频下载任务

主讲人设计了一个具体的测试任务:使用 Twitter 视频下载工具提取链接、等待并截图,最后清理存储空间。在 Claude Code 中运行 Playwright CLI 时,其定义的技能仅占用 68 个 token,展示了极高的轻量化特性。演示过程中,智能体自动执行了输入 URL、点击提取、截图并清理的完整流程,且最终显示任务成功完成。结果显示整个过程仅消耗了约 16% 的上下文,证明了 CLI 在处理单一任务时的高效性。此部分强调了 CLI 在实际操作中的简洁直观,尤其是在资源受限的 LLM 会话中。

MCP 服务器的表现与局限性分析

随后视频展示了使用 MCP 服务器执行相同任务的情况,发现其初始上下文占用高达 15%(约 3.6K token),远超 CLI。在运行过程中,MCP 服务器虽然完成了大部分步骤,但在执行截图操作时多次报错,暗示其稳定性可能受到环境或文件命名限制。尽管最终 token 总消耗(18%)与 CLI 差别看似不大,但大部分开销来自于加载工具集本身。主讲人对此表示质疑,并指出在更复杂的长对话中,这种初始开销的差距会被进一步放大。这一节通过对比实验揭示了 MCP 服务器在资源占用和执行成功率上的潜在挑战。

功能可用性与人机协作的深度对比

主讲人深入探讨了两者在功能开放程度上的差异,指出 MCP 服务器为了节省 token 默认禁用了 PDF 生成等高级工具。相比之下,Playwright CLI 没有任何限制,所有引擎功能从一开始就处于可用状态,无需繁琐的配置。此外,CLI 的优势不仅限于 AI 智能体,它还允许人类开发者编写 Bash 脚本进行端到端测试,增强了工作流的可复用性。这种通用性使得 CLI 在本地开发和自动化测试场景中更具吸引力。本段核心观点是 CLI 提供了更完整的功能生态且降低了手动配置的负担。

MCP 的适用场景与极致优化建议

尽管 CLI 优势明显,但视频也肯定了 MCP 服务器在构建跨平台(如移动或桌面应用)智能体循环中的标准协议价值。MCP 服务器更适合需要“有头模式”实时交互的场景,而 CLI 则专注于“无头模式”下的后台自动化任务。对于追求极致性能的用户,主讲人推荐了基于 Rust 编写的 Agent Browser,认为其比 Playwright 更省 token 且速度更快。视频最后总结了如何通过配置特定工具来优化 MCP 的资源消耗,并引导观众观看下一篇关于 Agent Browser 的深度解析。这一节为不同需求的开发者提供了清晰的选择指南和进阶方向。

Community Posts

No posts yet. Be the first to write about this video!

Write about this video