@matware/e2e-runner 1.1.0: Dashboard en Tiempo Real, Issue-to-Test y Screenshot Hashes

La versión 1.1.0 de @matware/e2e-runner ya está disponible. Es la actualización más grande desde el lanzamiento inicial — un dashboard web en tiempo real, verificación automática de bugs desde issues de GitHub/GitLab, y hashes de screenshots que conectan la salida visual con debugging asistido por IA. Todo sigue siendo JSON-driven, zero-config por defecto.

Dashboard Web en Tiempo Real

La funcionalidad estrella. Una SPA completa con tema oscuro que te da visibilidad y control total sobre tus ejecuciones de tests — sin configuración adicional.

npx @matware/e2e-runner dashboard

Abrí http://localhost:8484 y listo.

Ejecución en Vivo

Mirá los tests correr en tiempo real. Cada acción — goto, wait, click, evaluate — se transmite via WebSocket con duraciones individuales. Los contadores pass/fail se actualizan al instante.

Ejecución en vivo con actualizaciones de steps en tiempo real y contadores pass/fail Vista Live durante la ejecución: los steps se transmiten en tiempo real con duraciones individuales, los contadores pass/fail se actualizan al instante.

Test Suites

Todos tus suites de tests organizados por proyecto. Hacé click en “Run Suite” en cualquier card o en “Run All Tests” para ejecutar todo.

Grid de suites de tests organizados por proyecto con botones Run Suite Vista Suites: cards organizadas por proyecto, cada una con un botón Run Suite de un click.

Historial con Tendencias

Un gráfico de tendencia de pass rate y una tabla detallada de todas las ejecuciones a través de los proyectos. Porcentajes con colores para detectar regresiones fácilmente.

Historial de ejecuciones con gráfico de tendencia pass rate y tabla detallada Vista Runs: gráfico de tendencia de pass rate e historial de ejecuciones a través de todos los proyectos.

Detalle de Ejecución

Expandí cualquier ejecución para ver tests individuales con badges pass/fail, duraciones, screenshots con badges de hash clickeables, y errores de consola formateados.

Detalle de ejecución mostrando resultados, badges de hash de screenshots y errores de consola Detalle de run: test expandido con badge PASS, thumbnail de screenshot con badge de hash clickeable ss:77c28b5a.

Galería de Screenshots

Una galería en grid de todos los screenshots capturados a través de las ejecuciones, organizados por proyecto.

Galería de screenshots con grid de capturas de tests Vista Screenshots: galería visual de todas las capturas del proyecto seleccionado.

Soporte Multi-Proyecto

El dashboard maneja múltiples proyectos simultáneamente. Cada proyecto se identifica por su directorio de trabajo (cwd) con un nombre configurable.

Vista multi-proyecto mostrando suites de diferentes proyectos con estado del pool Multi-proyecto: suites de diferentes proyectos en secciones separadas, estado del pool en el footer.

# Via flag CLI
e2e-runner dashboard --project-name "Mi App"

# Via variable de entorno
PROJECT_NAME="Mi App" e2e-runner dashboard

# Via e2e-runner.config.json
{ "projectName": "Mi App" }

El dashboard también está disponible como herramientas MCP: e2e_dashboard_start y e2e_dashboard_stop.

Issue-to-Test: De Bug Report a Test E2E Automáticamente

Convertí issues de GitHub y GitLab en tests E2E ejecutables. Soporta github.com y GitLab (incluyendo self-hosted), detectando el proveedor automáticamente desde la URL.

Dos modos de operación:

Modo Prompt (por defecto, no requiere API key)

La herramienta MCP e2e_issue obtiene los detalles del issue (título, cuerpo, labels, comentarios) y devuelve un prompt estructurado. Claude Code usa ese prompt para crear los tests con e2e_create_test y ejecutarlos con e2e_run. El flujo es completamente orquestado por la IA.

Modo Verify (requiere `ANTHROPIC_API_KEY`)

Llama directamente a la API de Claude para generar tests, los ejecuta automáticamente y reporta si el bug está confirmado o no es reproducible. La lógica: los tests generados verifican el comportamiento correcto, así que si fallan = bug confirmado, si pasan = no reproducible.

# Mostrar detalles del issue
e2e-runner issue https://github.com/org/repo/issues/42

# Generar test file via Claude API
e2e-runner issue https://github.com/org/repo/issues/42 --generate

# Generar + ejecutar + reportar estado del bug
e2e-runner issue https://github.com/org/repo/issues/42 --verify

# Output del prompt como JSON (para piping)
e2e-runner issue https://github.com/org/repo/issues/42 --prompt

