Playwright MCP Skill 技能

Playwright MCP 是什么

Playwright MCP 是微软官方推出的 Model Context Protocol（MCP）服务器，通过 Playwright 为大语言模型（LLM）提供浏览器自动化能力。与传统截图方案不同，它基于结构化的可访问性快照（Accessibility Tree）与页面交互，无需视觉模型即可完成复杂浏览器任务。该项目托管于 GitHub（microsoft/playwright-mcp），npm 周下载量高达 588 万次，GitHub 星标 36,730 个，是当前最受欢迎的 MCP 服务器之一。

核心能力一览（45个工具）

页面导航与浏览控制

• browser_navigate：导航至任意 URL
• browser_navigate_back：返回上一页
• browser_tabs：管理多标签页

元素交互

• browser_click / browser_hover / browser_drag / browser_drop：点击、悬停、拖拽操作
• browser_type / browser_fill_form / browser_select_option：表单填写与选择
• browser_file_upload：文件上传
• browser_press_key：键盘按键

代码执行与求值

• browser_evaluate：在页面上下文中执行任意 JavaScript
• browser_run_code_unsafe：非安全模式代码执行

页面内容获取

• browser_snapshot：获取当前页面可访问性快照
• browser_take_screenshot：截取页面截图
• browser_find：正则搜索页面快照内容
• browser_console_messages：读取浏览器控制台日志

网络监控

• browser_network_requests / browser_network_request：列出与查看网络请求
• browser_route / browser_route_list / browser_unroute：拦截与修改网络请求
• browser_network_state_set：设置网络状态

存储管理

• Cookie：browser_cookie_get / browser_cookie_set / browser_cookie_delete / browser_cookie_clear / browser_cookie_list
• LocalStorage：browser_localstorage_get / browser_localstorage_set / browser_localstorage_delete / browser_localstorage_clear / browser_localstorage_list
• SessionStorage：browsersessionstorage* 系列

浏览器状态与配置

• browser_snapshot / browser_take_screenshot / browser_resize / browser_wait_for
• browser_handle_dialog：处理 Alert / Confirm / Prompt 对话框
• browser_get_config：获取当前配置

安装配置（3步上手）

第一步：在 MCP 客户端中配置 在所用 AI 编程工具的 MCP 设置中添加以下配置：

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

支持的客户端包括：Claude Code、Cursor、VS Code、Windsurf、GitHub Copilot（Cline / Codex / Copilot）、Google Gemini CLI、Goose、Grok、Junie、Kiro、LM Studio、opencode、Qodo Gen、Factory、Warp 等主流 AI 编程工具。

第二步：安装 Playwright 浏览器 首次运行时会提示安装浏览器，运行以下命令即可：

npx playwright install

支持 Chromium、Firefox、WebKit 三大浏览器引擎，也支持指定 MS Edge。

第三步：验证连接 配置完成后，AI 助手即可调用 browser_navigate 工具访问任意网页，并通过 browser_snapshot 获取页面结构开始交互。

使用步骤（4步示例）

1. 配置 MCP：在 Claude Code / Cursor 等工具中配置上述 JSON，重启工具使配置生效
2. 访问目标页面：通过 browser_navigate 工具输入目标 URL，工具将自动等待页面加载完成
3. 获取页面快照：调用 browser_snapshot 获取当前页面可访问性树状结构，AI 据此理解页面布局
4. 执行交互任务：根据快照中的元素引用（element ref），调用 browser_click、browser_fill_form 等工具完成点击、填写、提交等操作

适用场景（4个典型场景）

场景一：AI 自动化测试 AI Agent 可自主驱动浏览器完成端到端（E2E）测试场景——打开待测页面、填写表单、点击按钮、验证结果，全程无需人工干预。

场景二：网页内容抓取 相比截图方案，browser_snapshot 基于可访问性树返回结构化文本内容，AI 可直接理解和处理页面数据，适用于 RAG（检索增强生成）场景的网页内容采集。

场景三：自主浏览与研究 AI Agent 可在无人介入的情况下浏览多个网页、收集信息、填写问卷、提交表单，适合市场调研、竞品分析等长流程任务。

场景四：浏览器扩展开发调试 配合 browser_network_requests 和 browser_console_messages，AI 可监控网页网络请求与控制台输出，辅助开发者调试浏览器扩展和脚本。

适用人群

• AI 编程助手用户（Claude Code / Cursor / Windsurf 等）
• 大语言模型应用开发者（需要浏览器自动化能力）
• 自动化测试工程师（E2E 测试场景）
• 数据工程师（RAG 网页内容采集）
• AI Agent 开发者（构建网页交互型智能体）

工作原理

Playwright MCP 的核心设计理念是「可访问性优先」：每次页面操作后，服务器通过 Playwright 的无障碍 API（Accessibility API）生成页面的结构化快照，而非像素级截图。这个快照以树状结构呈现每个 DOM 元素的角色（role）、名称（name）、状态（states）和属性（properties），大语言模型可据此理解页面并生成精准操作指令。

服务器支持三种浏览器运行模式：

• 持久化模式（Persistent）：浏览器数据持久化到本地，支持登录状态保持
• 隔离模式（Isolated）：每次会话使用独立临时配置文件，适合测试隔离
• 浏览器扩展模式：通过 Playwright 浏览器扩展连接到已有浏览器，使用已有登录态

官方链接

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