Communitygithub.com

E2E Testing Skill

Automatiza pruebas e2e con comportamiento humano usando Chrome MCP o Playwright MCP.

¿Qué es E2E Testing Skill?

Esta skill automatiza pruebas E2E (end-to-end) para aplicaciones web en entornos de vista previa (preview) y producción. Utiliza Chrome MCP o Playwright MCP para controlar el navegador e inyectar comportamientos realistas, como retrasos aleatorios entre acciones, escritura a velocidad humana y desplazamiento suave. Soporta múltiples suites de pruebas (smoke, full, visual, upload, download, login, api) y banderas como `--headless` para CI/CD o `--mobile` para viewports responsivos. También incluye generación de reportes Markdown, comparaciones visuales con líneas base de capturas de pantalla y manejo de errores con captura de logs y diffs.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Svenja-dev/claude-code-skills/tree/HEAD/skills/e2e-testing
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Habilidad de Pruebas E2E

Disparador

  • Palabras clave: teste, e2e, playwright, browser test, visual test, smoke test
  • Llamada: /e2e-test [suite] [--flags]

Descripción

Prueba E2E automatizada con comportamiento humano para vista previa y producción. Usa Chrome MCP o Playwright MCP para la automatización del navegador.

Suites de Prueba

SuiteDuraciónDescripción
smoke30sInicio de sesión, carga, UI básica (predeterminada con "teste")
full5minTodos los escenarios P0+P1
visual2minSolo comparaciones de capturas
upload1minTodos los formatos de archivo
download2minFunciones de exportación
login30sFlujo de autenticación
api1minPruebas de endpoints de API

Banderas

BanderasDescripción
--previewProbar solo en localhost
--productionProbar solo en la URL de producción
--quickSolo escenarios P0 (prueba más rápida)
--humanChrome MCP con navegador real
--headlessPlaywright MCP sin interfaz (CI/CD)
--update-baselinesActualizar líneas base de capturas
--mobileProbar con viewports móviles (375px, 768px)

Flujo de Trabajo

1. VERIFICACIÓN DEL ENTORNO
   - Comprobar si localhost está funcionando (curl/fetch)
   - Comprobar si la URL de producción es accesible
   - Seleccionar entorno de prueba según las banderas

2. CONFIGURACIÓN DEL NAVEGADOR
   - Si `--human`: Usar Chrome MCP (mcp__claude-in-chrome__)
   - Sino: Usar Playwright MCP (mcp__playwright__)
   - Viewport: 1280x720 (escritorio) o 375x667 (móvil)

3. ACTIVAR COMPORTAMIENTO HUMANO
   - Retrasos aleatorios: 200-800ms entre acciones
   - Velocidad de escritura: 50-150ms por tecla
   - Pasar el cursor antes de hacer clic (pausa de 200-500ms)
   - Desplazamiento suave en lugar de instantáneo

4. EJECUTAR SUITE DE PRUEBAS
   - Para cada prueba: captura de pantalla antes/después
   - En caso de error: guardar captura + registros de consola
   - Verificación de descarga: comprobar tamaño del archivo

5. GENERAR INFORME
   - Informe Markdown en .playwright-mcp/reports/
   - Imágenes de diferencias en caso de desviaciones visuales
   - Resumen con estado Aprobado/Error/Inestable

Escenarios de Prueba (P0 - Críticos para el Negocio)

1. Carga de Página Principal

- Navegar a la URL
- Esperar a que el elemento principal sea visible
- Verificar que el logotipo/marca sea visible
- Captura de pantalla: landing-page.png

2. Flujo de Inicio de Sesión/Autenticación

- Hacer clic en el botón de inicio de sesión
- Esperar a la animación del modal/página
- Verificar que las opciones de autenticación sean visibles (OAuth, correo, etc.)
- Captura de pantalla: login-modal.png

3. Cambio de Idioma (si hay i18n)

- Encontrar el selector de idioma
- Hacer clic con retardo humano
- Esperar al cambio de texto
- Verificar que los textos de la interfaz cambiaron
- Captura de pantalla: language-toggle.png

4. Carga de Archivos (si existe)

- Hacer clic en el área de carga
- Seleccionar archivo de prueba
- Esperar confirmación
- Verificar que se muestre el nombre del archivo
- Captura de pantalla: file-uploaded.png

5. Ejecutar Acción Principal

- Ejecutar la función principal de la aplicación
- Esperar el estado de carga
- Esperar el resultado (máx. 60s)
- Verificar que el contenido del resultado esté presente
- Captura de pantalla: result.png

6. Exportación/Descarga (si existe)

- Hacer clic en el botón de descarga
- Esperar el evento de descarga
- Verificar que el formato del archivo sea correcto
- Verificar que el tamaño del archivo sea mayor al mínimo
- Captura de pantalla: download-complete.png

Escenarios de Prueba (P1 - Importantes)

7. Navegación/Historial

- Hacer clic en un elemento de navegación
- Esperar la animación
- Verificar que se cargó el contenido correcto

8. Cambio de Tema (si existe)

