proportione-plugins

Skill: Check WP Visual

Regresion visual de sitios WordPress de Proportione usando Playwright MCP. Captura screenshots de paginas clave y compara contra baselines.

Target: $ARGUMENTS (URL del sitio, nombre del cliente, "todos" para batch, o "baseline" para capturar nuevas baselines)

Configuration

This skill references external paths. Set these environment variables or replace inline:

• $QA_PROPORTIONE_DIR — Root of the QA_Proportione repo (e.g. /path/to/QA_Proportione)

Directorios

• Baselines: $QA_PROPORTIONE_DIR/baselines/wordpress/{dominio}/
• Reports: $QA_PROPORTIONE_DIR/reports/{fecha}/visual/

Sitios y paginas a capturar

Para cada sitio, capturar estas paginas (adaptar segun menu del sitio):

| Pagina | Path | Prioridad | |--------|------|-----------| | Homepage | / | ALTA | | About/Quienes somos | /about/ o equivalente | ALTA | | Servicios | /servicios/ o equivalente | ALTA | | Contacto | /contacto/ o equivalente | MEDIA | | Blog (listado) | /blog/ | MEDIA | | Blog (post) | primer post | BAJA | | 404 | /url-inexistente-qa-test | BAJA |

Flujo

PASO 1 — Determinar modo

Segun $ARGUMENTS:

• baseline o capturar baseline -> PASO 2 (capturar y guardar como referencia)
• URL o nombre de sitio -> PASO 3 (capturar y comparar contra baseline existente)
• todos -> PASO 3 en batch para todos los sitios

PASO 2 — Capturar baselines (modo baseline)

Para cada pagina del sitio:

1. Usar Playwright MCP para navegar a la URL
2. Esperar a que la pagina cargue completamente:
3. Esperar networkidle o al menos 3 segundos
4. Scroll hasta el final para trigger lazy loading
5. Scroll de vuelta arriba
6. Capturar screenshot a 2 viewports:
7. Desktop: 1280x800
8. Mobile: 375x812 (iPhone 14)
9. Guardar screenshots con naming consistente:

`` baselines/wordpress/{dominio}/ ├── homepage-desktop.png ├── homepage-mobile.png ├── about-desktop.png ├── about-mobile.png ├── servicios-desktop.png ├── servicios-mobile.png ├── contacto-desktop.png ├── contacto-mobile.png └── metadata.json # Fecha captura, URLs, viewports ``

1. Crear metadata.json:

``json { "site": "proportione.com", "captured": "2026-03-30T19:00:00Z", "viewports": { "desktop": {"width": 1280, "height": 800}, "mobile": {"width": 375, "height": 812} }, "pages": [ {"name": "homepage", "url": "https://proportione.com/", "status": 200}, {"name": "about", "url": "https://proportione.com/about/", "status": 200} ] } ``

Informar al usuario:

Baselines capturadas para {sitio}: {n} screenshots ({n} desktop + {n} mobile).

Proximas ejecuciones de /check-wp-visual compararan contra estas baselines.

PASO 3 — Comparar contra baselines

1. Verificar que existen baselines en baselines/wordpress/{dominio}/
2. Si no existen: informar y ofrecer capturarlas primero (PASO 2)

1. Capturar screenshots actuales (mismo proceso que PASO 2) en directorio temporal:

`` /tmp/qa-visual-{dominio}-{timestamp}/ ``

1. Para cada par (baseline vs actual), comparar:

Metodo 1 — Comparacion visual con Claude (recomendado):

• Leer ambas imagenes (baseline y actual) con la herramienta Read
• Claude compara visualmente y describe diferencias
• Clasificar cambios:
• REGRESSION: algo se rompio (layout, imagenes faltantes, texto cortado)
• CHANGE: cambio intencional (nuevo contenido, redesign)
• MINOR: diferencia insignificante (fecha actualizada, contador de visitas)

Metodo 2 — pixelmatch (cuando este instalado): ``bash # Requiere: npm install -g pixelmatch-cli pixelmatch baseline.png actual.png diff.png --threshold 0.1 ``

1. Para cada diferencia detectada, documentar:
2. Que pagina y viewport
3. Que cambio (descripcion visual)
4. Screenshot de la diferencia
5. Clasificacion: REGRESSION / CHANGE / MINOR

PASO 4 — Generar informe

## Visual Regression — {sitio} — {fecha}

### Resumen
[VERDE: sin regresiones / AMARILLO: cambios detectados / ROJO: regresiones]

### Comparacion
| Pagina | Viewport | Estado | Detalle |
|--------|----------|--------|---------|
| Homepage | Desktop | OK | Sin cambios |
| Homepage | Mobile | CHANGE | Nuevo banner promocional |
| Servicios | Desktop | REGRESSION | Imagen hero no carga |
| Servicios | Mobile | REGRESSION | Layout roto en ancho < 400px |

### Regresiones detectadas
1. **servicios-desktop.png** — Imagen hero no carga
   - Baseline: [imagen visible]
   - Actual: [placeholder o roto]
   - Posible causa: URL de imagen cambiada o CDN down

### Cambios intencionados (verificar con el equipo)
1. **homepage-mobile.png** — Nuevo banner superior
   - Actualizar baseline? (ejecutar `/check-wp-visual baseline {sitio}`)

### Baselines info
- Capturadas: {fecha baseline}
- Antiguedad: {n} dias

PASO 5 — Actualizar baselines (si se solicita)

Si el usuario confirma que los cambios son intencionados:

1. Copiar screenshots actuales como nuevas baselines
2. Actualizar metadata.json con nueva fecha
3. Informar: "Baselines actualizadas para {sitio}. {n} screenshots reemplazadas."

Modo batch

Si $ARGUMENTS es "todos":

1. Ejecutar PASO 3 para cada sitio con baselines
2. Generar informe consolidado:

## Visual Fleet Check — {fecha}

| Sitio | Pages | OK | Changes | Regressions |
|-------|-------|----|---------|-------------|
| proportione.com | 8 | 7 | 1 | 0 |
| porqueviven.org | 6 | 4 | 1 | 1 |
| institutoteologia.org | 8 | 8 | 0 | 0 |

1. Guardar en $QA_PROPORTIONE_DIR/reports/{fecha}/visual/fleet-report.md

Notas

• Los screenshots pueden variar ligeramente por: contenido dinamico (fechas, contadores), ads, cookies banners, A/B tests. Usar threshold del 5% antes de reportar como regresion.
• Siempre cerrar cookies/GDPR banners antes de capturar (click en "Aceptar" si aparece).
• Para sitios con login, capturar solo las paginas publicas a menos que se indique lo contrario.
• Las baselines deben actualizarse despues de cada cambio de diseno intencionado.
• Si las baselines tienen mas de 30 dias, sugerir recapturarlas.
• Playwright MCP ya esta configurado en el entorno — no requiere instalacion adicional.