Playwright MCP：基于Playwright的浏览器自动化MCP服务器

Playwright MCP是一款通过Playwright提供浏览器自动化能力的模型上下文协议（MCP）服务器，支持LLM（大语言模型）通过结构化的可访问性快照与网页交互，无需依赖截图或视觉调优模型。

核心特性

1. 轻量高效：基于Playwright的可访问性树（Accessibility Tree），非像素级输入，性能更优。
2. LLM友好：纯结构化数据交互，无需视觉模型，降低集成复杂度。
3. 确定性操作：避免基于截图方案的歧义问题，操作结果可预测。
4. 多模式支持：
   • 持久化配置文件：存储登录状态等数据（默认模式），路径可通过--user-data-dir覆盖。
     • Windows：%USERPROFILE%\AppData\Local\ms-playwright\mcp-{channel}-profile
     • macOS：~/Library/Caches/ms-playwright/mcp-{channel}-profile
     • Linux：~/.cache/ms-playwright/mcp-{channel}-profile
   • 隔离模式：每次会话独立，关闭后状态清空，支持通过contextOptions或--storage-state初始化状态。

配置文件 schema

通过JSON文件配置服务器行为，支持以下字段：

浏览器配置（browser）

• browserName：指定浏览器类型（chromium/firefox/webkit）。
• isolated：是否启用隔离模式（内存中保存配置，不写入磁盘）。
• userDataDir：持久化配置文件路径。
• launchOptions：浏览器启动参数（如headless无头模式、executablePath执行路径等）。
• contextOptions：浏览器上下文参数（如viewport视口尺寸）。
• cdpEndpoint/remoteEndpoint：连接现有浏览器或远程Playwright服务器。

服务器配置（server）

• port：监听端口（默认未指定）。
• host：绑定主机（默认localhost）。

功能开关（capabilities）

启用核心功能模块，可选值：core（基础自动化）、tabs（标签页管理）、pdf（PDF生成）、history（浏览历史）等。

其他配置

• vision：是否启用视觉模式（基于截图交互，需搭配支持坐标的模型）。
• outputDir：输出文件存储目录。
• network：网络请求白名单/黑名单（allowedOrigins/blockedOrigins）。
• noImageResponses：是否禁止发送图片响应。

部署方式

独立服务器

                    
bash

                    # 启动命令（指定端口，支持SSE传输）  
npx @playwright/mcp@latest --port 8931  

# MCP客户端配置  
{  
  "mcpServers": {  
    "playwright": {  
      "url": "http://localhost:8931/sse"  
    }  
  }  
}  

Docker部署

                    
bash

                    # 拉取官方镜像（仅支持无头Chromium）  
{  
  "mcpServers": {  
    "playwright": {  
      "command": "docker",  
      "args": ["run", "-i", "--rm", "--init", "--pull=always", "mcr.microsoft.com/playwright/mcp"]  
    }  
  }  
}  

# 自建镜像  
docker build -t mcr.microsoft.com/playwright/mcp .  

编程式调用

                    
javascript

                    import http from 'http';  
import { createConnection } from '@playwright/mcp';  
import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';  

http.createServer(async (req, res) => {  
  const connection = await createConnection({ browser: { launchOptions: { headless: true } } });  
  const transport = new SSEServerTransport('/messages', res);  
  await connection.connect(transport);  
});  

交互工具列表

基础操作

工具名称	中文标题	功能描述	参数说明	只读
browser_snapshot	页面快照	捕获当前页面的无障碍化快照（优于截图）	无	✅
browser_click	点击操作	在网页上执行点击操作	- element: 用于获取交互权限的元素描述 - ref: 页面快照中的精确元素引用	❌
browser_drag	鼠标拖拽	在两个元素之间执行拖放操作	- startElement: 源元素描述 - startRef: 源元素引用 - endElement: 目标元素描述 - endRef: 目标元素引用	❌
browser_hover	鼠标悬停	在页面元素上执行悬停操作	- element: 元素描述 - ref: 元素引用	✅
browser_type	文本输入	向可编辑元素中输入文本	- element: 元素描述 - ref: 元素引用 - text: 输入文本 - submit: 是否提交（可选） - slowly: 是否逐字符输入（可选）	❌
browser_select_option	选项选择	在下拉菜单中选择一个或多个选项	- element: 元素描述 - ref: 元素引用 - values: 要选择的值数组	❌
browser_press_key	按键操作	模拟键盘按键操作	- key: 按键名称（如 ArrowLeft 或字符 a）	❌
browser_wait_for	等待条件	等待文本出现/消失或指定时间流逝	- time: 等待时间（秒，可选） - text: 等待出现的文本（可选） - textGone: 等待消失的文本（可选）	✅
browser_file_upload	文件上传	上传一个或多个文件	- paths: 要上传文件的绝对路径数组	❌
browser_handle_dialog	对话框处理	处理页面对话框（确认/取消/输入）	- accept: 是否接受对话框 - promptText: 提示框输入文本（可选）	❌

