Visual Regression Testing

Para realizar las pruebas de regresión visual se utilizo la herramientas ResembleJS. Resemble.js es una herramienta que permite realizar análisis visual sobre imágenes haciendo uso de JavaScript y HTML. Esta se distribuye como una librería de Node.js, permite extraer información sobre una imagen y también realizar comparaciones entre imágenes.

Generar reportes VRT usando Resemble JS

Tenga en cuenta que antes de ejecutar estas pruebas, primero debe haber ejecutado las pruebas en Kraken y Cypress, debido a que allí se generar los respectivos screenshots que serán utilizados por Resemble para la regresión visual. Los screenshots se encuentran en la siguiente ruta y tienen la siguiente estructura:

Kraken/
  reports/
    scenario{{numero_escenario}}/
      V4.35/
        -1.png
        -2.png
        - ....
        -n.png
      V4.44
        -1.png
        -2.png
        - ....
        -n.png

Donde {{numero_escenario}} es el numero del escenario. Cada escenario contiene dos carpetas, una para cada versión y estas contienen los respectivos screenshots.

Ejecución de las pruebas de Regresión Visual

una vez haya clonado este repositorio en su maquina local, ubiquese en la carpeta Ghost/RTV_ResembleJS y ejecute el siguiente comando:

node index.js

Esto generará el reporte y la comparación de las respectivas imagenes para todos los escenarios definidos. Note que en la carpeta RTV_ResembleJS/results se encuentran las imagenes resultantes de la comparación y el reporte generado por cada escenario, el cual tiene la siguiente estructura:

RTV_ResembleJS/
  reports/
    scenario{{numero_escenario}}/
      compare/
        -compare-1.png
        -compare-2.png
        - ....
        -compare-n.png
        -index.txt
        -report.html

En donde {{numero_escenario}} es el número del escenario. Cada carpeta scenario{{numero_escenario}} contiene una carpeta compare que aloja las imagenes comparadas y reporte html.

Analisis de la herramienta

Pros

• Fácil instlación.
• Se requiere unicamente de un archivo para definir y ejecutar las pruebas.
• No es necesario definir las pruebas E2E en el código, unicamente con las imagenes que se quieren comparar es suficiente.
• Fácil generación de reportes en formato HTML
• Bastante documentación y ejemplos
• Soportada por la comunidad

Contras

• Puede que en casos donde la cantidad de imagenes a comprar sea significativa, puede ser lenta, sin embargo, para nuestro caso de uso no se evidencio mayor lentitud.