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

,```cd mcp-playwright-suite```

**2. Install dependencies**

3. Install Playwright browsers

**4. Build the project**

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:

**3. Run tests:**

4. Website Exploration

**5. Interactive mode for multiple operations**

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:

// Code block

// Code block

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

// Code block

# Test Execution

// Code block

**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