MCP playwright-mcp 用自然语言驱动浏览器自动化

写代码时，最常见的卡点不是逻辑，而是「这个网页到底长什么样、按钮在哪、表单怎么提交」。过去让 AI 去操作网页，要么靠截图配视觉模型，要么硬写一堆 Playwright 脚本，token 烧得飞起还容易跑偏。Microsoft 推出的 Playwright MCP 换了个思路：它把浏览器里真实的「可访问性树」（accessibility tree）喂给大模型，让模型直接读懂页面结构并下达点击、输入、导航等指令，全程不需要看像素、不需要视觉模型。本质上是给 AI 配了一个标准化的「浏览器遥控器」。

Playwright MCP 是一个标准 MCP（Model Context Protocol）服务端，任何兼容 MCP 的客户端——Claude Code、Cursor、VS Code、Windsurf、Goose 等——都能一键接入。它基于成熟的 Playwright 引擎，启动即用，是当下把「浏览器操作」能力交给 AI 编码 Agent 最轻量、最确定的方案之一。

项目基本信息

一、项目介绍

Playwright MCP 是一个标准 MCP 服务端，让 LLM 通过结构化的可访问性快照与网页交互，绕开截图与视觉模型的依赖。它把浏览器操作封装成一组标准工具：导航、点击、输入、快照、截图等，AI 客户端通过自然语言即可调度。项目由微软维护，紧跟 Playwright 引擎迭代，社区使用面广。

二、核心优势

• 轻量高效：基于可访问性树而非像素输入，传输数据量远小于截图。
• 对 LLM 友好：纯结构化数据，无需视觉模型，普通文本模型也能稳定理解页面。
• 行为确定：对比截图方案，点击/输入等操作的可解释性强，不易产生歧义。
• 生态兼容：支持 stdio 与远程接入，主流编码 Agent 和桌面客户端都能直接用。

三、适用场景

• 让 AI 自动走查网页流程：登录、填表、下单、断言结果。
• 端到端测试辅助：把自然语言测试步骤转成可执行的浏览器操作。
• 网页数据提取：在 AI 工作流里实时读取页面内容。
• 编码 Agent 的「眼睛和手」：先看页面再改代码，闭环开发与调试。

四、安装教程

Playwright MCP 以 npm 包形式分发，需提前装好 Node.js 18+。以 Claude Code 为例，直接把服务加进 MCP 配置：

claude mcp add --transport stdio playwright -- npx @playwright/mcp@latest

若是普通 MCP 客户端，在配置文件中加入：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

首次运行会自动下载 Chromium 等浏览器内核，需联网。若提示浏览器缺失，手动执行：

npx playwright install

常见报错：Error: Playwright browser not found——执行上面的 install 命令即可；NODE_OPTIONS 冲突——清掉自定义 node 参数后重试。

五、使用示例

接入后，在 Agent 里直接下自然语言指令即可，例如：

打开 https://example.com ，在搜索框输入「MCP」，点击搜索，
把第一条结果的标题返回给我。

Agent 会调用 Playwright MCP 的 browser_navigate、browser_type、browser_click、browser_snapshot 等工具，先抓取页面可访问性快照，再定位元素执行操作，最后把结果结构化返回。整个过程无需你写一行选择器代码。

六、常见问题

• 一定要截图吗？不需要，默认走可访问性树，更快也更省 token。
• 支持哪些浏览器？默认 Chromium，可通过参数切换 Chromium / Firefox / WebKit。
• 和 Playwright CLI 怎么选？高频编码 Agent 更推荐微软的 CLI+SKILL 方案（token 更省），MCP 适合需要标准协议接入的场景。
• 能保存登录态吗？支持通过用户数据目录持久化浏览器配置文件。

七、总结

Playwright MCP 把「让 AI 操作浏览器」这件事标准化、轻量化了。它没有花哨包装，就是给模型一个可靠的浏览器遥控器：读得懂结构、下得了指令、跑得稳。对于想给编码 Agent 加上真实网页交互能力的团队，这是目前最省心、最易落地的入口之一。