@playwright/mcp

技能简介

@playwright/mcp 是微软官方推出的 Model Context Protocol（MCP）服务器，为 AI 助手提供浏览器自动化能力。它基于 Playwright 的无障碍树（Accessibility Tree）而非像素截图实现页面交互，让大语言模型无需视觉模型即可理解和操作网页。

与 Playwright CLI 相比，MCP 接口更适合需要持久状态、丰富内省和迭代推理的自主代理循环，例如探索性自动化、自愈测试或需要持续浏览器上下文的长时运行工作流。

核心能力

• 轻量快速：基于结构化无障碍树而非像素输入，避免视觉模型的高成本
• LLM 友好：无需视觉模型，纯数据结构操作，降低 token 消耗
• 确定性工具调用：避免截图方案的歧义性问题
• 多 IDE 支持：VS Code、Cursor、Windsurf、Claude Desktop、Goose、Grok、Junie 等主流 MCP 客户端
• 零配置启动：标准 npx 方式，无需复杂安装
• CLI 互补：与 Playwright CLI+SKILLS 形成互补，CLI 更适合高频编码代理

安装配置

标准 MCP 配置

在任意 MCP 客户端的配置文件（如 ~/.claude.json、mcp.json）中添加：

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

Claude Code 方式

claude mcp add playwright npx @playwright/mcp@latest

Cursor 方式

点击安装按钮或手动配置：

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

前置要求

• Node.js 18 或更高版本
• 已安装支持 MCP 的 IDE 或客户端

使用步骤

1. 安装依赖：确保系统已安装 Node.js 18+
2. 配置 MCP：根据所用 IDE/工具，在对应的 MCP 配置中添加 @playwright/mcp
3. 验证连接：启动客户端，检查 MCP 服务器是否正常连接
4. 开始使用：用自然语言描述想要进行的浏览器操作，例如：
   • 打开 Google 首页并在搜索框输入 Playwright
   • 打开我的本地应用 http://localhost:3000
   • 截取当前页面的无障碍树结构

适用场景

• Web 自动化测试：AI 驱动的端到端测试，支持自愈能力
• 网页数据采集：结构化提取页面内容，无需解析 HTML
• UI 探索性测试：AI 自主发现页面元素和交互
• 跨浏览器兼容性测试：同时测试多浏览器行为
• 长时运行的工作流：需要持久浏览器上下文的任务
• 无障碍审计：基于无障碍树分析页面结构

适用人群

• 需要在 AI 编码代理中集成浏览器自动化的开发者
• 使用 Claude Code、Cursor、Windsurf 等 AI IDE 的工程师
• 需要构建自愈测试或探索性自动化的 QA 团队
• 对无障碍树原理熟悉的 Web 开发者和测试工程师

工作原理

@playwright/mcp 基于 Playwright 的无障碍树（Accessibility Tree）API。当 AI 代理发送操作请求时，服务器将网页渲染为结构化的无障碍节点树，而非像素图像。AI 通过这些节点理解页面结构并执行点击、输入、导航等操作。这种方式相比截图方案具有以下优势：

• token 高效：无障碍树文本远比截图的 Base64 编码简洁
• 确定性高：DOM 节点路径明确，避免视觉模型的歧义
• 可解释性强：AI 能准确理解每个元素的作用和层级关系

官方链接

• NPM 页面：https://www.npmjs.com/package/@playwright/mcp
• GitHub 仓库：https://github.com/microsoft/playwright-mcp
• 官方文档：https://playwright.dev
• MCP 规范：https://modelcontextprotocol.io