使用说明

项目简介

Playwright MCP Server 是一个基于 Model Context Protocol (MCP) 构建的应用后端，它利用 Playwright 提供的浏览器自动化能力，为大型语言模型 (LLM) 客户端提供结构化的网页上下文信息和交互工具。与传统的基于屏幕截图的方法不同，该服务器使用 Playwright 的可访问性树快照，提供更快、更轻量级且更可靠的网页交互方式，无需视觉模型即可操作。

主要功能点

快速轻量: 使用 Playwright 的可访问性树，而非基于像素的输入，性能更高。
LLM友好: 无需视觉模型，直接操作结构化数据，降低了模型复杂度。
确定性工具应用: 避免了基于屏幕截图方法中常见的歧义性，工具执行更精确。
快照模式和视觉模式: 支持基于可访问性快照和屏幕截图两种工具模式，灵活适应不同LLM的需求。
丰富的工具集: 提供网页导航、点击、输入、悬停、拖拽、截图、保存PDF等全面的浏览器操作工具。
资源管理: 提供浏览器控制台日志等资源访问能力。

安装步骤

安装 Node.js 和 npm: 确保您的系统已安装 Node.js 和 npm (Node.js 包管理器)。
安装 Playwright MCP 包: 在您的项目目录中，使用 npm 安装 '@playwright/mcp' 包：
```
npm install @playwright/mcp
```

服务器配置

MCP 客户端需要配置 MCP 服务器的启动命令 (command) 及其参数 (args) 才能建立连接。以下是 Playwright MCP 服务器的 JSON 格式配置信息，您可以根据需要选择合适的模式和参数：

配置示例 1: 默认模式 (快照模式) 启动无头浏览器

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

'command': 启动服务器的命令，这里使用 'npx' 来运行本地安装的 '@playwright/mcp' 包。
'args': 传递给服务器命令的参数，这里没有额外参数，默认以快照模式和无头模式运行。

配置示例 2: 视觉模式启动无头浏览器

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

'--vision': 参数用于启用视觉模式，服务器将使用屏幕截图进行交互。

配置示例 3: 启动有头浏览器 (需要图形界面)

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

移除 '--headless' 参数即可启动有头浏览器。

配置示例 4: 连接到已运行的 Playwright Server (适用于 Linux 无 DISPLAY 环境) 首先，在一个具有 DISPLAY 环境变量的环境中运行 Playwright server:

npx playwright run-server

然后，在 MCP 客户端配置中添加 'env' 字段，指定 'PLAYWRIGHT_WS_ENDPOINT' 环境变量，其值为上面 'playwright run-server' 命令输出的 WebSocket 端点地址。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ],
      "env": {
        "PLAYWRIGHT_WS_ENDPOINT": "ws://localhost:<port>/"  // 替换为实际的 WebSocket 端点地址
      }
    }
  }
}

基本使用方法

启动 MCP 服务器: 根据上述配置示例，配置 MCP 客户端以启动 Playwright MCP 服务器。客户端会通过标准输入/输出 (stdio) 与服务器进行通信。
LLM 客户端发送请求: LLM 客户端根据 MCP 协议规范，向 Playwright MCP 服务器发送 JSON-RPC 请求。
- 例如，客户端可以发送 'tools/list' 请求获取可用的工具列表。
- 发送 'tools/call' 请求调用特定工具，如 'browser_navigate' (导航到网页), 'browser_click' (点击网页元素), 'browser_snapshot' (获取网页快照) 等。
- 发送 'resources/list' 请求获取可用资源列表，如浏览器控制台。
- 发送 'resources/read' 请求读取特定资源的内容。
服务器处理请求并返回响应: Playwright MCP 服务器接收到请求后，会调用 Playwright 提供的 API 执行相应的浏览器操作，并将结果封装成 JSON-RPC 响应返回给客户端。
LLM 客户端接收响应: LLM 客户端解析服务器返回的响应，并根据响应内容进行后续处理，例如，根据网页快照分析页面内容，或者根据工具执行结果进行下一步操作。

通过这种方式，LLM 客户端可以利用 Playwright MCP 服务器提供的浏览器自动化能力，实现与网页的智能交互，完成各种基于网页的任务。

关键词