mcpField
P
Playwright MCP Server

Playwright MCP Server

本地服务
github.com/showfive浏览器自动化887 周前更新
代码仓库

关于 Playwright MCP Server

Playwright MCP Server 通过 Playwright 提供网页导航、文本读取和鼠标交互，适用于需要检查和操作网页的 MCP 客户端。

主要功能

  1. 01导航至指定 URL
  2. 02读取完整或可见页面文本
  3. 03检测交互元素及其坐标
  4. 04模拟鼠标移动、点击、滚动和拖放
  5. 05通过 echo 测试消息

适用场景

  1. 01通过 MCP 客户端读取网页内容
  2. 02在浏览器操作前定位交互元素
  3. 03执行基于鼠标的页面交互
  4. 04用 echo 测试 MCP 连接

MCP 相关

这是一个 MCP 服务，向 MCP 客户端提供 Playwright 导航、页面内容、元素检测和鼠标操作工具。

#playwright#web-scraping#automation

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "playwright-mcp-server-showfive": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli"
      ]
    }
  }
}
启动命令npx -y @smithery/cli

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npm@smithery/cli

工具

还没有获取到工具列表

本地服务需要在你的电脑上运行后才能读取工具，维护者暂未提供工具列表。

详细介绍

Playwright MCP Server

smithery badge

English | 日本語

本项目是一个使用 Model Context Protocol（MCP）提供 Playwright 网页内容检索功能的服务。

功能

  • 页面导航
  • 检索整个页面的内容
  • 检索可见内容
  • 检测交互元素
  • 模拟鼠标操作
  • 用于测试的回显功能

安装

通过 Smithery 安装

通过 Smithery 自动为 Claude Desktop 安装 Playwright MCP Server：

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 }
    • 返回：发送的消息

开发

运行测试
# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Generate coverage report
npm run test:coverage
测试结构
  • tools/*.test.ts：每个工具的功能测试
  • mcp-server.test.ts：MCP 服务功能测试

实现功能

  1. 内容检索

    • 检索整个页面的内容
    • 仅检索可见内容
    • 正确解析 HTML

  2. 交互

    • 检测交互元素并获取其位置信息
    • 模拟鼠标操作（移动、点击、滚动）
    • 支持拖放

  3. 错误处理

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

  4. 灵活配置

    • 选择无头或有头模式
    • 自定义 user agent
    • 设置视口大小

重要说明

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

许可证

ISC

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。