微软开源的一个使用Playwright提供浏览器自动化功能的MCP服务

关键要点

Playwright MCP 是一个基于 Model Context Protocol (MCP) 的浏览器自动化服务器，使用 Playwright 提供功能，适合 LLM 与网页交互。

它通过结构化可访问性快照工作，效率高且无需视觉模型。

安装简单，支持 VS Code 和 GitHub Copilot 代理，适合多种自动化任务。

提供快照模式和视觉模式两种工具模式，覆盖导航、交互和数据捕获等功能。

什么是 Playwright MCP？

调查笔记：Playwright MCP 详尽介绍

Playwright MCP 是一个基于 Model Context Protocol (MCP) 的浏览器自动化服务器，MCP 由 Anthropic 开发，旨在为 AI 助手提供与数据源和工具的标准化连接。Playwright MCP 利用 Playwright 的功能，允许大型语言模型 (LLM) 通过结构化可访问性快照与网页交互，而非依赖截图或视觉模型。这种方法使其在自动化任务中高效且可靠，尤其适合需要与网页交互的 AI 应用。

从提供的资料来看，Playwright MCP 的开发活动近期非常活跃，包括更新 README、添加工作流、导出服务器以支持自定义传输等。提交记录显示，最近的更新包括 browser_choose_file 功能（8 小时前）和默认使用持久配置文件（昨天）。这些更新表明项目处于活跃开发状态，版本号已标记为 v.0.0.6（4 小时前）。

MCP 本身是一个开放标准，旨在解决 AI 系统与数据源隔离的问题。研究表明，MCP 提供了一种通用的连接方式，取代了传统的自定义集成，适用于各种 AI 应用，包括 IDE、聊天界面和自定义工作流。Playwright MCP 作为 MCP 的一个实现，专注于浏览器自动化，特别适合需要与网页交互的 LLM。

Playwright MCP 是一个实现 Model Context Protocol (MCP) 的服务器，MCP 是一个开放标准，旨在连接 AI 助手与各种数据源和工具。Playwright MCP 利用 Playwright 提供浏览器自动化能力，允许大型语言模型 (LLM) 通过结构化可访问性快照与网页交互，而非依赖截图或视觉模型。这种方法使其在自动化任务中高效且可靠。

主要特点

标准化集成：遵循 MCP 标准，确保与广泛的 LLM 应用和工具兼容。
快速轻量：使用 Playwright 的可访问性树而非像素输入，确保操作快速高效。
LLM 友好：完全基于结构化数据运行，适合语言模型处理文本信息。
确定性工具应用：避免截图方法常见的模糊性，确保结果一致性。

使用场景

网页导航和表单填写：自动化浏览和填写网页表单，LLM 可通过结构化数据理解和交互。
数据提取：从网页提取结构化数据，利用可访问性树提高准确性。
自动化测试：使用 LLM 驱动网页应用的自动化测试，确保测试稳健可靠。
通用浏览器交互：使 AI 代理以更人性化的方式控制浏览器操作。

安装与设置

在 VS Code 中安装 Playwright MCP 可与 GitHub Copilot 代理配合使用，提供浏览器自动化能力。安装命令如下：

对于 VS Code：

bash

css 复制代码

code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

对于 VS Code Insiders：

bash

css 复制代码

code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

安装后，服务器可在 VS Code 环境中使用。

安装与设置

安装 Playwright MCP 简单，尤其是在 VS Code 环境中。以下是安装步骤：

VS Code 安装：
- 使用提供的按钮或 VS Code CLI 命令添加服务器。
- 命令示例：
  - 对于 VS Code：
    
    bash
    css 复制代码
```
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'
```
  - 对于 VS Code Insiders：
    
    bash
    css 复制代码
```
code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'
```
- 安装后，服务器可在 VS Code 环境中使用，特别适合与 GitHub Copilot 代理配合。
用户数据目录：
- Playwright MCP 启动 Chrome 浏览器时会使用新配置文件，目录位置如下：
  - Windows：%USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile
  - macOS：~/Library/Caches/ms-playwright/mcp-chrome-profile
  - Linux：~/.cache/ms-playwright/mcp-chrome-profile
- 该目录存储登录信息和其他状态，用户可删除以清除浏览器状态，适合需要隐私保护或重新开始的场景。

运行模式

Playwright MCP 支持多种运行模式，适应不同需求：

Headless 模式：

适合后台或批量操作，无需图形界面。

配置示例：

json

perl 复制代码

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

Headed 模式（Linux 无显示环境）：
- 在无显示环境或 IDE 的工作进程中运行时，使用 --port 标志启用 SSE 传输。
- 命令示例：
  
  bash
  sql 复制代码
```
npx @playwright/mcp@latest --port 8931
```
- 然后在 MCP 客户端配置中设置 URL：
  
  json
  json 复制代码
```
{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/sse"
    }
  }
}
```

工具模式

Playwright MCP 提供两种工具模式，满足不同需求：

快照模式（默认）：
- 使用可访问性快照，提供更好的性能和可靠性。
- 适合需要结构化数据的场景，例如数据提取和自动化测试。
视觉模式：
- 使用截图进行基于视觉的交互，适合需要坐标空间操作的模型。
- 启动服务器时添加 --vision 标志：
  
  json
  perl 复制代码
```
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--vision"
      ]
    }
  }
}
```

可用工具

以下是快照模式和视觉模式下的工具，按功能分组：

功能类别	工具名称	描述
导航	browser_navigate	导航到指定 URL
	browser_go_back	返回上一页
	browser_go_forward	前进到下一页
交互	browser_click	在网页元素上执行点击
	browser_hover	悬停在元素上
	browser_drag	在两个元素间执行拖放
	browser_type	在可编辑元素中输入文本
	browser_select_option	在下拉菜单中选择选项
	browser_choose_file	选择一个或多个文件上传
	browser_press_key	按下键盘上的键
数据捕获	browser_snapshot	捕获当前页面的可访问性快照
	browser_take_screenshot	捕获页面截图（默认 JPEG，可选 PNG）
	browser_save_as_pdf	将页面保存为 PDF
实用工具	browser_wait	等待指定时间（最多 10 秒）
	browser_close	关闭页面

视觉模式下的工具包括导航、截图、鼠标移动、点击、拖放、输入文本、按键、文件选择、保存 PDF、等待和关闭页面，参数基于坐标空间。

编程使用

对于需要更多控制或自定义传输的用户，Playwright MCP 提供 JavaScript API。例如：

javascript

ini 复制代码

import { createServer } from '@playwright/mcp';

const server = createServer({
  launchOptions: { headless: true }
});
transport = new SSEServerTransport("/messages", res);
server.connect(transport);

这允许用户将服务器集成到自己的应用中，增强灵活性。

示例使用

以下是一个简单示例，展示如何导航到 URL 并捕获快照：

启动 Playwright MCP 服务器。
使用 browser_navigate 工具导航到指定 URL。
使用 browser_snapshot 工具捕获快照。
LLM 可使用此快照理解页面结构和内容。

结论

Playwright MCP 利用 Model Context Protocol 提供标准化方式，使 LLM 能够自动化浏览器交互。其对结构化数据和可访问性快照的关注使其高效且可靠，适合从简单导航到复杂数据提取和测试的广泛任务。通过使用 Playwright MCP，开发者可以构建更稳健和可扩展的 AI 应用，轻松集成网页数据源。

关键引用