Playwright Server MCP 使用说明

项目简介

Playwright Server MCP 是一个基于 Model Context Protocol (MCP) 构建的服务器，它扩展了 LLM 的能力，使其能够通过 Playwright 提供的工具与网页进行交互。该服务器提供了一系列工具，允许 LLM 控制浏览器行为，例如访问特定网址、截取网页屏幕截图、模拟用户点击和填写表单等操作，从而实现更丰富的基于网页的任务自动化和信息获取。

主要功能点

资源管理 (Resources): 实现了简单的笔记存储系统，虽然示例中资源功能未完全实现，但框架已具备资源管理的基础结构。
Prompt 模板 (Prompts): 提供了一个 'summarize-notes' prompt，用于总结存储的笔记，展示了 prompt 模板的基本概念，尽管示例中 prompt 功能也未完全实现。
工具注册和执行 (Tools): 核心功能是集成了 Playwright 提供的网页自动化工具，包括：
- 'playwright_navigate': 导航到指定 URL。
- 'playwright_screenshot': 截取网页或特定元素的屏幕截图。
- 'playwright_click': 点击网页上的元素。
- 'playwright_fill': 填写网页输入框。
- 'playwright_evaluate': 在浏览器控制台中执行 JavaScript 代码。
- 'playwright_click_text': 点击包含特定文本内容的网页元素。
- 'playwright_get_text_content': 获取网页中所有可见元素的文本内容。
- 'playwright_get_html_content': 获取网页元素的 HTML 内容。
- 'playwright_new_session': 创建新的浏览器会话 (虽然在代码注释中，但实际上已在工具列表中)。

安装步骤

配置 MCP 客户端 (例如 Claude Desktop): 根据您的 MCP 客户端类型，配置 MCP 服务器连接。以 Claude Desktop 为例，需要修改配置文件 'claude_desktop_config.json'。
- MacOS: '~/Library/Application\ Support/Claude/claude_desktop_config.json'
- Windows: '%APPDATA%/Claude/claude_desktop_config.json'

服务器配置

在 'claude_desktop_config.json' 文件中，您需要在 '"mcpServers"' 字段下添加 Playwright Server MCP 的配置信息。

开发/未发布服务器配置 (适用于开发调试阶段):

{
  "mcpServers": {
    "playwright-server": {
      "command": "uv",
      "args": [
        "--directory",
        "您的Playwright Server MCP项目路径",  // 将 "您的Playwright Server MCP项目路径" 替换为项目实际的绝对路径，例如 "C:\Users\xxxxx\Documents\project\python\mcp\playwright-server"
        "run",
        "playwright-server"
      ]
    }
  }
}

已发布服务器配置 (适用于部署后):

{
  "mcpServers": {
    "playwright-server": {
      "command": "uvx",
      "args": [
        "playwright-server"
      ]
    }
  }
}

配置参数说明:

'"playwright-server"': 服务器名称，在 MCP 客户端中用于标识和调用此服务器。
'"command"': 启动服务器的命令。 'uv' 和 'uvx' 可能是项目使用的包管理和运行工具，具体取决于项目打包和发布方式。如果是直接运行 Python 脚本，command 可能是 'python' 或 'python3'。
'"args"': 传递给启动命令的参数列表。
- 对于开发配置，'"--directory"' 指定项目目录， '"run"' 和 '"playwright-server"' 可能是项目内部定义的运行脚本或命令。
- 对于发布配置， '"uvx"' 可能是用于运行已打包的服务器的命令， '"playwright-server"' 可能是包名或入口点。

请根据实际情况和项目文档调整 'command' 和 'args' 配置。 如果项目有更详细的部署和运行文档，请优先参考项目文档进行配置。

基本使用方法

配置完成后，在支持 MCP 协议的 LLM 客户端中 (例如 Claude 配合配置后的 'claude_desktop_config.json')，您可以通过自然语言指令调用 Playwright Server MCP 提供的工具。例如：

"使用 'playwright_navigate' 工具访问 https://www.example.com"
"使用 'playwright_screenshot' 工具，文件名为 'homepage.png'，截取当前网页的屏幕截图"
"使用 'playwright_click' 工具点击 CSS 选择器为 '#submit-button' 的元素"

LLM 客户端会将这些自然语言指令转换为对 MCP 服务器的工具调用请求，Playwright Server MCP 执行相应的 Playwright 操作，并将结果返回给 LLM 客户端。

注意: 首次使用可能需要先使用 'playwright_new_session' 工具创建新的浏览器会话 (如果 'playwright_navigate' 工具没有自动创建会话的话)。

关键词