Skip to main content

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" }

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

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

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

LLM 会读取无障碍快照，找到像 e5 这样的元素引用，并将它们作为下一次工具调用的 target — 点击按钮、填写表单、勾选复选框。无需截图或猜坐标。

🌐 The LLM reads the accessibility snapshot, finds element refs like e5, and passes them as the target of the next tool call — clicking buttons, filling forms, checking checkboxes. No screenshots or coordinate guessing needed.

主要特点​

🌐 Key Features

  • 基于快照 — 在可访问性树上操作，而不是像素。每个元素都有一个独特的引用，以实现确定性的交互
  • 适合LLM — 结构化文本输出，LLM能自然解析，比DOM转储或截图便宜得多
  • 跨浏览器 — 支持 Chrome、Firefox、WebKit 和 Edge
  • 全自动化 — 包含70多个工具，涵盖导航、表单、网络模拟、存储、追踪、视频等
  • 持久会话 — 默认情况下，登录状态和 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

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

可用工具​

🌐 Available Tools

核心（始终启用）​

🌐 Core (always enabled)

工具描述
browser_navigate导航到一个网址
browser_navigate_back回到历史
browser_snapshot捕获无障碍快照
browser_find在快照中搜索文本或正则表达式
browser_click点击一个元素
browser_hover将鼠标悬停在一个元素上
browser_drag元素之间拖放
browser_drop将文件或 MIME 类型的数据拖放到一个元素上
browser_type在元素中输入文本
browser_fill_form一次填写多个表单字段
browser_select_option选择下拉选项
browser_press_key按一个键（回车、Tab 等）
browser_take_screenshot截取 PNG/JPEG/WebP 屏幕截图
browser_tabs列出、创建、关闭、选择标签页
browser_handle_dialog接受或关闭对话框
browser_file_upload上传文件到文件选择器
browser_console_messages获取控制台输出
browser_network_requests列出网络请求
browser_network_request完整显示一个请求的详细信息
browser_evaluate在页面或元素上执行 JavaScript
browser_run_code_unsafe执行一个 Playwright 代码片段
browser_wait_for等待文本或时间
browser_close关闭页面
browser_resize调整浏览器窗口大小

网络（--caps=network）​

🌐 Network (--caps=network)

工具描述
browser_route模拟网络请求
browser_route_list列出正在模拟的路由
browser_unroute移除模拟的路由
browser_network_state_set上线或离线

存储（--caps=storage）​

🌐 Storage (--caps=storage)

工具描述
browser_cookie_list/get/set/delete/clear管理 Cookie
browser_localstorage_list/get/set/delete/clear管理 localStorage
browser_sessionstorage_list/get/set/delete/clear管理 sessionStorage
browser_storage_state保存 Cookie + 本地存储到文件
browser_set_storage_state恢复已保存的状态

测试（--caps=testing）​

🌐 Testing (--caps=testing)

工具描述
browser_generate_locator为测试生成 Playwright 定位器
browser_verify_element_visible断言元素可见
browser_verify_text_visible断言文本可见
browser_verify_list_visible断言列表及其项目可见
browser_verify_value断言表单字段值

开发者工具（--caps=devtools）​

🌐 Developer tools (--caps=devtools)

工具描述
browser_start_tracing / browser_stop_tracing记录执行跟踪
browser_start_video / browser_stop_video录制会话视频
browser_video_chapter给视频添加章节卡片
browser_video_show_actions / browser_video_hide_actions切换操作提示
browser_start_recording / browser_stop_recording将手动操作记录为代码
browser_highlight / browser_hide_highlight高亮页面上的元素
browser_annotate让用户在页面上添加标注
browser_resume继续暂停的脚本执行

PDF（--caps=pdf）​

🌐 PDF (--caps=pdf)

工具描述
browser_pdf_save将页面导出为 PDF

视觉（--caps=vision）​

🌐 Vision (--caps=vision)

工具描述
browser_mouse_move_xy移动鼠标到指定坐标
browser_mouse_click_xy在坐标上点击
browser_mouse_drag_xy在坐标之间拖动
browser_mouse_down / browser_mouse_up鼠标按下/释放
browser_mouse_wheel用鼠标滚轮滚动

配置（--caps=config）​

🌐 Config (--caps=config)

工具描述
browser_get_config获取已解析的配置