- Encontrar el alternador de tema
- Anotar los colores actuales
- Hacer clic en el alternador
- Verificar que los colores cambiaron
- Captura de pantalla: theme-toggle.png

9. Diseño Responsivo

- Establecer viewport a 375x667
- Verificar que la navegación móvil sea visible
- Verificar que las funciones principales sean accesibles
- Captura de pantalla: mobile-view.png

10. Manejo de Errores

- Provocar un error (entrada inválida)
- Esperar el mensaje de error
- Verificar que el error sea amigable para el usuario
- Captura de pantalla: error-state.png

Funciones de Comportamiento Humano

// Retraso aleatorio (200-800ms)
async function humanDelay() {
  const delay = 200 + Math.random() * 600;
  await page.waitForTimeout(delay);
}

// Escritura humana (50-150ms por tecla)
async function humanType(selector: string, text: string) {
  await page.click(selector);
  await humanDelay();
  for (const char of text) {
    await page.keyboard.type(char);
    await page.waitForTimeout(50 + Math.random() * 100);
  }
}

// Patrón: Pasar cursor -> Pausa -> Hacer clic
async function humanClick(selector: string) {
  await page.hover(selector);
  await page.waitForTimeout(200 + Math.random() * 300);
  await page.click(selector);
  await humanDelay();
}

// Desplazamiento suave
async function humanScroll(pixels: number) {
  await page.evaluate((px) => {
    window.scrollTo({ top: px, behavior: "smooth" });
  }, pixels);
  await page.waitForTimeout(500);
}

Formato del Informe

## Informe de Pruebas E2E - [FECHA] [HORA]

### Entorno

- **URL**: [URL probada]
- **Navegador**: Chromium [versión]
- **Viewport**: 1280x720
- **Suite**: smoke

### Resultados

| #   | Prueba             | Estado  | Duración | Captura                   |
| --- | ------------------ | ------- | -------- | ------------------------- |
| 1   | Carga de Página    | APROBADO | 0.8s     | [ver](landing-page.png)   |
| 2   | Modal de Inicio    | APROBADO | 1.2s     | [ver](login-modal.png)    |
| 3   | Carga de Archivo   | APROBADO | 2.1s     | [ver](file-uploaded.png)  |
| 4   | Acción Principal   | LENTO    | 45.2s    | [ver](result.png)         |
| 5   | Descarga           | ERROR    | 3.4s     | [ver](error.png)          |

### Resumen

- **Total**: N pruebas
- **Aprobados**: X (Y%)
- **Fallidos**: A (B%)
- **Lentos/Inestables**: C (D%)
- **Duración**: Zs

Líneas Base Visuales

.playwright-mcp/
├── baselines/                    # Referencia dorada (seguida por git)
│   ├── landing-page-desktop.png
│   ├── landing-page-mobile.png
│   ├── login-modal.png
│   ├── result.png
│   └── error-state.png
├── current/                      # Capturas actuales (ignoradas por git)
├── diffs/                        # Diferencias de píxeles (ignoradas por git)
└── reports/                      # Informes de prueba (ignorados por git)

Ejecución

Llamada más simple

Usuario: "teste"
-> Ejecuta la suite smoke en el entorno disponible

Pruebas Específicas

Usuario: "teste upload"
-> Ejecuta solo la suite upload

Usuario: "teste production visual"
-> Ejecuta la suite visual en producción

Usuario: "teste --quick --human"
-> Prueba rápida con navegador Chrome real

Integración CI/CD

Usuario: "teste --headless --full"
-> Todas las pruebas sin interfaz para el pipeline

Manejo de Errores

  1. Localhost no accesible:

    • Mostrar advertencia
    • Preguntar si se debe iniciar el servidor de desarrollo

  2. Producción no accesible:

    • Mostrar advertencia
    • Verificar estado del despliegue

  3. Tiempo de espera agotado (>60s):

    • Captura de pantalla del estado actual
    • Guardar registros de consola
    • Marcar como ERROR

  4. Diferencia visual detectada:

    • Generar imagen de diferencia
    • Marcar como INESTABLE (no automáticamente ERROR)
    • El usuario decide si es necesario actualizar la línea base

Configuración

Archivo opcional .e2e-config.json en la raíz del proyecto:

{
  "previewUrl": "http://localhost:5173",
  "productionUrl": "https://your-app.com",
  "defaultSuite": "smoke",
  "timeouts": {
    "navigation": 10000,
    "action": 60000,
    "download": 30000
  },
  "viewports": {
    "desktop": { "width": 1280, "height": 720 },
    "tablet": { "width": 768, "height": 1024 },
    "mobile": { "width": 375, "height": 667 }
  },
  "humanBehavior": {
    "enabled": true,
    "minDelay": 200,
    "maxDelay": 800,
    "typingSpeed": { "min": 50, "max": 150 }
  },
  "screenshots": {
    "onEveryStep": false,
    "onFailure": true,
    "fullPage": false
  }
}

Requisitos Previos

  • Chrome MCP o Playwright MCP instalado
  • Proyecto Node.js con package.json
  • Opcional: .e2e-config.json para configuración del proyecto

Autor

Dresden AI Insights - https://dresdenaiinsights.com

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community