概述
工具列表
内容详情
替代品
什么是Playwright MCP?
Playwright MCP是一个提供浏览器自动化能力的服务器,允许通过结构化数据而非传统截图方式与网页交互。它特别为大型语言模型(LLM)优化,无需依赖视觉模型即可操作网页。如何使用Playwright MCP?
只需在支持的客户端(如VS Code、Cursor等)中安装配置即可使用。服务器会提供网页的结构化快照,让LLM能准确理解和操作页面元素。适用场景
网页自动化测试、数据抓取、无障碍测试、LLM网页交互训练等需要精确控制浏览器的场景。主要功能
优势与局限性
如何使用
使用案例
常见问题
相关资源
安装
🚀 Playwright MCP
Playwright MCP 是一个模型上下文协议(MCP)服务器,它借助 Playwright 提供浏览器自动化功能。该服务器使大语言模型(LLMs)能够通过结构化的无障碍快照与网页进行交互,无需使用截图或经过视觉调整的模型。
✨ 主要特性
- 快速轻量:使用 Playwright 的无障碍树,而非基于像素的输入。
- 对大语言模型友好:无需视觉模型,完全基于结构化数据运行。
- 工具应用确定性高:避免了基于截图方法常见的歧义问题。
📦 安装指南
要求
- Node.js 18 或更高版本
- VS Code、Cursor、Windsurf、Claude Desktop、Goose 或其他 MCP 客户端
开始安装
首先,将 Playwright MCP 服务器与你的客户端一起安装。
标准配置适用于大多数工具:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}
不同客户端的安装方式如下:
Claude Code
使用 Claude Code CLI 添加 Playwright MCP 服务器:
claude mcp add playwright npx @playwright/mcp@latest
Claude Desktop
遵循 MCP 安装 指南,使用上述标准配置。
Cursor
点击按钮安装:
或手动安装:
转到 Cursor 设置
-> MCP
-> 添加新的 MCP 服务器
。自定义名称,使用 命令
类型并输入命令 npx @playwright/mcp
。你还可以通过点击 编辑
来验证配置或添加命令参数。
Gemini CLI
遵循 MCP 安装 指南,使用上述标准配置。
Goose
点击按钮安装:
或手动安装:
转到 高级设置
-> 扩展
-> 添加自定义扩展
。自定义名称,选择类型 STDIO
,并将 命令
设置为 npx @playwright/mcp
。点击 "添加扩展"。
VS Code
点击按钮安装:
或手动安装:
遵循 MCP 安装 指南,使用上述标准配置。你还可以使用 VS Code CLI 安装 Playwright MCP 服务器:
# 对于 VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'
安装完成后,Playwright MCP 服务器将可在 VS Code 中与你的 GitHub Copilot 代理一起使用。
Windsurf
遵循 Windsurf MCP 文档。使用上述标准配置。
📚 详细文档
配置
Playwright MCP 服务器支持以下参数。这些参数可以在上述 JSON 配置中的 "args"
列表中提供:
> npx @playwright/mcp@latest --help
--allowed-origins <origins> 允许浏览器请求的源列表,用分号分隔。默认允许所有源。
--blocked-origins <origins> 阻止浏览器请求的源列表,用分号分隔。阻止列表在允许列表之前评估。如果仅使用阻止列表,不匹配阻止列表的请求仍然允许。
--block-service-workers 阻止服务工作者
--browser <browser> 要使用的浏览器或 Chrome 通道,可能的值:chrome、firefox、webkit、msedge。
--caps <caps> 要启用的额外功能列表,用逗号分隔,可能的值:vision、pdf。
--cdp-endpoint <endpoint> 要连接的 CDP 端点。
--config <path> 配置文件的路径。
--device <device> 要模拟的设备,例如:"iPhone 15"
--executable-path <path> 浏览器可执行文件的路径。
--headless 以无头模式运行浏览器,默认是有头模式
--host <host> 服务器绑定的主机。默认是 localhost。使用 0.0.0.0 绑定所有接口。
--ignore-https-errors 忽略 HTTPS 错误
--isolated 将浏览器配置文件保存在内存中,不保存到磁盘。
--image-responses <mode> 是否向客户端发送图像响应。可以是 "allow" 或 "omit",默认为 "allow"。
--no-sandbox 禁用通常会沙盒化的所有进程类型的沙盒。
--output-dir <path> 输出文件的目录路径。
--port <port> SSE 传输监听的端口。
--proxy-bypass <bypass> 要绕过代理的域名列表,用逗号分隔,例如 ".com,chromium.org,.domain.com"
--proxy-server <proxy> 指定代理服务器,例如 "http://myproxy:3128" 或 "socks5://myproxy:8080"
--save-session 是否将 Playwright MCP 会话保存到输出目录。
--save-trace 是否将会话的 Playwright 跟踪保存到输出目录。
--storage-state <path> 隔离会话的存储状态文件的路径。
--user-agent <ua string> 指定用户代理字符串
--user-data-dir <path> 用户数据目录的路径。如果未指定,将创建一个临时目录。
--viewport-size <size> 指定浏览器视口大小(像素),例如 "1280, 720"
用户配置文件
你可以像使用常规浏览器一样使用持久配置文件运行 Playwright MCP(默认方式),也可以在隔离上下文中进行测试会话。
持久配置文件
所有登录信息将存储在持久配置文件中,如果你想清除离线状态,可以在会话之间删除该文件。持久配置文件位于以下位置,你可以使用 --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
隔离模式
在隔离模式下,每个会话都在隔离配置文件中启动。每次你要求 MCP 关闭浏览器时,会话将关闭,并且该会话的所有存储状态将丢失。你可以通过配置的 contextOptions
或 --storage-state
参数为浏览器提供初始存储状态。了解更多关于存储状态的信息 点击这里。
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--isolated",
"--storage-state={path/to/storage.json}"
]
}
}
}
配置文件
Playwright MCP 服务器可以使用 JSON 配置文件进行配置。你可以使用 --config
命令行选项指定配置文件:
npx @playwright/mcp@latest --config path/to/config.json
配置文件架构
```typescript { // 浏览器配置 browser?: { // 要使用的浏览器类型(chromium、firefox 或 webkit) browserName?: 'chromium' | 'firefox' | 'webkit';// 将浏览器配置文件保存在内存中,不保存到磁盘。
isolated?: boolean;
// 用于浏览器配置文件持久化的用户数据目录路径
userDataDir?: string;
// 浏览器启动选项(参见 Playwright 文档)
// @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch
launchOptions?: {
channel?: string; // 浏览器通道(例如 'chrome')
headless?: boolean; // 以无头模式运行
executablePath?: string; // 浏览器可执行文件的路径
// ... 其他 Playwright 启动选项
};
// 浏览器上下文选项
// @see https://playwright.dev/docs/api/class-browser#browser-new-context
contextOptions?: {
viewport?: { width: number, height: number };
// ... 其他 Playwright 上下文选项
};
// 用于连接现有浏览器的 CDP 端点
cdpEndpoint?: string;
// 远程 Playwright 服务器端点
remoteEndpoint?: string;
},
// 服务器配置 server?: { port?: number; // 监听的端口 host?: string; // 绑定的主机(默认:localhost) },
// 额外功能列表 capabilities?: Array< 'tabs' | // 标签管理 'install' | // 浏览器安装 'pdf' | // PDF 生成 'vision' | // 基于坐标的交互
;
// 输出文件的目录 outputDir?: string;
// 网络配置
network?: {
// 允许浏览器请求的源列表。默认允许所有源。同时匹配 allowedOrigins
和 blockedOrigins
的源将被阻止。
allowedOrigins?: string[];
// 阻止浏览器请求的源列表。同时匹配 `allowedOrigins` 和 `blockedOrigins` 的源将被阻止。
blockedOrigins?: string[];
};
/**
- 是否向客户端发送图像响应。可以是 "allow" 或 "omit"。
- 默认为 "allow"。 */ imageResponses?: 'allow' | 'omit'; }
</details>
### 独立 MCP 服务器
当在没有显示器的系统上运行有头浏览器或从 IDE 的工作进程中运行时,从具有 DISPLAY 环境的环境中运行 MCP 服务器,并传递 `--port` 标志以启用 HTTP 传输。
```bash
npx @playwright/mcp@latest --port 8931
然后在 MCP 客户端配置中,将 url
设置为 HTTP 端点:
{
"mcpServers": {
"playwright": {
"url": "http://localhost:8931/mcp"
}
}
}
Docker
注意: 目前 Docker 实现仅支持无头 Chromium。
{
"mcpServers": {
"playwright": {
"command": "docker",
"args": ["run", "-i", "--rm", "--init", "--pull=always", "mcr.microsoft.com/playwright/mcp"]
}
}
}
你可以自己构建 Docker 镜像。
docker build -t mcr.microsoft.com/playwright/mcp .
编程式使用
```js import http from 'http';import { createConnection } from '@playwright/mcp'; import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';
http.createServer(async (req, res) => { // ...
// 创建一个具有 SSE 传输的无头 Playwright MCP 服务器 const connection = await createConnection({ browser: { launchOptions: { headless: true } } }); const transport = new SSEServerTransport('/messages', res); await connection.sever.connect(transport);
// ... });
</details>
### 工具
#### 核心自动化
<details>
<summary><b>核心自动化</b></summary>
- **browser_click**
- 标题:点击
- 描述:在网页上执行点击操作
- 参数:
- `element` (字符串):用于获取与元素交互权限的人类可读元素描述
- `ref` (字符串):页面快照中确切的目标元素引用
- `doubleClick` (布尔值,可选):是否执行双击而不是单击
- `button` (字符串,可选):要点击的按钮,默认为左键
- 只读:**否**
- **browser_close**
- 标题:关闭浏览器
- 描述:关闭页面
- 参数:无
- 只读:**是**
- **browser_console_messages**
- 标题:获取控制台消息
- 描述:返回所有控制台消息
- 参数:无
- 只读:**是**
- **browser_drag**
- 标题:拖动鼠标
- 描述:在两个元素之间执行拖放操作
- 参数:
- `startElement` (字符串):用于获取与源元素交互权限的人类可读元素描述
- `startRef` (字符串):页面快照中确切的源元素引用
- `endElement` (字符串):用于获取与目标元素交互权限的人类可读元素描述
- `endRef` (字符串):页面快照中确切的目标元素引用
- 只读:**否**
- **browser_evaluate**
- 标题:评估 JavaScript
- 描述:在页面或元素上评估 JavaScript 表达式
- 参数:
- `function` (字符串):() => { /* 代码 */ } 或 (element) => { /* 代码 */ }(当提供元素时)
- `element` (字符串,可选):用于获取与元素交互权限的人类可读元素描述
- `ref` (字符串,可选):页面快照中确切的目标元素引用
- 只读:**否**
- **browser_file_upload**
- 标题:上传文件
- 描述:上传一个或多个文件
- 参数:
- `paths` (数组):要上传文件的绝对路径。可以是单个文件或多个文件。
- 只读:**否**
- **browser_handle_dialog**
- 标题:处理对话框
- 描述:处理对话框
- 参数:
- `accept` (布尔值):是否接受对话框。
- `promptText` (字符串,可选):在提示对话框的情况下输入的文本。
- 只读:**否**
- **browser_hover**
- 标题:悬停鼠标
- 描述:在页面上悬停在元素上
- 参数:
- `element` (字符串):用于获取与元素交互权限的人类可读元素描述
- `ref` (字符串):页面快照中确切的目标元素引用
- 只读:**是**
- **browser_navigate**
- 标题:导航到 URL
- 描述:导航到指定 URL
- 参数:
- `url` (字符串):要导航到的 URL
- 只读:**否**
- **browser_navigate_back**
- 标题:返回上一页
- 描述:返回上一个页面
- 参数:无
- 只读:**是**
- **browser_navigate_forward**
- 标题:前进到下一页
- 描述:前进到下一个页面
- 参数:无
- 只读:**是**
- **browser_network_requests**
- 标题:列出网络请求
- 描述:返回自页面加载以来的所有网络请求
- 参数:无
- 只读:**是**
- **browser_press_key**
- 标题:按下键
- 描述:在键盘上按下一个键
- 参数:
- `key` (字符串):要按下的键的名称或要生成的字符,例如 `ArrowLeft` 或 `a`
- 只读:**否**
- **browser_resize**
- 标题:调整浏览器窗口大小
- 描述:调整浏览器窗口大小
- 参数:
- `width` (数字):浏览器窗口的宽度
- `height` (数字):浏览器窗口的高度
- 只读:**是**
- **browser_select_option**
- 标题:选择选项
- 描述:在下拉菜单中选择一个选项
- 参数:
- `element` (字符串):用于获取与元素交互权限的人类可读元素描述
- `ref` (字符串):页面快照中确切的目标元素引用
- `values` (数组):要在下拉菜单中选择的值的数组。可以是单个值或多个值。
- 只读:**否**
- **browser_snapshot**
- 标题:页面快照
- 描述:捕获当前页面的无障碍快照,这比截图更好
- 参数:无
- 只读:**是**
- **browser_take_screenshot**
- 标题:截图
- 描述:对当前页面进行截图。你不能基于截图执行操作,请使用 browser_snapshot 进行操作。
- 参数:
- `raw` (布尔值,可选):是否返回未压缩的图像(PNG 格式)。默认为 false,返回 JPEG 图像。
- `filename` (字符串,可选):保存截图的文件名。如果未指定,默认为 `page-{timestamp}.{png|jpeg}`。
- `element` (字符串,可选):用于获取对元素进行截图权限的人类可读元素描述。如果未提供,将对视口进行截图。如果提供了元素,也必须提供 ref。
- `ref` (字符串,可选):页面快照中确切的目标元素引用。如果未提供,将对视口进行截图。如果提供了 ref,也必须提供元素。
- `fullPage` (布尔值,可选):当为 true 时,对整个可滚动页面进行截图,而不是当前可见的视口。不能与元素截图一起使用。
- 只读:**是**
- **browser_type**
- 标题:输入文本
- 描述:在可编辑元素中输入文本
- 参数:
- `element` (字符串):用于获取与元素交互权限的人类可读元素描述
- `ref` (字符串):页面快照中确切的目标元素引用
- `text` (字符串):要输入到元素中的文本
- `submit` (布尔值,可选):是否提交输入的文本(之后按 Enter 键)
- `slowly` (布尔值,可选):是否逐个字符输入。对于触发页面中的按键处理程序很有用。默认情况下,整个文本一次性填充。
- 只读:**否**
- **browser_wait_for**
- 标题:等待
- 描述:等待文本出现或消失,或等待指定时间过去
- 参数:
- `time` (数字,可选):要等待的时间(秒)
- `text` (字符串,可选):要等待出现的文本
- `textGone` (字符串,可选):要等待消失的文本
- 只读:**是**
</details>
#### 标签管理
<details>
<summary><b>标签管理</b></summary>
- **browser_tab_close**
- 标题:关闭标签
- 描述:关闭一个标签
- 参数:
- `index` (数字,可选):要关闭的标签的索引。如果未提供,则关闭当前标签。
- 只读:**否**
- **browser_tab_list**
- 标题:列出标签
- 描述:列出浏览器标签
- 参数:无
- 只读:**是**
- **browser_tab_new**
- 标题:打开新标签
- 描述:打开一个新标签
- 参数:
- `url` (字符串,可选):在新标签中要导航到的 URL。如果未提供,新标签将为空。
- 只读:**是**
- **browser_tab_select**
- 标题:选择标签
- 描述:按索引选择一个标签
- 参数:
- `index` (数字):要选择的标签的索引
- 只读:**是**
</details>
#### 浏览器安装
<details>
<summary><b>浏览器安装</b></summary>
- **browser_install**
- 标题:安装配置中指定的浏览器
- 描述:安装配置中指定的浏览器。如果遇到浏览器未安装的错误,请调用此工具。
- 参数:无
- 只读:**否**
</details>
#### 基于坐标的操作(通过 --caps=vision 启用)
<details>
<summary><b>基于坐标的操作(通过 --caps=vision 启用)</b></summary>
- **browser_mouse_click_xy**
- 标题:点击
- 描述:在给定位置点击鼠标左键
- 参数:
- `element` (字符串):用于获取与元素交互权限的人类可读元素描述
- `x` (数字):X 坐标
- `y` (数字):Y 坐标
- 只读:**否**
- **browser_mouse_drag_xy**
- 标题:拖动鼠标
- 描述:将鼠标左键拖动到给定位置
- 参数:
- `element` (字符串):用于获取与元素交互权限的人类可读元素描述
- `startX` (数字):起始 X 坐标
- `startY` (数字):起始 Y 坐标
- `endX` (数字):结束 X 坐标
- `endY` (数字):结束 Y 坐标
- 只读:**否**
- **browser_mouse_move_xy**
- 标题:移动鼠标
- 描述:将鼠标移动到给定位置
- 参数:
- `element` (字符串):用于获取与元素交互权限的人类可读元素描述
- `x` (数字):X 坐标
- `y` (数字):Y 坐标
- 只读:**是**
</details>
#### PDF 生成(通过 --caps=pdf 启用)
<details>
<summary><b>PDF 生成(通过 --caps=pdf 启用)</b></summary>
- **browser_pdf_save**
- 标题:保存为 PDF
- 描述:将页面保存为 PDF
- 参数:
- `filename` (字符串,可选):保存 PDF 的文件名。如果未指定,默认为 `page-{timestamp}.pdf`。
- 只读:**是**
</details>




精选MCP服务推荐







