返回市场
界面测试生成mcp

界面测试生成mcp

作者:ingpoc2 星标更新:2025-08-03

项目介绍

Playwright UI 测试自动化 MCP 服务器

一个专门的模型上下文协议(MCP)服务器,提供全面的Web应用程序UI测试自动化能力。该服务器通过浏览器自动化实现智能测试创建、测试修复以及手动测试转换。

🎯 主要用例

1. 创建新的UI测试自动化

  • 分析Web应用程序并生成自动化测试脚本
  • 支持多种框架(Playwright、Cypress、Selenium)
  • 在JavaScript、TypeScript或Python中生成测试
  • 智能元素检测和选择器生成

2. 修复损坏的UI测试自动化

  • 分析失败的测试案例并确定根本原因
  • 对比当前页面状态与测试期望
  • 自动建议修复损坏的选择器或定时问题
  • 生成带有更新选择器和改进可靠性的修复测试代码

3. 将手动测试案例转换为自动化

  • 将手动测试步骤转换为自动化测试脚本
  • 解析自然语言测试指令
  • 将手动操作映射到浏览器自动化命令
  • 根据手动测试文档生成完整的测试套件

🚀 关键特性

  • 🔧 智能测试生成:自动从Web应用分析中创建测试自动化
  • 🛠️ 测试修复与恢复:通过分析当前页面状态来修复损坏的测试
  • 📋 手动测试转换:将手动测试案例转换为自动化脚本
  • 🌐 多框架支持:兼容Playwright、Cypress和Selenium
  • 💻 多语言输出:生成JavaScript、TypeScript和Python测试
  • 🎯 智能元素检测:高级选择器生成及回退策略
  • 🔍 页面分析引擎:深入分析表单、导航和用户工作流
  • 🛡️ 企业就绪:无外部API依赖,兼容VDI部署

📋 要求

  • Node.js 18 或更高版本
  • 兼容的MCP客户端(Amazon Q、VS Code或其他MCP启用工具)
  • 现代网络浏览器(Chrome、Firefox、Safari)

🛠️ 安装

快速设置

git clone <repository-url>
cd playwright-test-generator
npm install

MCP客户端配置

在您的MCP客户端配置文件中添加以下内容:

{
  "mcpServers": {
    "playwright-test-automation": {
      "command": "node",
      "args": ["/path/to/playwright-test-generator/cli.js"],
      "env": {
        "NODE_ENV": "production"
      },
      "timeout": 60000
    }
  }
}

🎯 核心工具

测试生成工具

  • generate_test_from_manual_steps - 将手动测试步骤转换为自动化代码
  • analyze_test_failure - 分析并修复损坏的测试自动化
  • create_test_suite - 从Web应用探索生成综合测试套件

浏览器自动化工具

  • browser_navigate - 导航到URL和页面
  • browser_snapshot - 捕获页面结构和可访问性树
  • browser_click - 使用智能目标点击元素
  • browser_type - 向表单字段和输入框中输入文本
  • browser_evaluate - 执行JavaScript进行高级交互
  • browser_take_screenshot - 捕获视觉证据以验证测试

分析与调试工具

  • browser_console_messages - 监控控制台日志和错误
  • browser_network_requests - 跟踪网络活动和API调用
  • browser_wait_for - 处理动态内容和定时

💡 使用示例

从手动步骤生成测试

// 需要自动化的手动测试步骤:
const manualSteps = [
  "在客户姓名字段中填写'John Doe'",
  "输入电子邮件地址'john@example.com'",
  "从披萨尺寸选项中选择'Medium'",
  "勾选'Extra Cheese'配料",
  "点击'Submit Order'按钮",
  "验证订单确认出现"
];

// 生成自动化测试
await generate_test_from_manual_steps({
  manual_steps: manualSteps,
  test_name: "披萨订单表单测试",
  test_framework: "playwright",
  output_format: "javascript"
});

修复损坏的测试

// 分析并修复失败的测试
await analyze_test_failure({
  test_code: `
    await page.click('#submit-btn');
    await expect(page.locator('.success')).toBeVisible();
  `,
  error_message: "未找到元素: #submit-btn",
  test_framework: "playwright"
});

创建综合测试套件

// 为Web应用程序生成完整的测试套件
await create_test_suite({
  base_url: "https://your-webapp.com",
  test_scenarios: [
    "用户登录流程",
    "产品搜索和筛选",
    "购物车操作",
    "结账过程"
  ],
  framework: "playwright",
  include_assertions: true
});

