Ui Test Generation MCP

Playwright UI测试自动化MCP服务器

一个专门的模型上下文协议（MCP）服务器，为web应用程序提供全面的UI测试自动化功能。此服务器通过浏览器自动化实现智能测试创建、测试修复和手动测试转换。

🎯 主要用例

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

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

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

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

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

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

🚀 主要特点

• 🔧 智能测试生成：从web应用程序分析自动创建测试自动化
• 🛠️ 测试愈合和恢复：通过分析当前页面状态修复损坏的测试
• 📋 手动测试转换：将手动测试用例转换为自动脚本
• 🌐 多框架支持：剧作家、Cypress和Selenium兼容性
• 💻 多语言输出：JavaScript、TypeScript和Python测试生成
• 🎯 智能元件检测：具有回退策略的高级选择器生成
• 🔍 页面分析引擎：对表单、导航和用户工作流程进行深入分析
• 🛡️ 企业就绪：无外部API依赖项，与VDI兼容的部署

📋 需求

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

🛠️ 安装

快速设置

git clone 
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 -处理动态内容和时间

💡 使用示例

从手动步骤生成测试

// Manual test steps to automate:
const manualSteps = [
  "Fill in customer name field with 'John Doe'",
  "Enter email address 'john@example.com'",
  "Select 'Medium' from pizza size options",
  "Check 'Extra Cheese' topping",
  "Click 'Submit Order' button",
  "Verify order confirmation appears"
];

// Generate automated test
await generate_test_from_manual_steps({
  manual_steps: manualSteps,
  test_name: "Pizza Order Form Test",
  test_framework: "playwright",
  output_format: "javascript"
});

治愈骨折测试

// Analyze and fix failing test
await analyze_test_failure({
  test_code: `
    await page.click('#submit-btn');
    await expect(page.locator('.success')).toBeVisible();
  `,
  error_message: "Element not found: #submit-btn",
  test_framework: "playwright"
});

创建综合测试套件

// Generate full test suite for web application
await create_test_suite({
  base_url: "https://your-webapp.com",
  test_scenarios: [
    "User login flow",
    "Product search and filtering",
    "Shopping cart operations",
    "Checkout process"
  ],
  framework: "playwright",
  include_assertions: true
});

🏗️ 建筑

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   MCP Client    │◄──►│  MCP Server      │◄──►│  Web Browser    │
│  (Amazon Q)     │    │ Test Generator   │    │ (Live Web App)  │
└─────────────────┘    └──────────────────┘    └─────────────────┘
                                │
                                ▼
                       ┌──────────────────┐
                       │  Generated Tests │
                       │ • Playwright     │
                       │ • Cypress        │
                       │ • Selenium       │
                       └──────────────────┘

MCP服务器充当MCP客户端和web应用程序之间的智能桥梁，提供：

1. 实时浏览器自动化 用于测试创建
2. 智能分析 页面结构和用户工作流程
3. 自动生成测试 在多种框架和语言中
4. 测试愈合能力 用于保持测试可靠性
5. 企业级安全 仅限本地操作

🛡️ 企业和安全功能

• 仅限本地操作：所有处理都在本地进行，没有外部API调用
• 无云依赖：完全独立，适用于安全环境
• VDI兼容：针对虚拟桌面基础架构部署进行了优化
• 数据隐私：Web应用程序数据永远不会离开您的环境
• 审计跟踪：完整记录所有自动化活动
• 访问控制：可配置的功能和工具过滤

🔧 配置选项

环境变量

NODE_ENV=production          # Production mode
BROWSER_TYPE=chromium        # Browser selection (chromium, firefox, webkit)
HEADLESS=true               # Headless browser operation
OUTPUT_DIR=/path/to/output   # Directory for screenshots and logs

能力管理

服务器支持精细的能力控制：

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

📊 测试生成能力

支持的测试框架

• 剧作家 -现代、可靠、跨浏览器测试
• 柏树 -开发人员友好的测试框架
• 硒 -行业标准web自动化

输出语言

• 脚本 -最常见的测试自动化语言
• TypeScript -型式安全试验开发
• python -测试自动化团队的热门选择

生成的测试类型

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

🎯 工作流示例

新测试创建工作流

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

测试修复工作流程

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

手动测试转换工作流程

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

🚀 入门指南

快速入门指南

1. 安装MCP服务器 按照安装说明进行操作
2. 配置您的MCP客户端 （亚马逊Q建议企业使用）
3. 导航到您的web应用程序 使用 browser_navigate
4. 分析应用程序 随着 browser_snapshot 对于页面结构
5. 生成您的第一个测试 使用 generate_test_from_manual_steps
6. 验证测试质量 通过运行生成的自动化代码

最佳实践

• 使用描述性测试名称 清楚地表明测试目的
• 包含断言 验证预期结果
• 更喜欢数据testid属性 用于可靠的元件选择
• 增量测试 -从简单的流程开始，然后增加复杂性
• 审查生成的代码 在添加到测试套件之前
• 维护测试数据 单独进行，以提高测试的可维护性

📈 企业效益

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

🔍 故障排除

常见问题

测试生成失败

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

找不到元素错误

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

性能问题

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

______________________________________________________________________

Playwright UI测试自动化MCP服务器 -将手动测试转变为现代web应用程序的智能自动化！#ui测试生成mcp