Este documento describe PhantomCSS, un módulo para CasperJS que permite automatizar pruebas de regresión visual en sitios web. PhantomCSS usa PhantomJS para capturar imágenes del sitio y Resemble.js para compararlas y detectar cambios visuales no deseados. Esto permite probar el diseño del sitio de forma escalable sin necesidad de revisión manual.

1. Tests de regresión visual
con PhantomCSS
@darthrubens

2. Problema
En proyectos con cierto tamaño y número de
desarrolladores, es cada vez más común que cambios en
el código, rompan el layout del sitio en lugares
inesperados.
Cambios visuales no son detectados por tests funcionales.
Probar manualmente todo el sitio no es escalable.

3. PhantomCSS
Es un módulo de CasperJS para automatizar tests de
regresión visual con PhantomJS y Resemble.js

4. Ventajas
Descubre fallos visuales que otros tests funcionales no
podrían detectar
Como está basado en PhantomJs, se ejecuta en un
headless browser, lo cual lo hace rápido
Código en javascript, fácil curva de aprendizaje

5. Diffs visuales

6. Configuración

7. Test de ejemplo

8. Metodología
● Ejecutar los tests por primera vez (cero conflictos)
● Agregar capturas “buenas” al repositorio
● Ejecutar los tests junto con cada cambio/release
candidate
● Ante conflictos decidir si es un error o efectivamente se
actualizó esa vista
● Elegir screenshot “correcto” y actualizar repo
● Escribir nuevos tests para nuevas vistas

9. Visor de snapshots (opcional)

10. Visor de snapshots (opcional)

11. Visor de snapshots (opcional)

12. Algunos tips
● Calibrar el porcentaje de tolerancia.
● Tomar snapshots de componentes, en lugar de páginas
completas, para evitar cohesión y minimizar test rotos al
ocurrir cambios.
● Definir convenciones para nombres de los screenshots
● Agrupar tests en diferentes módulos o secciones del
sitio web.