playwright-generate-mcp

Un servidor Model Context Protocol (MCP) de nivel empresarial que permite a los asistentes de codificación con IA (Cursor, Claude Desktop, Antigravity, Roo Code, etc.) generar, puntuar, ejecutar y auto-corregir pruebas E2E de Playwright robustas, mantenibles y resistentes a la inestabilidad.

Aplica una arquitectura Domain-Driven Page Object Model (POM), ofrece evaluación de calidad entre archivos, extrae diagnósticos completos de fallos en un solo turno y cumple con estrictas reglas anti-inestabilidad web-first.

✨ Características principales

• 🏗️ Arquitectura de POM Domain-Driven: Garantiza la separación de responsabilidades entre Specs declarativos, Page Objects, Fixtures personalizadas y Factorías de datos dinámicos.

• 🔍 Evaluación de calidad POM entre archivos: score_test_quality y run_playwright_test recorren automáticamente las dependencias de importación (.spec.ts $\rightarrow$ .fixture.ts $\rightarrow$ *.page.ts / *.component.ts), puntuando localizadores y antipatrones en todos los archivos relacionados.

• ⚡ Diagnósticos completos en un solo turno: Cuando una prueba falla, run_playwright_test devuelve de inmediato la ubicación exacta de archivo y línea, la categoría del error, los últimos 3–5 pasos de acción antes del fallo, los registros de la consola del navegador, las peticiones HTTP fallidas (4xx/5xx) y las rutas de las capturas de pantalla en un solo turno.

• 🛡️ Reglas estrictas anti-inestabilidad: Detecta y desaconseja las esperas arbitrarias (waitForTimeout, setTimeout), las acciones sin await, las dependencias de networkidle y las extracciones manuales de texto, en favor de aserciones web-first con reintento automático.

• 🧭 Auto-detección de la raíz sin estado: Recorre automáticamente los directorios padre para descubrir playwright.config.{ts,js,mjs,cjs,mts,cts} sin necesidad de configurar rutas manualmente.

• 💬 Confirmaciones interactivas adaptativas: Admite modales de UI interactivos (ask_question, vscode_askQuestions) o listas numeradas con formato antes de aplicar las auto-correcciones a las pruebas.

Related MCP server: Limetest MCP Server

📁 Estándar de arquitectura

Este MCP guía a los agentes de IA para que estructuren las pruebas siguiendo una jerarquía Domain-Driven limpia:

tests/e2e/
├── domain/                      # Grouped by business features
│   └── {feature}/
│       ├── pages/               # Page Objects / Component Objects
│       │   └── {step}.page.ts
│       └── {feature}.fixture.ts # Custom Fixture injecting Page Objects & Data
├── factory/                     # Dynamic test data builders
│   └── {entity}.factory.ts      # Unique data per run (timestamp / Faker)
└── specs/                       # Declarative, readable test specs
    └── {feature}.spec.ts

Reglas de diseño principales

1. Separación estricta: No se permiten localizadores en bruto ni manipulaciones directas del DOM dentro de los archivos *.spec.ts. Todas las interacciones de UI residen en los Page/Component Objects.

2. Fixtures personalizadas: Inyecta Page Objects y datos de prueba mediante test.extend<Fixtures>() en lugar de instanciar manualmente new Page() en los specs.

3. Factorías de datos dinámicos: Genera datos de prueba dinámicos en cada ejecución para evitar colisiones con las restricciones de unicidad de la base de datos al reejecutar las pruebas.

4. Localizadores semánticos: Prioriza getByRole > getByLabel / getByPlaceholder > getByText > getByTestId. El CSS profundamente anidado (div > div > span) está estrictamente prohibido.

5. Convenciones de etiquetado:

   • @smoke: Caminos felices críticos.

   • @regression: Flujos de usuario completos.

   • @ui: Pruebas de UI/frontend puro que usan page.route() para simular las respuestas de la API.

   • @integration: Pruebas que validan contra APIs de backend reales.

🛠️ Herramientas MCP

📋 Prompts MCP

• playwright_e2e_workflow: Prompt completo de extremo a extremo que instruye a los agentes de IA sobre la arquitectura de POM Domain-Driven, las secuencias de generación de código (del Paso A al Paso E), las reglas estrictas de escritura anti-inestabilidad, los diagnósticos de un solo turno y los flujos de trabajo de auto-corrección seguros.

🚀 Instalación y configuración

1. Compilar desde el código fuente

git clone https://github.com/your-username/playwright-generate-mcp.git
cd playwright-generate-mcp
npm install
npm run build

2. Configurar el cliente MCP

Añade el servidor a tu archivo de configuración MCP (por ejemplo, claude_desktop_config.json, Configuración de Cursor o ajustes MCP de Antigravity):

{
  "mcpServers": {
    "playwright-generate": {
      "command": "node",
      "args": ["/absolute/path/to/playwright-generate-mcp/dist/index.js"]
    }
  }
}

O cuando se publique en NPM:

{
  "mcpServers": {
    "playwright-generate": {
      "command": "npx",
      "args": ["-y", "playwright-generate-mcp"]
    }
  }
}

🧑💻 Desarrollo

npm run dev     # tsx watch mode
npm run build   # Compile TypeScript to dist/
npm start       # Run compiled MCP server

📄 Licencia

MIT