AI导哈

浏览器自动化测试工具

一个基于Playwright和MCP协议的浏览器自动化测试工具，提供多种测试场景的功能支持。

  • by adissuffian
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 adissuffian/playwright-mcp-demo

使用说明

Playwright MCP 测试项目

这个项目展示了如何使用Playwright结合模型上下文协议（MCP）来测试网站，并将浏览器自动化作为MCP工具进行暴露。

特点/特性

  • 🎭 表示戏剧或表演（如：戏剧脸谱、表演艺术等） 由Playwright驱动的浏览器自动化 - 全面的网页测试能力
  • 🔧 修理工具、扳手或螺丝刀的象征（常用于表示需要修理或维护的场景） 5种MCP工具 针对不同的测试场景：
    • testHomepage - 基本文本存在性测试
    • clickAndVerify - 交互元素测试
    • fillForm - 表单自动化与提交
    • takeScreenshot - 视觉记录
    • testDemoWebsite - 全面的本地演示测试
  • 🌐 代表“互联网”或“全球网络”的意思。 包含演示网站 - 准备好测试的包含各种元素的HTML页面
  • 📋 翻译成中文是：清单/列表 MCP 服务器 通过标准化协议公开所有工具

可用的MCP工具

1. testHomepage

检查网页是否加载并包含预期文本。

{
  "url": "https://example.com",
  "expectedText": "Example Domain"
}

2. clickAndVerify

点击一个元素并验证预期行为。

{
  "url": "file://./demo-website.html",
  "selector": "#show-button",
  "expectedText": "This content appeared after clicking"
}

3. fillForm

填写并提交表格。

{
  "url": "file://./demo-website.html",
  "formData": {
    "#name-input": "Test User",
    "#country-select": "us"
  },
  "submitSelector": "button[type=submit]"
}

4. takeScreenshot

捕获网页截图。

{
  "url": "https://example.com",
  "filename": "my-screenshot.png"
}

5. testDemoWebsite

对附带的演示网站进行全面测试。

{}

快速设置

先决条件

  • Node.js 17及以上版本
  • npm

安装

# Install dependencies
npm install

# Build the project
npm run build

运行MCP服务器

# Start the MCP server (stdio mode)
node build/playwright-mcp-server.js

测试演示网站

该项目包含一个演示HTML页面（demo-website.html（与：）一起使用：

  • 静态文本内容
  • 交互式按钮
  • 表单元素
  • 导航链接
  • 动态内容区域

快速测试

  1. 打开 demo-website.html 在您的浏览器中打开以查看测试网站
  2. 使用 testDemoWebsite 使用MCP工具对其进行自动化测试

MCP客户端集成

VS Code MCP 扩展

添加到 .vscode/mcp.json：

{
  "servers": {
    "playwright-mcp-server": {
      "type": "stdio", 
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/YOUR/PROJECT/build/playwright-mcp-server.js"]
    }
  }
}

Claude 桌面版

在您的Claude桌面配置中添加：

{
  "mcpServers": {
    "playwright-mcp-server": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/YOUR/PROJECT/build/playwright-mcp-server.js"]
    }
  }
}

示例用法

一旦连接到MCP客户端，您可以：

  1. 测试任何网站：

    • “测试 https://example.com 是否包含 'Example Domain'”
    • 用途 testHomepage 工具

  2. 与页面互动：

    • “点击演示网站上的显示按钮，并验证动态内容是否出现”
    • 用途 clickAndVerify 工具

  3. 自动化表单处理：

    • “请填写演示表单，姓名为‘John’，国家为‘美国’”
    • 用途 fillForm 工具

  4. 以视觉方式记录文档：

    • “对演示网站进行截图”
    • 用途 takeScreenshot 工具

  5. 进行全面测试：

    • “测试演示网站”
    • 用途 testDemoWebsite 工具

项目结构

├── README.md                    # This file
├── package.json                # Dependencies and scripts
├── tsconfig.json               # TypeScript configuration
├── playwright-mcp-server.ts    # Main MCP server implementation
├── demo-website.html           # Demo HTML page for testing
├── demo-runner.ts              # Example programmatic usage (WIP)
├── build/                      # Compiled JavaScript output
│   └── playwright-mcp-server.js
└── .vscode/
    └── mcp.json               # VS Code MCP configuration example

参考文献

⚠️ 注： 替换 /ABSOLUTE/PATH/TO/YOUR/PROJECT/ 在MCP配置中使用您的实际项目路径。

相关 MCP