ui-test-generation-mcp by ingpoc - MCP Server

Playwright UI Test Automation MCP Server

A specialized Model Context Protocol (MCP) server that provides comprehensive UI test automation capabilities for web applications. This server enables intelligent test creation, test healing, and manual test conversion through browser automation.

🎯 Primary Use Cases

1. Create New UI Test Automation

Analyze web applications and generate automated test scripts
Support for multiple frameworks (Playwright, Cypress, Selenium)
Generate tests in JavaScript, TypeScript, or Python
Intelligent element detection and selector generation

2. Heal Broken UI Test Automation

Analyze failing test cases and identify root causes
Compare current page state with test expectations
Automatically suggest fixes for broken selectors or timing issues
Generate healed test code with updated selectors and improved reliability

3. Convert Manual Test Cases to Automation

Transform manual test steps into automated test scripts
Parse natural language test instructions
Map manual actions to browser automation commands
Generate comprehensive test suites from manual test documentation

🚀 Key Features

🔧 Intelligent Test Generation: Automatically creates test automation from web app analysis
🛠️ Test Healing & Recovery: Fixes broken tests by analyzing current page state
📋 Manual Test Conversion: Converts manual test cases to automated scripts
🌐 Multi-Framework Support: Playwright, Cypress, and Selenium compatibility
💻 Multi-Language Output: JavaScript, TypeScript, and Python test generation
🎯 Smart Element Detection: Advanced selector generation with fallback strategies
🔍 Page Analysis Engine: Deep analysis of forms, navigation, and user workflows
🛡️ Enterprise Ready: No external API dependencies, VDI-compatible deployment

📋 Requirements

Node.js 18 or higher
Compatible MCP client (Amazon Q, VS Code, or other MCP-enabled tools)
Modern web browser (Chrome, Firefox, Safari)

🛠️ Installation

Quick Setup

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

MCP Client Configuration

Add to your MCP client configuration file:

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

🎯 Core Tools

Test Generation Tools

generate_test_from_manual_steps - Convert manual test steps to automated code
analyze_test_failure - Analyze and fix broken test automation
create_test_suite - Generate comprehensive test suites from web app exploration

Browser Automation Tools

browser_navigate - Navigate to URLs and pages
browser_snapshot - Capture page structure and accessibility tree
browser_click - Click elements with intelligent targeting
browser_type - Type text into form fields and inputs
browser_evaluate - Execute JavaScript for advanced interactions
browser_take_screenshot - Capture visual evidence for test validation

Analysis & Debugging Tools

browser_console_messages - Monitor console logs and errors
browser_network_requests - Track network activity and API calls
browser_wait_for - Handle dynamic content and timing

💡 Usage Examples

Generate Test from Manual Steps

// 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"
});

Heal Broken Test

// 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"
});

Create Comprehensive Test Suite

// 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
});

🏗️ Architecture

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

The MCP server acts as an intelligent bridge between your MCP client and web applications, providing:

Real-time browser automation for test creation
Intelligent analysis of page structure and user workflows
Automated test generation in multiple frameworks and languages
Test healing capabilities for maintaining test reliability
Enterprise-grade security with local-only operation

🛡️ Enterprise & Security Features

Local Operation Only: All processing happens locally, no external API calls
No Cloud Dependencies: Completely self-contained for secure environments
VDI Compatible: Optimized for Virtual Desktop Infrastructure deployment
Data Privacy: Web application data never leaves your environment
Audit Trail: Complete logging of all automation activities
Access Control: Configurable capabilities and tool filtering

🔧 Configuration Options

Environment Variables

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

Capability Management

The server supports granular capability control:

core - Essential browser automation tools
test-generation - Test creation and healing tools
vision - Visual testing and analysis (optional)
pdf - PDF generation capabilities (optional)

📊 Test Generation Capabilities

Supported Test Frameworks

Playwright - Modern, reliable, cross-browser testing
Cypress - Developer-friendly testing framework
Selenium - Industry-standard web automation

Output Languages

JavaScript - Most common test automation language
TypeScript - Type-safe test development
Python - Popular choice for test automation teams

Test Types Generated

Smoke Tests - Basic functionality verification
Integration Tests - Multi-component workflow testing
Regression Tests - Change impact validation
User Journey Tests - End-to-end user experience testing

🎯 Workflow Examples

New Test Creation Workflow

Navigate to target web application
Analyze page structure and user flows
Generate test automation code
Validate generated tests
Export to your test framework

Test Healing Workflow

Identify failing test cases
Analyze current page state vs. test expectations
Compare element selectors and page structure
Generate healed test code with fixes
Validate repaired test functionality

Manual Test Conversion Workflow

Import manual test case documentation
Parse test steps and expected outcomes
Map manual actions to automation commands
Generate executable test scripts
Review and customize generated automation

🚀 Getting Started

Quick Start Guide

Install the MCP server following the installation instructions
Configure your MCP client (Amazon Q recommended for enterprise use)
Navigate to your web application using browser_navigate
Analyze the application with browser_snapshot for page structure
Generate your first test using generate_test_from_manual_steps
Verify test quality by running the generated automation code

Best Practices

Use descriptive test names that clearly indicate the test purpose
Include assertions to validate expected outcomes
Prefer data-testid attributes for reliable element selection
Test incrementally - start with simple flows, then add complexity
Review generated code before adding to your test suite
Maintain test data separately for better test maintainability

📈 Enterprise Benefits

Accelerated Test Creation: Reduce manual test automation development time by 70%
Improved Test Reliability: Intelligent healing reduces test maintenance overhead
Consistent Quality: Standardized test generation patterns across teams
Knowledge Transfer: Convert manual testing expertise into automated assets
Scalable Testing: Generate comprehensive test coverage efficiently
Cost Effective: Reduce QA automation development and maintenance costs

🔍 Troubleshooting

Common Issues

Test Generation Fails

Ensure web application is fully loaded before analysis
Check that interactive elements are visible and accessible
Verify element selectors are stable and unique

Element Not Found Errors

Use test healing functionality to update selectors
Consider using data-testid attributes for better stability
Check for dynamic content that may require wait conditions

Performance Issues

Increase timeout values for slow-loading applications
Use headless mode for faster execution
Consider element visibility checks before interactions

The Playwright UI Test Automation MCP Server - Transforming manual testing into intelligent automation for modern web applications!# ui-test-generation-mcp