Playwright Autopilot

¿Usas Selenium, Cypress o WebDriverIO? E2Epilot lleva el mismo motor de triaje basado en IA a 6 frameworks, incluyendo Selenium Java, SeleniumBase y más. Sitio web: e2epilot.com | npm: @e2epilot/cli

Un plugin para Claude Code que depura y corrige pruebas E2E de Playwright de forma autónoma. Ejecuta tus pruebas con captura completa de acciones (instantáneas del DOM, peticiones de red, salida de consola, capturas de pantalla), investiga los fallos como un ingeniero de QA senior y aplica la corrección.

https://github.com/user-attachments/assets/26f734a5-d05e-41c9-bc3f-2b58561c2ce0

Inicio rápido

# Add the marketplace
/plugin marketplace add kaizen-yutani/playwright-autopilot

# Install the plugin
/plugin install kaizen-yutani/playwright-autopilot

Luego, pídele a Claude que corrija una prueba fallida o que realice el triaje de toda tu suite:

/playwright-autopilot:fix-e2e tests/checkout.spec.ts
/playwright-autopilot:triage-e2e e2e

O simplemente describe lo que necesitas: Claude utilizará las herramientas MCP automáticamente:

Fix all failing e2e tests in the "e2e" project

Related MCP server: Browser Testing MCP Server

Qué hace

Cada acción del navegador durante la ejecución de una prueba se captura con:

• Instantáneas del DOM antes/después — árbol aria de la página antes y después de cada clic, relleno o navegación

• Peticiones de red — URL, método, estado, tiempos, cuerpos de petición/respuesta

• Salida de consola — errores, advertencias y registros vinculados a la acción que los produjo

• Capturas de pantalla — capturadas en el momento del fallo

Cuando una prueba falla, Claude no adivina: lee el estado real de la página, comprueba las llamadas a la API fallidas y rastrea la causa raíz a través de la línea de tiempo de acciones.

Cómo funciona

1. Hook de captura

Un hook CJS ligero (captureHook.cjs) se inyecta mediante NODE_OPTIONS --require en los procesos de trabajo de prueba de Playwright. Aplica un monkey-patch a BrowserContext._initialize para añadir un oyente de instrumentación que captura cada acción del navegador con contexto completo. No se requiere ninguna modificación en el código fuente de Playwright; funciona con cualquier instalación de Playwright.

2. Herramientas MCP

El plugin expone 37 herramientas a través del Model Context Protocol que Claude llama bajo demanda. Esto es eficiente en cuanto a tokens por diseño: en lugar de volcar trazas completas en el contexto, Claude extrae solo lo que necesita:

Ejecución y depuración de pruebas:

Exploración interactiva del navegador:

Las herramientas browser_* inician una instancia real de Chrome y permiten a Claude explorar tu aplicación de forma interactiva: navegar por páginas, hacer clic en elementos, rellenar formularios y observar el estado de la página a través de instantáneas ARIA. Cada interacción devuelve tiempos, peticiones de red, cambios en el DOM y una instantánea actualizada. Úsalo para entender una aplicación antes de escribir pruebas, depurar problemas de UI visualmente o verificar correcciones.

3. Memoria de flujos

Después de corregir (o verificar) una prueba, el plugin guarda el flujo de aplicación confirmado: la secuencia de interacciones de usuario que conforman el camino feliz (happy path). Estos flujos persisten en .e2e-flows.json y se acumulan entre sesiones.

La próxima vez que esa prueba falle, Claude ya conocerá el recorrido de usuario previsto y saltará directamente a identificar qué cambió. El agente se vuelve más rápido con el tiempo.

4. Detección de inestabilidad (Flaky tests)

Dos modos complementarios para identificar pruebas inestables:

retries: N — Ejecuta la prueba N+1 veces en procesos de Playwright separados. Cada ejecución obtiene su propio runId con captura completa de acciones. Devuelve un veredicto: FLAKY, CONSISTENT PASS o CONSISTENT FAIL. Ideal para depurar con 2-3 reintentos.

e2e_run_test(location: "tests/checkout.spec.ts:15", retries: 2)

repeatEach: N — repeat-each nativo de Playwright. Todas las iteraciones en un solo proceso. Prueba de estrés rápida para confirmar la inestabilidad: usa 30-100 para mayor confianza.

