🚀 Playwright 服务器 MCP 服务器

本项目的 MCP 服务器集成了 playwright 工具，实现了简单的笔记存储系统，同时提供了一系列实用工具及提示功能，可助力开发者高效开展相关工作。

🚀 快速开始

安装

Claude Desktop

在 MacOS 上：~/Library/Application\ 支持/Claude/claude_desktop_config.json 在 Windows 上：%APPDATA%/Claude/claude_desktop_config.json%

{
  "playwright": {
    "server": {
      "port": 3000,
      "host": "localhost"
    }
  }
}

{
  "playwright": {
    "server": {
      "port": 80,
      "host": "0.0.0.0"
    }
  }
}

开发流程

克隆仓库

使用以下命令克隆 Playwright 服务器仓库：

git clone https://github.com/your-username/playwright-server.git
cd playwright-server

安装依赖项

运行以下命令安装项目所需的依赖项：

npm install

启动开发服务器

使用以下命令启动 Playwright 服务器：

npm run dev

打包和构建

要打包和构建生产版本，请运行以下命令：

npm run build

调试

为了调试，您可以访问以下端点：

• API 文档：/api/docs
• 性能监控：/api/healthz

要使用 MCP Inspector 进行调试，请按照以下步骤操作：

1. 安装 MCP Inspector：

npm install -g @playwright/mcp-inspector

2. 启动 MCP Inspector 以分析 Playwright 服务器：

mcp-inspect http://localhost:3000

这样，您就可以在 MCP Inspector 的用户界面中查看和分析 Playwright 服务器的性能。

✨ 主要特性

组件

资源

该服务器实现了一个简单的笔记存储系统，具有以下特点：

• 自定义 note:// URI 方案用于访问单个笔记。
• 每个笔记资源包含名称、描述和 text/plain MIME 类型。

提示

该服务器提供一个提示：

• summarize-notes：生成所有存储笔记的摘要。
  • 可选 "style" 参数来控制详细程度（简短/详细）。
  • 根据当前风格偏好生成组合所有当前笔记的提示。

工具

该服务器实现以下工具：

• playwright_navigate：导航到指定 URL。如果没有活动会话，此操作将自动创建新会话。
  • 需要一个 url 参数（字符串）。
• playwright_screenshot：拍摄当前页面或特定元素的截图。
  • 需要一个 name 参数（字符串）作为截图文件名。
  • 可选 selector 参数（字符串）来指定 CSS 选择器以截取特定元素的截图。如果没有提供选择器，则会拍摄全页截图。
• playwright_click：点击页面上的某个元素，使用 CSS 选择器定位。
  • 需要一个 selector 参数（字符串）来指定需要点击的元素的 CSS 选择器。
• playwright_fill：填写输入字段。
  • 需要一个 selector 参数（字符串）来指定输入字段的 CSS 选择器。
  • 需要一个 value 参数（字符串）来指定要填充的值。
• playwright_evaluate：在浏览器控制台中执行 JavaScript 代码。
  • 需要一个 script 参数（字符串）来指定要执行的 JavaScript 代码。
• playwright_click_text：通过文本内容点击页面上的某个元素。
  • 需要一个 text 参数（字符串）来指定需要点击的元素的文本内容。
• playwright_get_text_content：获取所有可见元素的文本内容。
• playwright_get_html_content：获取页面的 HTML 内容。
  • 需要一个 selector 参数（字符串）来指定元素的 CSS 选择器。

🔧 技术细节

调试

为了方便调试，服务器提供了以下端点：

• API 文档：/api/docs，可通过该端点查看详细的 API 信息。
• 性能监控：/api/healthz，用于监控服务器的性能状况。

同时，还可以使用 MCP Inspector 进行调试，具体步骤如下：

1. 安装 MCP Inspector：

npm install -g @playwright/mcp-inspector

2. 启动 MCP Inspector 以分析 Playwright 服务器：

mcp-inspect http://localhost:3000

通过以上操作，您可以在 MCP Inspector 的用户界面中查看和分析 Playwright 服务器的性能。