导航操作

工具名称	中文标题	功能描述	参数说明	只读
browser_navigate	页面导航	导航到指定URL	- url: 目标URL	❌
browser_navigate_back	返回上一页	导航到历史记录的上一页	无	✅
browser_navigate_forward	前进到下一页	导航到历史记录的下一页	无	✅

资源操作

工具名称	中文标题	功能描述	参数说明	只读
browser_take_screenshot	截图	捕获当前页面截图（不可用于交互，仅用于查看）	- raw: 是否返回无损PNG格式（可选） - filename: 保存文件名（可选） - element: 元素描述（可选，需配合 ref） - ref: 元素引用（可选，需配合 element）	✅
browser_pdf_save	保存为PDF	将当前页面保存为PDF文件	- filename: 保存文件名（可选）	✅
browser_network_requests	网络请求列表	返回自页面加载以来的所有网络请求记录	无	✅
browser_console_messages	控制台消息	返回页面的所有控制台消息	无	✅

实用工具

工具名称	中文标题	功能描述	参数说明	只读
browser_install	安装浏览器	安装配置文件中指定的浏览器	无	❌
browser_close	关闭浏览器	关闭当前页面	无	✅
browser_resize	调整窗口大小	调整浏览器窗口尺寸	- width: 宽度（像素） - height: 高度（像素）	✅

标签页管理

工具名称	中文标题	功能描述	参数说明	只读
browser_tab_list	列出标签页	获取当前所有打开的标签页列表	无	✅
browser_tab_new	新建标签页	打开一个新标签页	- url: 新标签页导航的URL（可选）	✅
browser_tab_select	切换标签页	通过索引选择指定标签页	- index: 标签页索引（从0开始）	✅
browser_tab_close	关闭标签页	关闭指定标签页（默认关闭当前标签页）	- index: 标签页索引（可选）	❌

测试工具

工具名称	中文标题	功能描述	参数说明	只读
browser_generate_playwright_test	生成测试用例	根据操作步骤生成Playwright测试代码	- name: 测试名称 - description: 测试描述 - steps: 测试步骤数组	✅

视觉模式（Vision Mode）

工具名称	中文标题	功能描述	参数说明	只读
browser_screen_capture	屏幕截图	捕获当前页面截图（用于视觉交互）	无	✅
browser_screen_move_mouse	鼠标移动	将鼠标移动到指定坐标位置	- element: 元素描述 - x: X坐标 - y: Y坐标	✅
browser_screen_click	屏幕点击	在指定坐标位置执行鼠标左键点击	- element: 元素描述 - x: X坐标 - y: Y坐标	❌
browser_screen_drag	屏幕拖拽	在指定坐标之间执行鼠标左键拖拽操作	- element: 元素描述 - startX: 起始X坐标 - startY: 起始Y坐标 - endX: 结束X坐标 - endY: 结束Y坐标	❌
browser_screen_type	屏幕输入	在当前焦点位置输入文本	- text: 输入文本 - submit: 是否提交（可选）	❌
browser_press_key	按键操作	模拟键盘按键操作（同基础操作）	- key: 按键名称（如 ArrowLeft 或字符 a）	❌
browser_wait_for	等待条件	等待文本出现/消失或指定时间流逝（同基础操作）	- time: 等待时间（秒，可选） - text: 等待出现的文本（可选） - textGone: 等待消失的文本（可选）	✅
browser_file_upload	文件上传	上传一个或多个文件（同基础操作）	- paths: 要上传文件的绝对路径数组	❌
browser_handle_dialog	对话框处理	处理页面对话框（确认/取消/输入，同基础操作）	- accept: 是否接受对话框 - promptText: 提示框输入文本（可选）	❌

说明

• 只读操作：不会修改页面状态，仅用于获取信息。
• 元素引用机制：大多数交互工具需要通过 browser_snapshot 获取的 ref 来精确定位元素，避免视觉歧义。
• 视觉模式：通过截图和坐标进行交互，适用于需要精确像素定位的场景。
• 参数可选性：标有 (optional) 的参数可省略，使用默认值。

资源与文档

• Playwright MCP 官方文档
• 模型上下文协议（MCP）规范
• Playwright API 参考

通过结构化交互与轻量化设计，Playwright MCP为LLM提供了高效、可控的浏览器自动化能力，适用于网页数据提取、自动化测试、动态内容交互等场景。