Playwright MCP 服务器

English | 日本語

此项目是一个使用模型上下文协议（MCP）提供 Playwright 网页内容检索功能的服务器。

特性

• 页面导航
• 全页面内容检索
• 显示内容检索
• 交互元素检测
• 鼠标操作模拟
• 测试回声功能

安装

通过 Smithery 安装

要通过 Smithery 自动安装 Playwright MCP 服务器到 Claude Desktop：

npx -y @smithery/cli install @showfive/playwright-mcp-server --client claude

手动安装

npm install

使用方法

启动服务器

npm run build
npm start

MCP 工具

以下工具可用：

1. navigate

   • 导航到指定的 URL
   • 参数：{ url: string }
   • 返回值：导航结果

2. get_all_content

   • 检索整个页面的内容
   • 参数：无
   • 返回值：页面中的所有文本内容

3. get_visible_content

   • 检索当前可见的内容
   • 参数：{ minVisiblePercentage?: number }
   • 返回值：可见的文本内容

4. get_interactive_elements

   • 获取页面上交互元素（按钮、链接等）的位置信息
   • 参数：无
   • 返回值：交互元素的坐标和边界信息

5. move_mouse

   • 将鼠标光标移动到指定的坐标
   • 参数：{ x: number, y: number }
   • 返回值：操作结果

6. mouse_click

   • 在指定坐标执行鼠标点击
   • 参数：{ x: number, y: number, button?: "left" | "right" | "middle", clickCount?: number }
   • 返回值：点击操作结果

7. mouse_wheel

   • 执行鼠标滚轮滚动
   • 参数：{ deltaY: number, deltaX?: number }
   • 返回值：滚动操作结果

8. drag_and_drop

   • 执行拖放操作
   • 参数：{ sourceX: number, sourceY: number, targetX: number, targetY: number }
   • 返回值：拖放操作结果

9. echo

   • 测试回声工具
   • 参数：{ message: string }
   • 返回值：发送的消息

开发

运行测试

# 运行所有测试
npm test

# 在监视模式下运行测试
npm run test:watch

# 生成覆盖率报告
npm run test:coverage

测试结构

• tools/*.test.ts: 每个工具的功能测试
• mcp-server.test.ts: MCP 服务器功能测试

实现特性

1. 内容检索

   • 全页面内容检索
   • 仅显示内容检索
   • 正确的 HTML 解析

2. 交互

   • 交互元素的检测和位置信息检索
   • 鼠标操作模拟（移动、点击、滚动）

• 支持拖放

3. 错误处理

   • 正确的导航错误处理
   • 超时处理
   • 无效 URL 检测

4. 配置灵活性

   • 选择无头/有头模式
   • 自定义用户代理
   • 设置视口大小

重要注意事项

• 在使用 MCP 服务器之前，请确保设置必要的环境变量
• 在检索网页内容时，请遵守目标网站的服务条款
• 发送多个请求时，请保持适当的间隔
• 在执行鼠标操作时，请保持适当的间隔，因为它们模拟实际用户交互

许可证

ISC </中文翻译>