메뉴
Optimiza imágenes PNG/JPG de evidencia reduciendo tamaño sin perder calidad visual (ejecución automática pre-reporte)
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Configurar sesión de pruebas UI con Playwright MCP. Usar antes de ejecutar cualquier caso de prueba para leer .vscode/config.md, resolver ambiente, abrir el browser, limpiar storage, ejecutar login con las credenciales/selectores del archivo y retornar "Ready". Prohíbe lectura manual de URL/password y navegación previa.
Define carpeta de evidencia jerárquica (Nombre Archivo / Ticket) en evidence. NO genera código; usa herramientas MCP.
Generar el reporte HTML final usando el template oficial y la lista de evidencias; usar al finalizar el test.
Generar casos de prueba E2E desde tickets Jira con formato Playwright. Usar cuando el prompt pida “genera los casos de prueba para el ticket PG-XXXX”, “generá casos para PG-XXXX” o variantes equivalentes.
Capturar screenshots ante errores o validaciones críticas con naming estándar {ticketId}_paso_XX.png dentro de evidence/{sourceFile}/{ticketId}/. Usar herramientas MCP, NO código.
Enforce uso exclusivo de Playwright MCP y bloquear acciones prohibidas (no .spec.ts, no playwright.config.ts, no CLI tests, no herramientas externas).
| name | optimize-images |
| version | 1.1.0 |
| description | Optimiza imágenes PNG/JPG de evidencia reduciendo tamaño sin perder calidad visual (ejecución automática pre-reporte) |
Este skill optimiza automáticamente las capturas de pantalla generadas durante la ejecución de tests, reduciendo su peso significativamente mientras mantiene la calidad visual necesaria para reportes.
Este skill se ejecuta AUTOMÁTICAMENTE como paso previo a la generación del reporte HTML cuando se ejecuta un test con el comando ejecuta el test TC-XXX.
Flujo de ejecución de tests:
El agente ejecuta este skill automáticamente como parte del flujo de testing, inmediatamente después de capturar todas las evidencias y antes de generar el reporte HTML.
node .github/skills/optimize-images/optimize-images.js evidence/{mdFileName}/{ticketId}
Cuando el usuario ejecuta:
ejecuta el test TC-001
El agente ejecuta automáticamente:
# 1. Capturar evidencias → tc001_*.png
# 2. OPTIMIZAR (este skill):
node .github/skills/optimize-images/optimize-images.js evidence/agenda/tc001
# 3. Generar reporte HTML → tc001_reporte.html
También puede ejecutarse manualmente si es necesario:
node .github/skills/optimize-images/optimize-images.js evidence/agenda/tc005
.png, .jpg, .jpeg en la carpeta especificada._opt en el nombre).| Formato | Calidad | Nivel compresión |
|---|---|---|
| JPEG | 80% | mozjpeg enabled |
| PNG | 80% | Level 9, palette |
Nota: Calidad 80 es el punto óptimo entre peso y calidad visual para capturas de interfaz.
{se integra automáticamente con `evidence-generator` en el flujo de testing:
**Secuencia de ejecución (AUTOMÁTICA):**
┌─────────────────────────────────────────────┐ │ Usuario: "ejecuta el test TC-005" │ └─────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────┐ │ 1. Crear carpeta evidencia: │ │ evidence/agenda/tc005 │ └─────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────┐ │ 2. Ejecutar test y capturar screenshots │ │ - tc005_paso1.png │ │ - tc005_paso2.png │ │ - tc005_resultado.png │ └─────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────┐ │ 3. OPTIMIZAR IMÁGENES (optimize-images) │ │ node .github/skills/.../optimize.js ... │ │ → Reducir peso 60-70% │ └─────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────┐ │ 4. Generar reporte HTML │ │ - tc005_reporte.html │ │ - Referencias: tc005_*.png (optimizadas)│ └─────────────────────────────────────────────┘
**Ventajas de la optimización pre-reporte:**
- ✅ Reportes HTML más livianos
- ✅ Carga más rápida en navegador
- ✅ Menor consumo de disco
- ✅ Sin pérdida visual perceptible
Este skill complementa al skill `evidence-generator`. El flujo recomendado es:
1. Ejecutar test case y generar capturas
2. Generar reporte HTML
3. **Ejecutar optimize-images** sobre la carpeta del ticket
4. Verificar que las imágenes en el HTML se vean correctamente
### Ejemplo de flujo completo
```powershell
# Después de completar TC-005 y generar su reporte:
node .github/skills/optimize-images/optimize-images.js evidence/agenda/tc005
📁 Optimizando imágenes en: evidence/agenda/tc005
🔍 Encontradas 4 imágenes. Procesando...
✅ tc005_programacion_previa_creada.png: 245 KB → 89 KB (-63.7%)
✅ tc005_formulario_conflicto_horario.png: 312 KB → 102 KB (-67.3%)
✅ tc005_mensaje_error_inspector_ocupado.png: 156 KB → 51 KB (-67.3%)
✅ tc005_calendario_sin_duplicado.png: 287 KB → 94 KB (-67.2%)
📊 Total: 4 imágenes optimizadas. Ahorro total: 664 KB