Pruebas automatizadas de procesamiento de imágenes - Guía práctica de regresión visual

Qué son las pruebas de regresión visual - Detectar cambios de imagen automáticamente

Las pruebas de regresión visual (Visual Regression Testing, VRT) detectan automáticamente cambios inesperados en la UI o salida de imágenes mediante comparación de capturas de pantalla. Cuando un cambio de código causa diferencias visuales, la prueba marca las áreas de diferencia para revisión humana.

Por qué se necesita VRT:

• Los cambios CSS pueden afectar páginas inesperadas
• Los ajustes de parámetros en pipelines de procesamiento de imágenes pueden causar cambios en la salida
• Las actualizaciones de dependencias pueden alterar los resultados de renderizado
• La inspección manual página por página no es escalable

Flujo de trabajo:

• Primera ejecución: Generar capturas de referencia (baseline)
• Ejecuciones posteriores: Generar nuevas capturas, comparar píxel a píxel con la referencia
• Diferencia supera umbral: Marcar como fallo, generar imagen de diferencias
• Revisión humana: Confirmar si es un cambio esperado o un bug de regresión
• Actualizar referencia: Actualizar baseline tras confirmación

Implementación VRT con Playwright - Fundamentos de comparación de capturas

Playwright incluye funcionalidad de comparación de capturas integrada, siendo la forma más simple de implementar VRT.

Uso básico:

import { test, expect } from '@playwright/test';

test('homepage visual', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveScreenshot('homepage.png', {
maxDiffPixelRatio: 0.01,
});
});

Opciones de configuración:

• maxDiffPixelRatio: Proporción de píxeles diferentes permitida (0.01 = 1%)
• threshold: Umbral de diferencia de color por píxel (0-1)
• animations: 'disabled': Deshabilitar animaciones para evitar inestabilidad
• mask: Enmascarar áreas de contenido dinámico (hora, anuncios)

Actualizar referencia:

npx playwright test --update-snapshots

Pruebas de pipeline de imágenes - Calidad de compresión y verificación de salida

Verificar la calidad de salida y corrección del pipeline de procesamiento de imágenes.

Dimensiones de prueba:

• Corrección de formato: El archivo de salida es un WebP/AVIF/PNG válido
• Corrección de dimensiones: Las dimensiones de salida coinciden con los breakpoints configurados
• Umbral de calidad: SSIM > 0.95 (comparado con la imagen original)
• Tamaño de archivo: No excede el máximo establecido
• Metadatos: Metadatos sensibles eliminados, información de copyright preservada

Verificación de salida Sharp:

const metadata = await sharp(output).metadata();
expect(metadata.format).toBe('webp');
expect(metadata.width).toBe(1280);
expect(metadata.size).toBeLessThan(200000);

Prueba de calidad SSIM: Usar sharp o ssim.js para calcular el valor SSIM antes y después de la compresión. Establecer un umbral (como 0.95); si está por debajo, la prueba falla.

Integración CI/CD - Ejecución automática con GitHub Actions

Integrar pruebas de regresión visual en el pipeline CI/CD, ejecutándose automáticamente en cada PR.

Configuración de GitHub Actions:

name: Visual Tests
on: [pull_request]
jobs:
vrt:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- run: npx playwright install --with-deps
- run: npx playwright test
- uses: actions/upload-artifact@v4
if: failure()
with:
name: visual-diff
path: test-results/

Consistencia multiplataforma: Diferentes SO renderizan fuentes de forma distinta, lo que puede causar falsos positivos. Solución: Usar contenedores Docker para asegurar un entorno de renderizado consistente; o usar el parámetro threshold para tolerar diferencias mínimas.

Gestión de referencias: Hacer commit de las capturas de referencia al repositorio Git. Cuando se actualizan las referencias en un PR, los revisores pueden ver los cambios visuales en el diff.

Percy y reg-suit - Servicios VRT en la nube

Los servicios VRT en la nube proporcionan capacidades de comparación más potentes, colaboración en equipo y pruebas cross-browser.

Percy (BrowserStack):

• Captura automática de pantalla y comparación con referencia
• Detección inteligente de diferencias: Ignora diferencias de antialiasing y desplazamientos subpíxel
• Flujo de aprobación en equipo: Aprobar/rechazar cambios visuales directamente en el PR
• Cross-browser: Captura simultánea en Chrome, Firefox, Safari
• Integración: npx percy exec -- npx playwright test

reg-suit:

• Herramienta VRT de código abierto, capturas almacenadas en S3
• Muestra informe de diferencias en comentarios de PR en GitHub
• Soporta algoritmos de comparación personalizados
• Bajo coste (solo almacenamiento S3)

Recomendación de elección:

• Equipos pequeños/proyectos open source: VRT integrado de Playwright (gratuito)
• Necesidad cross-browser: Percy (de pago pero potente)
• Sensible al coste: reg-suit (open source + S3)

テスト自動化の実践書は Amazon で探せます

Automatización de pruebas de rendimiento de imágenes - Integración con Lighthouse CI

Monitoreo automatizado del impacto de las imágenes en el rendimiento de la página, previniendo regresiones de rendimiento.

Configuración de Lighthouse CI:

// lighthouserc.js
module.exports = {
ci: {
assert: {
assertions: {
'uses-webp-images': 'error',
'uses-responsive-images': 'warn',
'offscreen-images': 'warn',
'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
}
}
}
};

Verificaciones de rendimiento específicas de imágenes:

• uses-webp-images: Verifica si se usan formatos modernos
• uses-responsive-images: Verifica si se proporcionan tamaños apropiados
• offscreen-images: Verifica si las imágenes fuera de pantalla usan carga diferida
• unsized-images: Verifica si se establecen atributos de ancho y alto

Auditoría de imágenes personalizada: Escribir plugins personalizados de Lighthouse para verificar reglas de imágenes específicas del proyecto (como tamaño máximo de archivo, obligación de usar dominio CDN, etc.).