返回 MCP 目录
public公开dns本地运行

mcpPlaywright

Playwright MCP是一个基于Playwright的浏览器自动化服务器,通过结构化可访问性快照实现LLM与网页的交互,无需依赖视觉模型或截图。

article

README

🚀 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

点击按钮安装:

Install MCP Server

或手动安装:

转到 Cursor 设置 -> MCP -> 添加新的 MCP 服务器。自定义名称,使用 命令 类型并输入命令 npx @playwright/mcp。你还可以通过点击 编辑 来验证配置或添加命令参数。

Gemini CLI

遵循 MCP 安装 指南,使用上述标准配置。

Goose

点击按钮安装:

Install in Goose

或手动安装:

转到 高级设置 -> 扩展 -> 添加自定义扩展。自定义名称,选择类型 STDIO,并将 命令 设置为 npx @playwright/mcp。点击 "添加扩展"。

LM Studio

点击按钮安装:

Add MCP Server playwright to LM Studio

或手动安装:

转到右侧边栏的 程序 -> 安装 -> 编辑 mcp.json。使用上述标准配置。

Qodo Gen

在 VSCode 或 IntelliJ 中打开 Qodo Gen 聊天面板 → 连接更多工具 → + 添加新的 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?: { // 允许浏览器请求的源列表。默认允许所有源。同时匹配 allowedOriginsblockedOrigins 的源将被阻止。 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>
help

运行方式说明

cloud

托管运行

托管运行通常表示这个 MCP Server 由服务方环境承载,用户一般按页面提供的连接方式或授权流程接入,不需要在本地长期启动一个 MCP 进程

  1. 打开服务方连接页
  2. 完成授权或复制端点
  3. 在 MCP 客户端中连接
terminal

本地运行 / 其它方式

本地运行通常需要用户在自己的电脑或服务器上安装依赖,把 server_config 复制到 MCP 客户端,并按 env_schema 补齐环境变量、密钥或其它配置

  1. 复制 server_config
  2. 安装所需依赖
  3. 补齐环境变量后重启客户端