| name | evidence-generator |
| version | 1.2.0 |
| description | Define carpeta de evidencia jerárquica (Nombre Archivo / Ticket) en evidence. NO genera código; usa herramientas MCP. |
Skill: Evidence Generator
Este skill define dónde guardar capturas y reporte HTML organizados por el nombre del archivo de definición de pruebas y el ID del ticket.
⚠️ IMPORTANTE: Este skill define convenciones de rutas, NO genera código TypeScript/JavaScript. Las capturas se realizan con herramientas MCP.
Regla principal
Si el ticket tc001 proviene del archivo agenda.md, todos los archivos deben guardarse en:
evidence\agenda\tc001\
Convención de carpetas
- El primer nivel dentro de
evidence\ debe ser el nombre del archivo .md origen (ej. agenda, usuarios, epp) sin extensión.
- El segundo nivel debe ser el ID del ticket (ej.
tc001).
Convención de nombres de archivos
- Screenshots:
tc001_paso_01.png, tc001_paso_02.png, etc.
- Reporte HTML:
tc001_reporte.html
- Reporte PDF:
tc001_reporte.pdf
Nota: Los archivos de comentarios para Jira se generan en otros momentos del flujo:
raw-test-cases.md se genera con el skill test-cases-from-jiraraw-{TC_ID}-result.md se genera con el skill generate_html_report
Cómo capturar screenshots (OBLIGATORIO)
✅ Método CORRECTO: Usar herramienta MCP
Activar herramientas de captura con: activate_page_capture_tools
Luego usar la herramienta de screenshot con:
- filename: evidence/{source-file}/{ticket-id}/{ticket-id}_paso_XX.png
❌ Método PROHIBIDO: NO escribir código
await page.screenshot({ path: '...' });
Output requerido
- Todas las rutas de evidencia deben apuntar a la subcarpeta jerárquica:
[MD_NAME]\[TICKET_ID]\.
- Nunca guardar evidencia directamente en
evidence o solo en el ticket si existe una agrupación por archivo.
Estructura del Reporte HTML
El reporte HTML debe seguir el siguiente esquema visual y estructural:
Secciones obligatorias
- Header: Fondo degradado azul (#1e3c72 → #2a5298), título "Reporte de Prueba Automatizada" y subtítulo con el ID y nombre del test case.
- Status Badge: Badge redondeado verde (#28a745) para PASS o rojo (#dc3545) para FAIL.
- Información General: Grid de 6 items con: Caso de Prueba, Estado, Ambiente, URL Base, Fecha de Ejecución, Usuario de Prueba.
- Objetivo: Párrafo descriptivo del propósito del test.
- Pasos Ejecutados: Lista numerada con círculos morados (#667eea) y descripción de cada paso.
- Validaciones Exitosas: Lista con checkmarks (✓) de todas las validaciones cumplidas.
- Datos de Prueba: JSON con los datos de entrada usados en el test (formularios, configuraciones, etc.).
- Respuesta del Sistema: JSON con datos del response (IDs creados, mensajes de confirmación, etc.).
- Errores de Consola: JSON con errores de JavaScript capturados durante la ejecución (vacío si no hubo errores).
- Evidencias: Grid de imágenes con título, descripción y thumbnail clickeable.
- Footer: Fondo azul oscuro (#1e3c72) con timestamp de generación.
Paleta de colores
| Elemento | Color |
|---|
| Header/Footer | #1e3c72 → #2a5298 |
| Accent (números, bordes) | #667eea |
| PASS badge | #28a745 |
| FAIL badge | #dc3545 |
| Background body | #667eea → #764ba2 |
| JSON background | #282c34 |
Template HTML base
📄 Archivo: template-html-base.html
El template está estructurado con:
- Variables CSS en
:root para cambios globales de estilo (colores, espaciado, bordes, tipografía)
- Bloques de estilo separados por sección para facilitar modificaciones
- Comentarios delimitadores que indican cada sección del documento
- Marcadores de repetición (
{{STEPS_START}}, {{EVIDENCE_START}}, etc.) para secciones dinámicas
Variables de reemplazo
| Variable | Descripción |
|---|
{{TICKET_ID}} | ID del caso de prueba (ej. TC-001) |
{{TICKET_TITLE}} | Título descriptivo del test |
{{FECHA}} | Fecha de ejecución en formato "DD de Mes de AAAA" |
{{STATUS}} | PASS o FAIL |
{{STATUS_TEXT}} | Texto del estado con ícono (ej. "✓ PASS") |
{{AMBIENTE}} | Nombre del ambiente (ej. "CetApp GO - Test 1") |
{{URL_BASE}} | URL base del ambiente |
{{USUARIO}} | Usuario de prueba |
{{OBJETIVO}} | Descripción del objetivo del test |
{{TEST_DATA_JSON}} | JSON con datos de entrada usados en la prueba |
{{RESPONSE_JSON}} | JSON con respuesta del sistema (IDs, mensajes, etc.) |
{{CONSOLE_ERRORS_JSON}} | JSON con errores de JavaScript capturados |
{{EVIDENCE_PATH}} | Ruta relativa de la imagen |
{{EVIDENCE_ALT}} | Texto alternativo de la imagen |
Uso con Playwright MCP (OBLIGATORIO)
⚠️ NO GENERAR CÓDIGO: Las capturas se realizan con herramientas MCP, NO escribiendo código TypeScript.
Para capturar screenshots durante la ejecución de un test:
- Activar herramientas de captura:
activate_page_capture_tools
- Usar la herramienta de screenshot MCP
Flujo de captura y unificación:
- Capturar con herramienta MCP de screenshot
- Copiar a la carpeta unificada
evidence/{source-file}/{ticket-id}/
- Optimizar imágenes con script
optimize-images.js
- Generar reporte HTML y PDF con skill
generate_html_report
Los archivos de comentarios Jira se generan automáticamente por otros skills.
Comando para copiar imágenes (ejecutar antes del reporte):
Copy-Item -Path ".playwright-mcp\evidence\{source-file}\{ticket-id}\*.png" -Destination "evidence\{source-file}\{ticket-id}\" -Force
Momentos obligatorios para capturar screenshots:
- Inicio: Estado inicial antes de cualquier acción
- Formularios: Después de completar campos importantes
- Acciones críticas: Antes y después de hacer clic en Guardar/Enviar
- Validaciones: Cuando aparecen mensajes de éxito o error
- Final: Estado final del sistema después de la prueba
Ejemplo de flujo completo:
# 1. Crear carpeta unificada
New-Item -ItemType Directory -Force -Path "evidence/pg-3154/tc-001/"
# 2. Ejecutar test usando herramientas MCP (NO código)
# Screenshots capturados via MCP tools
# 3. Copiar imágenes a carpeta unificada
Copy-Item -Path ".playwright-mcp\evidence\pg-3154\tc-001\*.png" -Destination "evidence\pg-3154\tc-001\" -Force
# 4. Optimizar imágenes
node .github/skills/optimize-images/optimize-images.js evidence/pg-3154/tc-001
# 5. Generar reporte HTML en la misma carpeta
# - evidence/pg-3154/tc-001/tc-001_reporte.html
Estructura final unificada:
evidence/
└── pg-3154/
├── raw-test-cases.md # Generado por test-cases-from-jira
└── tc-001/
├── tc-001_paso_01_inicio.png
├── tc-001_paso_02_formulario_completo.png
├── tc-001_paso_03_guardado_exitoso.png
├── tc-001_reporte.html
├── tc-001_reporte.pdf
└── raw-tc-001-result.md # Generado por generate_html_report