🏗️ 架构

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   MCP客户端    │◄──►│  MCP服务器      │◄──►│  浏览器    │
│  (Amazon Q)     │    │ 测试生成器   │    │ (实时Web应用)  │
└─────────────────┘    └──────────────────┘    └─────────────────┘
                                │
                                ▼
                       ┌──────────────────┐
                       │  生成的测试 │
                       │ • Playwright     │
                       │ • Cypress        │
                       │ • Selenium       │
                       └──────────────────┘

MCP服务器作为MCP客户端和Web应用程序之间的智能桥梁,提供:

  1. 实时浏览器自动化用于测试创建
  2. 智能分析页面结构和用户工作流
  3. 多框架和语言的自动化测试生成
  4. 测试修复能力以维持测试可靠性
  5. 企业级安全性本地操作

🛡️ 企业与安全特性

  • 仅本地操作:所有处理都在本地进行,无外部API调用
  • 无云依赖:完全自包含,适用于安全环境
  • 兼容VDI:优化用于虚拟桌面基础设施部署
  • 数据隐私:Web应用程序数据不会离开您的环境
  • 审计跟踪:完整记录所有自动化活动
  • 访问控制:可配置的能力和工具过滤

🔧 配置选项

环境变量

NODE_ENV=production          # 生产模式
BROWSER_TYPE=chromium        # 浏览器选择(chromium, firefox, webkit)
HEADLESS=true               # 无头浏览器操作
OUTPUT_DIR=/path/to/output   # 截图和日志目录

能力管理

服务器支持细粒度的能力控制:

  • core - 基本浏览器自动化工具
  • test-generation - 测试创建和修复工具
  • vision - 视觉测试和分析(可选)
  • pdf - PDF生成能力(可选)

📊 测试生成能力

支持的测试框架

  • Playwright - 现代、可靠的跨浏览器测试
  • Cypress - 开发者友好的测试框架
  • Selenium - 行业标准的Web自动化

输出语言

  • JavaScript - 最常见的测试自动化语言
  • TypeScript - 类型安全的测试开发
  • Python - 测试自动化团队的流行选择

生成的测试类型

  • 冒烟测试 - 基本功能验证
  • 集成测试 - 多组件工作流测试
  • 回归测试 - 更改影响验证
  • 用户体验测试 - 端到端用户体验测试

🎯 工作流示例

新测试创建工作流

  1. 导航到目标Web应用程序
  2. 分析页面结构和用户工作流
  3. 生成测试自动化代码
  4. 验证生成的测试
  5. 导出到您的测试框架

测试修复工作流

  1. 识别失败的测试案例
  2. 分析当前页面状态与测试期望
  3. 比较元素选择器和页面结构
  4. 生成带有修复的测试代码
  5. 验证修复后的测试功能

手动测试转换工作流

  1. 导入手动测试案例文档
  2. 解析测试步骤和预期结果
  3. 映射手动操作到自动化命令
  4. 生成可执行的测试脚本
  5. 审查并定制生成的自动化

🚀 快速入门

快速开始指南

  1. 安装MCP服务器,按照安装说明进行
  2. 配置您的MCP客户端(推荐企业使用Amazon Q)
  3. 导航到您的Web应用程序,使用browser_navigate
  4. 分析应用程序,使用browser_snapshot获取页面结构
  5. 生成您的第一个测试,使用generate_test_from_manual_steps
  6. 验证测试质量,运行生成的自动化代码

最佳实践

  • 使用描述性测试名称,清楚地表明测试目的
  • 包括断言,以验证预期结果
  • 优先使用data-testid属性,以确保可靠的元素选择
  • 增量测试 - 从简单流程开始,然后增加复杂性
  • 审查生成的代码,在添加到测试套件之前
  • 维护测试数据,单独存储以提高测试可维护性

📈 企业优势

  • 加速测试创建:减少手动测试自动化开发时间70%
  • 提高测试可靠性:智能修复减少了测试维护开销
  • 一致的质量:跨团队标准化测试生成模式
  • 知识转移:将手动测试专业知识转化为自动化资产
  • 可扩展测试:高效生成全面的测试覆盖
  • 成本效益:降低QA自动化开发和维护成本

🔍 故障排除

常见问题

测试生成失败

  • 确保Web应用程序在分析前已完全加载
  • 检查交互元素是否可见且可访问
  • 验证元素选择器是否稳定且唯一

元素未找到错误

  • 使用测试修复功能更新选择器
  • 考虑使用data-testid属性以获得更好的稳定性
  • 检查可能需要等待条件的动态内容

性能问题

  • 对于加载缓慢的应用程序,增加超时值
  • 使用无头模式以加快执行速度
  • 在交互前考虑元素可见性检查

Playwright UI 测试自动化 MCP 服务器 - 将手动测试转变为现代Web应用程序的智能自动化!