Playwright HTML Render

MCP服务器-Playwright HTML渲染

该项目通过MCP（模型上下文协议）公开HTML分析和更正功能。

🚀 安装

npm install

确保您已经在中配置了Mistral API密钥 .env 文件：

MISTRAL_API_KEY=your-api-key

📖 用法

选项1：与npx一起使用（无需安装）

您可以直接使用此MCP服务器 npx 在不克隆存储库的情况下：

npx github:gplanchat/server-playwright

MCP服务器通过stdio（标准输入/输出）进行通信，允许MCP客户端连接到它。

备注：确保你有 MISTRAL_API_KEY 环境变量集，或创建 .env 您当前目录中的文件。

选项2：本地安装

如果您已经克隆了存储库：

npm install
npm run mcp

光标配置

要将此MCP服务器与Cursor一起使用，请将以下配置添加到Cursor设置中：

1. 打开光标设置
2. 搜索“MCP”或“模型上下文协议”
3. 添加以下配置：

使用npx（推荐）：

{
  "mcpServers": {
    "playwright-html-render": {
      "command": "npx",
      "args": ["-y", "github:gplanchat/server-playwright"],
      "env": {
        "MISTRAL_API_KEY": "your-api-key"
      }
    }
  }
}

使用本地安装：

{
  "mcpServers": {
    "playwright-html-render": {
      "command": "node",
      "args": ["/path/to/server-playwright/src/mcp-server.js"],
      "env": {
        "MISTRAL_API_KEY": "your-api-key"
      }
    }
  }
}

备注:

• 对于npx的使用 -y flag自动接受包安装提示
• 对于本地安装，请更换 /path/to/server-playwright 拥有通往项目的绝对路径

Claude桌面配置

要与Claude Desktop一起使用，请修改MCP配置文件（通常 ~/Library/Application Support/Claude/claude_desktop_config.json 在macOS或 %APPDATA%\Claude\claude_desktop_config.json 在Windows上）：

使用npx（推荐）：

{
  "mcpServers": {
    "playwright-html-render": {
      "command": "npx",
      "args": ["-y", "github:gplanchat/server-playwright"],
      "env": {
        "MISTRAL_API_KEY": "your-api-key"
      }
    }
  }
}

使用本地安装：

{
  "mcpServers": {
    "playwright-html-render": {
      "command": "node",
      "args": ["/path/to/server-playwright/src/mcp-server.js"],
      "env": {
        "MISTRAL_API_KEY": "your-api-key"
      }
    }
  }
}

🛠️ 可用工具

MCP服务器公开了以下工具：

1. capture_html_render

捕获HTML页面的呈现（屏幕截图、DOM、元数据）。

参数：

• htmlPath （必填）：HTML文件或URL的路径
• viewport （可选）：视口大小 { width: 1920, height: 1080 }
• fullPage （可选）：捕获整个页面（默认值： false)

使用示例：

{
  "name": "capture_html_render",
  "arguments": {
    "htmlPath": "https://example.com",
    "viewport": { "width": 1920, "height": 1080 }
  }
}

2. analyze_html_render

使用AI视觉分析HTML渲染以检测问题。

参数：

• screenshotPath （必填）：截图PNG文件的路径
• domPath （必填）：DOM HTML文件的路径
• metadataPath （必填）：元数据JSON文件的路径
• criteria （可选）：分析标准（默认值： "default")

使用示例：

{
  "name": "analyze_html_render",
  "arguments": {
    "screenshotPath": "output/example-1234567890.png",
    "domPath": "output/example-1234567890.html",
    "metadataPath": "output/example-1234567890.json",
    "criteria": "default"
  }
}

3. fix_html_render

基于分析修复HTML文件。

参数：

• originalHtmlPath （必填）：原始HTML文件的路径
• analysisPath （必填）：分析JSON文件的路径
• autoApply （可选）：自动应用更正（默认值： false)

使用示例：

{
  "name": "fix_html_render",
  "arguments": {
    "originalHtmlPath": "example.html",
    "analysisPath": "output/analysis-1234567890.json",
    "autoApply": false
  }
}

4. test_and_fix_html

测试并修复完整的HTML渲染（捕获+分析+校正）。

参数：

• htmlPath （必填）：HTML文件或URL的路径
• viewport （可选）：视口大小 { width: 1920, height: 1080 }
• autoFix （可选）：自动生成更正（默认值： false)
• criteria （可选）：分析标准（默认值： "default")

使用示例：

{
  "name": "test_and_fix_html",
  "arguments": {
    "htmlPath": "https://example.com",
    "viewport": { "width": 1920, "height": 1080 },
    "autoFix": true,
    "criteria": "default"
  }
}

5. verify_html_render

验证HTML呈现是否与预期的详细描述或CSS规范匹配。

参数：

• htmlPath （必填）：要验证的HTML文件或URL的路径
• expectedDescription （必填）：预期渲染或CSS规范的详细说明
• viewport （可选）：视口大小 { width: 1920, height: 1080 }
• fullPage （可选）：捕获整个页面（默认值： false)
• verificationType （可选）：验证类型- "auto" （自动检测）， "description" （文本描述）， "css" （CSS规范）（默认值： "auto")

带有文字描述的示例：

{
  "name": "verify_html_render",
  "arguments": {
    "htmlPath": "https://example.com",
    "expectedDescription": "The page must contain a header with a logo on the left, a centered navigation menu with 5 links (Home, About, Services, Portfolio, Contact), and a 'Contact Us' button on the right. The header must have a white background and a height of 80px.",
    "verificationType": "description"
  }
}

CSS规范示例：

{
  "name": "verify_html_render",
  "arguments": {
    "htmlPath": "example.html",
    "expectedDescription": ".header { background-color: #ffffff; height: 80px; display: flex; align-items: center; justify-content: space-between; } .logo { width: 150px; height: 50px; } .nav-menu { display: flex; gap: 20px; } .nav-menu a { color: #333; text-decoration: none; }",
    "verificationType": "css"
  }
}

答复：

{
  "success": true,
  "conform": true,
  "score": 95,
  "discrepanciesCount": 1,
  "discrepancies": [
    {
      "severity": "minor",
      "property": "gap",
      "expected": "20px",
      "actual": "15px",
      "selector": ".nav-menu",
      "description": "The spacing between menu items is 15px instead of 20px",
      "suggested_fix": "Add gap: 20px; to .nav-menu"
    }
  ],
  "verificationPath": "output/verification-1234567890.md",
  "resultPath": "output/verification-1234567890.json"
}

🧪 MCP检验员测试

您可以使用官方检查员测试MCP服务器：

npx @modelcontextprotocol/inspector node src/mcp-server.js

这将打开一个web界面来测试可用的工具。

📝 备注

• MCP服务器使用stdio进行通信，因此必须由MCP客户端启动
• 生成的文件保存在 output/ 文件夹
• 确保安装了Playwright： npx playwright install chromium
• 分析和校正工具需要Mistral API密钥

📚 其他文件

• NPX_USAGE.md -服务器使用指南 npx 不进行克隆
• QUICKSTART.md -快速入门指南
• MISTRAL_SETUP.md -Mistral AI配置指南
• 集成.md -AI代理集成指南

🔧 故障排除

服务器无法启动

检查：

• 已安装Node.js 18+
• 已安装依赖项(npm install)
• 已配置Mistral API密钥

捕获错误

确保安装了Playwright：

npx playwright install chromium

分析错误

验证您的Mistral API密钥是否有效，以及您是否有可用的信用。