Playwright MCP：让 AI 真的会开浏览器

用可访问性树而不是截图控制浏览器，让 AI 能真点、真填、真读页面。

浏览器自动化一直有个尴尬处：写脚本的人要维护选择器，页面一改就崩。换成让 AI 来操作，主流做法又是截图加坐标点击，模型得先「看懂」像素，速度慢且容易点偏。Playwright MCP 走的是第三条路：把页面结构导出成可访问性树，按钮、链接、输入框都带角色和可读名称，模型读的是文本结构而不是图片。它由微软官方维护，是这套协议里使用量最高的服务器之一，也是「让 AI 验证自己改的页面」最直接的办法。

配置示例

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

Claude Code 可以直接一行命令加：claude mcp add playwright npx @playwright/mcp@latest。需要无头运行时，在 args 里追加 "--headless"；希望每次从干净状态开始（不带上已登录的 cookie），加 "--isolated"。

靠可访问性树定位，而不是靠坐标

页面加载后，服务器返回一份结构化快照，里面是「按钮『提交订单』」「文本框『邮箱』」这样的条目。模型据此决定点哪里，不需要视觉模型，也不需要猜像素位置。好处有两点：一是能做纯文本模型可用的浏览器自动化；二是页面改版只要可读名称不变，操作就不会失效，比 CSS 选择器稳定得多。

表单与多步流程能连贯跑

导航、点击、输入、下拉选择、滚动、截屏这些动作都有对应工具，并且共用同一个浏览器会话。实际场景里很能打：让它登录后台、进入设置页、改一个字段、不点保存、然后报告「保存按钮是否变为可点」。这种「只观察不提交」的验证，人工做要来回切换窗口，交给它一遍就完。

前端改完自己验一遍

这是最常用的工作流：改完样式或交互，让全局代理打开本地 http://localhost:3000，按你描述的路径走一遍，报回最终 URL、页面标题、可见的错误提示。它不替代测试套件，但能拦住「按钮点不动」「表单提交后白屏」这类只有跑起来才暴露的问题，比让 AI 凭空推演可靠得多。

有头模式默认打开，看得见在干什么

默认不是无头，而是弹出一个真实浏览器窗口，你能看到它逐步操作。调试阶段这个设定很重要：出错时看一眼就知道是页面没加载完还是点错了元素。适合无人值守时再加 --headless。另外可以通过 --browser=firefox、--device="iPhone 15"、--viewport-size=1280x720 指定浏览器与设备，验证移动端布局时很实用。

使用上手：四步接入

1. 确认前置：Node.js 18 或更高版本，本机装有 Chrome、Edge、Firefox 或 WebKit 中至少一个。
2. 写配置：把上面的 JSON 加到客户端的 MCP 配置里；Claude Code 用 claude mcp add 一行搞定，Codex 用 codex mcp add playwright npx "@playwright/mcp@latest"。
3. 首次验证：重启客户端，让它访问 https://demo.playwright.dev/todomvc 并添加两条待办，看到窗口自动操作即接通。
4. 固定习惯：日常开发加 --isolated，避免代理沾上你的登录态；需要登录态的调试场景再用 --user-data-dir 指定专用配置目录。

优点与不足

优点是稳定与省 token：结构化快照的体积远小于整页截图，也不依赖视觉模型，模型选型自由度高。微软官方维护，更新跟随 Playwright 主版本，客户端兼容性列表基本覆盖主流工具。

不足也很明确。第一，它不适合大批量跑测试：官方 README 自己说了，对于高频编码代理，Playwright CLI 加技能的方案 token 更省，因为不用每次把工具 schema 和页面结构塞进上下文。第二，有头模式用默认配置时，代理能访问你所有已登录的网站，存在真实风险，必须用 --isolated 或专用配置目录隔离。第三，公开的 --caps=vision 等扩展能力会增加上下文开销，非必要不开。

适合谁

• 前端开发者：改完页面让代理自己开浏览器验一遍，减少「本地能跑线上报错」。
• 做自动化巡检的团队：登录、点菜单、查数据三步流程，比维护一堆选择器脚本省心。
• 需要交给非技术同事用的场景：只要用中文描述步骤，不需要写代码。

下载与访问

• 仓库：https://github.com/microsoft/playwright-mcp
• npm 包：https://www.npmjs.com/package/@playwright/mcp
• Playwright 官网：https://playwright.dev

许可证与获取

本文属于「连接器」分类的 AI 资源专栏，更多评测见分类页。