Autenticación: Usa gh CLI para GitHub y glab CLI para GitLab. Todos los comandos externos usan execFileSync (sin shell injection). Sin dependencias nuevas.

Screenshot Hashes: Del Dashboard a Claude Code en Un Click

Cada screenshot capturado durante una ejecución recibe un hash corto determinístico como ss:a3f2b1c9.

Los hashes aparecen como badges clickeables en todo el dashboard. Hacé click en el badge y se copia ss:a3f2b1c9 al clipboard.

Después pegalo en Claude Code. La herramienta MCP e2e_screenshot resuelve el hash, lee el archivo de disco y devuelve la imagen — sin rutas de archivos, sin adivinar.

# En Claude Code, simplemente pegá el hash
ss:a3f2b1c9
# → Claude ve el screenshot y puede razonar sobre él

Cómo funciona: El hash son los primeros 8 caracteres hex del SHA-256 de la ruta absoluta. Se computa igual en servidor (Node crypto) y navegador (Web Crypto API), así que los hashes aparecen en la vista Live antes de que la ejecución termine de escribir en SQLite.

Cuando saveRun() escribe los resultados, registra cada hash en la tabla screenshot_hashes dentro de la misma transacción. La API de detalle incluye un mapa screenshotHashes por test, y /api/screenshot-hash/:hash sirve imágenes por hash.

Esto cierra el loop entre la salida visual de tests y el debugging asistido por IA.

Persistencia SQLite

Cada ejecución se persiste en una base de datos SQLite centralizada en ~/.e2e-runner/dashboard.db. Modo WAL para acceso concurrente, dual-write a filesystem (JSON) y SQLite para retrocompatibilidad.

Tablas: projects, runs, test_results, screenshot_hashes con foreign keys e índices.

API REST:

GET /api/db/projects — lista todos los proyectos registrados
GET /api/db/projects/:id/runs — ejecuciones de un proyecto específico
GET /api/db/runs/:id — detalle completo de una ejecución

Cola Pool-Aware

Antes de la v1.1.0, lanzar más tests de los que el Chrome pool podía manejar causaba acumulación de conexiones, presión de memoria y procesos Chrome terminados con SIGKILL.

Ahora, cada worker consulta el endpoint /pressure del pool antes de abrir una conexión. Si el pool está al máximo, el worker espera (polling cada 2s, hasta 60s) hasta que un slot se libere.

Eventos de Progreso en Vivo

Eventos estructurados via un sistema de callbacks onProgress:

Evento	Cuándo
`run:start`	Comienza la ejecución (total tests, concurrencia, proyecto)
`test:start`	Un test individual comienza
`test:action`	Cada acción se completa (éxito/error, duración)
`test:retry`	Se reintenta un test fallido
`test:complete`	Test finaliza con resultado
`run:complete`	Resumen con conteo passed/failed

Los eventos alimentan las actualizaciones en tiempo real del dashboard via WebSocket, con buffer para reconexiones.

Nueva Acción `navigate`

Para SPAs donde el routing client-side no dispara eventos de carga de página:

{
  "type": "navigate",
  "value": "/dashboard/settings"
}

Usa un patrón race con timeout de 5 segundos. Soporta URLs absolutas y relativas.

Servidor MCP: 8 Herramientas via stdio + HTTP

La integración MCP recibió una mejora significativa. Las definiciones están en un módulo compartido, y el dashboard expone las mismas herramientas via Streamable HTTP en /mcp.

Herramienta	Descripción
`e2e_run`	Ejecutar tests (todos, suite, o archivo)
`e2e_list`	Listar suites disponibles
`e2e_create_test`	Crear un nuevo archivo de test
`e2e_pool_status`	Verificar estado del Chrome pool
`e2e_screenshot`	Obtener screenshot por hash
`e2e_dashboard_start`	Iniciar el dashboard
`e2e_dashboard_stop`	Detener el dashboard
`e2e_issue`	Convertir issue a test E2E

Quick Start

# One-liner: instala, scaffolds, arranca pool, corre sample tests
curl -fsSL https://raw.githubusercontent.com/fastslack/mtw-e2e-runner/main/scripts/quickstart.sh | bash

O paso a paso:

npm install -g @matware/e2e-runner
e2e-runner run --all
e2e-runner dashboard

Breaking Changes

Ninguno. Todo es retrocompatible. La única nueva dependencia es better-sqlite3.

Consultá el repositorio en GitHub para la documentación completa y el paquete npm para detalles de instalación.

@matware/e2e-runner sigue siendo JSON-driven, zero-config por defecto, y ahora te da un dashboard en tiempo real, verificación automática de bugs desde issues, y debugging de screenshots con IA — todo con integración de primera clase con Claude Code via MCP.