Playwright MCP Explorer

WIP # - Actualmente en construcción

Playwright_MCP_Explorer

Herramienta inteligente de generación de pruebas de Playwright que utiliza MCP para explorar sitios web de forma autónoma y generar pruebas, así como escenarios específicos basados en las declaraciones de verificación del usuario.

MCP-Playwright es un marco de pruebas automatizadas revolucionario que combina el poder del Protocolo de Contexto de Modelo (MCP) con Playwright para generar conjuntos de pruebas completos mediante descripciones en lenguaje natural y exploración autónoma de sitios web.

Características Principales

-Generación de Pruebas con IA: Convierte declaraciones en lenguaje natural en pruebas robustas de Playwright
-Exploración Autónoma de Sitios Web-Descubre y prueba automáticamente la funcionalidad de los sitios web Escenarios en Lenguaje Natural
-Escribe pruebas usando declaraciones de verificación simples
-Generación Inteligente de Selectores-Genera automáticamente selectores resistentes y mantenibles
-Pruebas Multi-Navegador-Ejecuta pruebas en Chromium, Firefox y WebKit

1. Generación de Pruebas en Lenguaje Natural Escribe declaraciones de verificación simples y deja que la IA genere pruebas completas:

2. Exploración Autónoma de Sitios Web Deja que el sistema explore sitios web y genere pruebas automáticamente:

Requisitos Previos Node.js 18+ npm o yarn Git

Instalación

1. Clona el repositorio
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. Genera pruebas:
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

Contribuciones

¡Damos la bienvenida a las contribuciones! Consulta nuestra Guía de Contribuciones para más detalles.

1. Haz un fork del repositorio
   
2. Crea una rama de características (git checkout -b feature/amazing-feature)
   
3. Haz commit de tus cambios (git commit -m 'Add amazing feature')
   
4. Sube los cambios a la rama (git push origin feature/amazing-feature)
   
5. Abre un Pull Request
   

Agradecimientos

-Playwright - Por el excelente marco de automatización de navegadores
-Model Context Protocol - Por permitir la automatización impulsada por IA
-TypeScript - Por la seguridad de tipos y la experiencia de desarrollo