WIP # - Currently under construction

Playwright_MCP_Explorer

Intelligent Playwright test generation tool using MCP that both autonomously explores websites and generates tests, as well as generates specific scenarios based on the user's verify statements.

MCP-Playwright is a revolutionary automated testing framework that combines the power of Model Context Protocol (MCP) with Playwright to generate comprehensive test suites using natural language descriptions and autonomous website exploration.

Key Features

-AI-Powered Test Generation: Convert natural language statements into robust Playwright tests
-Autonomous Website Exploration-Automatically discover and test website functionality Natural Language Scenarios
-Write tests using simple verify statements
-Smart Selector Generation-Automatically generates resilient, maintainable selectors
-Cross-Browser Testing-Run tests across Chromium, Firefox, and WebKit

1. Natural Language Test Generation Write simple verify statements and let AI generate comprehensive tests:

2. Autonomous Website Exploration Let the system explore websites and generate tests automatically:

Prerequisites Node.js 18+ npm or yarn Git

Installation

1. Clone the repository
git clone https://github.com/yourusername/mcp-playwright-suite.git
,cd mcp-playwright-suite

2. Install dependencies
npm install

3. Install Playwright browsers
npx playwright install --with-deps

4. Build the project
npm run build

Usage Examples

Natural Language Test Generation

1. Edit scenarios in test-data/scenarios.json:

  "scenarios": [
    {
      "id": "login-flow",
      "name": "User Login Flow",
      "url": "https://myapp.com/login",
      "verifyStatements": [
        "Verify email field exists",
        "Verify password field exists", 
        "Verify login button is present",
        "Verify form validation shows error for invalid email"
      ]
    }
  ]
}

2. Generate tests:
npm run mcp:generate scenarios

3. Run tests:
npm test tests/generated/login-flow.spec.ts

4. Website Exploration
npm run mcp:generate explore https://github.com "GitHub Homepage Test"

5. Interactive mode for multiple operations
npm run mcp:generate interactive

AI-Powered Features

Smart Natural Language Processing The system understands various types of verify statements:

Presence checks: "is present", "exists", "is visible"
Text content: "contains", "displays", "shows"
State checks: "disabled", "enabled", "checked"
Validation: "shows error", "validation"

Intelligent Selector Generation Automatically maps natural language to robust selectors:

"header" → header, h1, h2, h3, h4, h5, h6
"navigation menu" → nav, .nav, .navigation, .menu
"submit button" → button[type="submit"], input[type="submit"]
"email field" → input[type="email"], input[name*="email"]

Test Quality Features
-Resilient Selectors - Prioritizes data-testid, aria-label, and semantic selectors
-Wait Conditions - Automatic handling of dynamic content loading
-Error Handling - Screenshot capture on test failures
-Cross-Browser - Tests run on Chromium, Firefox, and WebKit
-Parallel Execution - Fast test execution with worker processes

MCP Server Configuration ( mcp-config.json)

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "./tests", "./test-data"]
    }
  },
  "testGeneration": {
    "outputDir": "./tests/generated",
    "defaultTimeout": 30000,
    "browsers": ["chromium", "firefox", "webkit"]
  }
}

Playwright Configuration Fully configurable through playwright.config.ts with sensible defaults for:

-Multi-browser testing
-Parallel execution
-HTML reporting
-Screenshot and video capture

Available Commands

Test Generation

npm run mcp:generate scenarios # Generate from scenarios file
npm run mcp:generate explore <url> <name> # Explore website and generate
npm run mcp:generate interactive # Interactive mode

Test Execution

npm test # Run all tests
npm run test:headed # Run with visible browser
npm run test:debug # Debug mode
npm run test:ui # Playwright UI mode

Example Generated Test From the verify statement "Verify header is present and contains 'Welcome'":

test.describe('Homepage Verification', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('https://example.com');
    await page.waitForLoadState('networkidle');
  });


  test('Verify header is present and contains \'Welcome\'', async ({ page }) => {
    // Navigate to the target URL

Contributing

I welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
   
2. Create a feature branch (git checkout -b feature/amazing-feature)
   
3. Commit your changes (git commit -m 'Add amazing feature')
   
4. Push to the branch (git push origin feature/amazing-feature)
   
5. Open a Pull Request
   

Acknowledgments

-Playwright - For the excellent browser automation framework
-Model Context Protocol - For enabling AI-powered automation
-TypeScript - For type safety and developer experience