Playwright MCP

一个 Model Context Protocol 服务器，使用 Playwright 提供浏览器自动化功能。使大型语言模型（LLM）能够通过结构化的可访问性快照与网页交互——不需要视觉模型。

🌐 A Model Context Protocol server that provides browser automation capabilities using Playwright. Enables LLMs to interact with web pages through structured accessibility snapshots — no vision models required.

示例

🌐 Example

You: Navigate to https://demo.playwright.dev/todomvc and add "Buy groceries".

→ browser_navigate { url: "https://demo.playwright.dev/todomvc" }
→ browser_snapshot

  - heading "todos" [level=1]
  - textbox "What needs to be done?" [ref=e5]

→ browser_type { ref: "e5", text: "Buy groceries", submit: true }
→ browser_snapshot

  - heading "todos" [level=1]
  - textbox "What needs to be done?" [ref=e5]
  - listitem:
    - checkbox "Toggle Todo" [ref=e10]
    - text: "Buy groceries"
  - contentinfo:
    - text: "1 item left"

LLM 会读取无障碍快照，找到像 e5 这样的元素引用，并使用它们进行交互——点击按钮、填写表单、勾选复选框。无需截图或坐标猜测。

🌐 The LLM reads the accessibility snapshot, finds element refs like e5, and uses them to interact — clicking buttons, filling forms, checking checkboxes. No screenshots or coordinate guessing needed.

主要特点

🌐 Key Features

基于快照 — 在可访问性树上操作，而不是像素。每个交互元素都会获得一个唯一引用，以实现确定性的交互
适合大型语言模型（LLM） — 结构化文本输出，LLM 可以自然解析，每个快照约 200-400 个标记，而 DOM/截图则为数千个
跨浏览器 — 支持 Chrome、Firefox、WebKit 和 Edge
全自动化 — 覆盖导航、表单、网络模拟、存储、跟踪、视频等的 40 多种工具
持久会话 — 默认情况下，登录状态和 Cookie 会在会话之间保留
适用于任何地方 — VS Code、Cursor、Windsurf、Claude Code、Claude Desktop，以及任何 MCP 客户端

快速开始

🌐 Quick Start

将服务器添加到你的 MCP 客户端：

🌐 Add the server to your MCP client:

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

浏览器默认以有头模式打开，因此你可以看到发生的事情。有关客户端特定设置，请参见安装。

🌐 The browser opens in headed mode by default so you can see what's happening. See Installation for client-specific setup.

Playwright MCP 对 Playwright CLI

🌐 Playwright MCP vs Playwright CLI

	MCP	Playwright CLI
最适合	专用的智能循环，探索性自动化	与大型代码库协作的编码代理（Claude Code，Copilot）
工作原理	LLM 使用结构化参数调用 MCP 工具	代理运行 shell 命令
令牌消耗	较高 — 工具模式 + 上下文快照	较低 — 简明的 CLI 输出，按需加载技能
默认模式	有界面	无界面
设置	在 MCP 客户端中使用 JSON 配置	`npm install -g @playwright/cli`

可用工具

🌐 Available Tools

核心

🌐 Core

工具	描述
`browser_navigate`	导航到一个网址
`browser_navigate_back`	回到历史
`browser_navigate_forward`	在历史中前进
`browser_reload`	重新加载页面
`browser_snapshot`	捕获无障碍快照
`browser_click`	通过引用点击一个元素
`browser_hover`	将鼠标悬停在一个元素上
`browser_drag`	元素之间拖放
`browser_type`	在元素中输入文本
`browser_fill_form`	一次填写多个表单字段
`browser_select_option`	选择下拉选项
`browser_check`	勾选复选框或单选按钮
`browser_uncheck`	取消选中复选框
`browser_press_key`	按一个键（回车、Tab 等）
`browser_take_screenshot`	截取 PNG/JPEG 截图
`browser_tabs`	列出、创建、关闭、切换标签页
`browser_handle_dialog`	接受或关闭对话框
`browser_file_upload`	上传文件
`browser_close`	关闭浏览器
`browser_resize`	调整浏览器窗口大小
`browser_wait_for`	等待文本、元素或时间

网络与存储

🌐 Network & Storage

工具	描述
`browser_network_requests`	列出网络请求
`browser_route`	模拟网络请求
`browser_route_list`	列出活动的模拟路由
`browser_unroute`	删除模拟路由
`browser_cookie_list/get/set/delete/clear`	管理 Cookie
`browser_localstorage_list/get/set/delete/clear`	管理 localStorage
`browser_storage_state`	将 Cookie 和 localStorage 保存到文件
`browser_set_storage_state`	恢复已保存的状态

测试与调试

🌐 Testing & Debugging

工具	描述
`browser_run_code`	执行 Playwright 代码片段
`browser_evaluate`	在页面上执行 JavaScript
`browser_console_messages`	获取控制台输出
`browser_generate_locator`	为测试生成 Playwright 定位器
`browser_verify_element_visible`	断言元素可见
`browser_verify_text_visible`	断言文本可见
`browser_start_tracing` / `browser_stop_tracing`	记录执行跟踪
`browser_start_video` / `browser_stop_video`	录制会话视频
`browser_pdf_save`	导出页面为 PDF

视力（可选）

🌐 Vision (optional)

工具	描述
`browser_mouse_move_xy`	将鼠标移动到坐标
`browser_mouse_down` / `browser_mouse_up`	鼠标按键按下/释放
`browser_mouse_wheel`	使用鼠标滚轮滚动

示例​

主要特点​

快速开始​

Playwright MCP 对 Playwright CLI​

可用工具​

核心​

网络与存储​

测试与调试​

视力（可选）​

示例