e2e_run_test(location: "tests/checkout.spec.ts:15", repeatEach: 40)

5. Paquetes de evidencia

e2e_get_evidence_bundle empaqueta toda la evidencia de fallo en una sola respuesta: error, pasos para reproducir, línea de tiempo de acciones, peticiones de red fallidas con cuerpos, errores de consola, instantánea del DOM y capturas de pantalla. Reemplaza llamar a más de 6 herramientas por separado.

Pasa outputFile: true para escribir un archivo markdown en test-reports/ para adjuntos en Jira.

6. Informes HTML

Las ejecuciones por lotes (sin location) generan automáticamente un informe HTML autónomo con:

• Resumen de éxito/fallo con insignias de estado

• Secciones plegables por prueba

• Líneas de tiempo de acciones, peticiones de red fallidas, errores de consola

• Instantáneas del DOM en los puntos de fallo

• Capturas de pantalla como imágenes base64 en línea

Los informes se escriben en test-reports/report-<runId>.html. También puedes llamar a e2e_generate_report manualmente para cualquier ejecución.

7. Triaje de suite y seguimiento de salud

Ejecuta toda tu suite, clasifica cada fallo y produce un informe listo para la gestión:

/playwright-autopilot:triage-e2e e2e

Claude clasifica cada fallo como Problema conocido, Error de aplicación, Actualización de prueba, Inestable o Nuevo fallo: hace referencia cruzada con Jira para tickets existentes, crea nuevos tickets para errores de aplicación con paquetes de evidencia y guarda la ejecución de triaje para el seguimiento de tendencias.

e2e_get_stats proporciona un panel de salud de la suite: tendencias de tasa de éxito, pruebas inestables clasificadas por puntuación, desglose de categorías de fallos y nuevos fallos, todo desde el historial local sin ejecutar pruebas.

9. Análisis de cobertura

e2e_suggest_tests escanea todo tu proyecto para encontrar brechas de cobertura:

1. Métodos de objetos de página no probados — métodos en archivos .page.ts / .service.ts que ninguna especificación llama

2. Variantes de flujo faltantes — flujos con precondiciones (ej. "no existe borrador") que carecen de una variante de continuación

3. Pasos de flujo no cubiertos — acciones listadas en flujos confirmados que ninguna especificación ejercita

10. Conciencia de arquitectura

Antes de escribir cualquier corrección, el plugin escanea tu proyecto en busca de objetos de página, capas de servicio y fixtures de prueba. Sigue tus patrones existentes:

• Utiliza tus métodos de Page Object Model en lugar de escribir llamadas crudas de Playwright

• Respeta tu separación de capa de negocio/servicio

• Utiliza getByRole(), getByTestId(), aserciones web-first

• Produce diferencias mínimas — típicamente una o dos líneas añadidas

Filosofía de depuración

El plugin sigue una metodología de diagnóstico estricta:

Piensa en flujos de usuario, no en selectores. Antes de tocar el código, mapea el recorrido de usuario previsto. Cuando falta un paso (un menú desplegable nunca seleccionado, un campo obligatorio nunca rellenado), encuentra el método de objeto de página existente y añade la llamada.

Cuatro categorías de causa raíz:

1. Paso de prueba faltante — la prueba omite una interacción de UI que la aplicación requiere

2. Error en el código de prueba — selector incorrecto, aserción obsoleta, datos de prueba incorrectos

3. Error de aplicación — la aplicación misma está rota (reportado, no evadido)

4. Estado sucio — restos de ejecuciones de prueba anteriores que interfieren

Sin trucos. El plugin nunca usará page.evaluate(), page.route(), page.addInitScript() o cualquier inyección de JavaScript para evitar una prueba fallida. Si la corrección requiere eso, está resolviendo el problema equivocado.

Configuración

Configuración multiproyecto

Si tu proyecto de Playwright vive en un directorio diferente al lugar donde se ejecuta Claude Code, establece la variable de entorno PW_PROJECT_DIR en .mcp.json:

{
  "mcpServers": {
    "playwright-autopilot": {
      "command": "node",
      "args": ["path/to/plugin/server/mcp-server.js"],
      "env": {
        "PW_PROJECT_DIR": "/path/to/your/playwright/project"
      }
    }
  }
}

Requisitos

• CLI de Claude Code

• Proyecto de prueba de Playwright

• Node.js 20+

Licencia

MIT