项目简介

Playwright MCP Server 是一个基于 Model Context Protocol (MCP) 构建的服务器,它使用 Playwright 库为大型语言模型 (LLM) 提供强大的浏览器自动化能力。通过此服务器,LLM 可以像人类用户一样与网页进行交互,执行各种浏览器操作,并获取网页信息。

主要功能点

  • 网页导航: 控制浏览器访问指定的 URL。
  • 元素交互: 模拟用户点击、填写表单、悬停等操作,与网页元素进行互动。
  • 截图功能: 截取整个网页或特定元素的屏幕截图。
  • JavaScript 执行: 在浏览器环境中执行 JavaScript 代码,获取动态网页内容或进行复杂操作。
  • API 请求: 支持发送 HTTP GET, POST, PUT, PATCH, DELETE 请求,方便 LLM 与 Web API 交互。
  • 资源管理: 提供对浏览器控制台日志和屏幕截图的访问,作为上下文资源提供给 LLM。

安装步骤

  1. 安装 Node.js 和 npm: 确保你的系统已安装 Node.js 和 npm 包管理器。
  2. 全局安装 Playwright MCP Server: 打开终端,运行以下命令全局安装此 MCP 服务器:
    npm install -g @executeautomation/playwright-mcp-server

服务器配置

要将 Playwright MCP Server 与 MCP 客户端(如 Claude Desktop)配合使用,你需要配置客户端以连接到此服务器。以下是 Claude Desktop 的 JSON 配置文件示例,展示了如何配置 Playwright MCP Server:

{
  "mcpServers": {
    "playwright": {  // "playwright" 是你为该服务器实例自定义的名称,可以修改
      "command": "npx",  // 启动服务器的命令,这里使用 npx 来运行安装的 npm 包
      "args": ["-y", "@executeautomation/playwright-mcp-server"] // 传递给命令的参数,指定要运行的 npm 包名
    }
  }
}
  • 'mcpServers': 定义 MCP 服务器配置的顶级字段。
  • 'playwright': 为当前 Playwright MCP 服务器实例指定的名称。你可以根据需要自定义此名称。
  • 'command': 指定用于启动 MCP 服务器的命令。'npx' 是一个 npm 包执行器,用于运行本地或全局安装的 npm 包。
  • 'args': 一个字符串数组,包含了传递给 'command' 的参数。'["-y", "@executeautomation/playwright-mcp-server"]' 指示 'npx' 运行全局安装的 '@executeautomation/playwright-mcp-server' 包。 '-y' 参数用于跳过 npm 的安装确认提示(如果需要)。

请将以上配置添加到你的 MCP 客户端配置文件中,并确保客户端能够正确读取和应用这些配置。

基本使用方法

  1. 启动 MCP 服务器: 当 MCP 客户端尝试连接配置的 "playwright" 服务器时,服务器将自动启动。你无需手动运行服务器。
  2. 配置 MCP 客户端: 在你的 MCP 客户端中配置上述服务器信息。
  3. 通过 LLM 使用工具: 在 LLM 中,你可以指示其使用 Playwright 提供的工具来操作网页。例如,你可以指示 LLM 执行 "导航到 [URL]"、"点击 [元素选择器]" 或 "截取屏幕截图" 等操作。服务器会将执行结果返回给 LLM,从而实现 LLM 与网页的交互。

注意: 此服务器依赖 Playwright 库进行浏览器操作。首次运行时,Playwright 可能会自动下载浏览器 Chromium, Firefox, 和 WebKit。请确保你的网络连接允许下载这些浏览器。

信息

分类

开发者工具