Complementando nuestros test End-to-End con visual testing

Índice

1. 1. Introducción
2. 2. ¿A qué nos referimos por Visual Testing?
3. 3. Alternativas al Visual Testing
4. 4. Instalación del plugin Cypress-image-diff
   1. 4.1 Instalación
   2. 4.2 Importamos el plugin
   3. 4.3 Añadimos un comando a Cypress
5. 5. Vamos con un ejemplo
   1. 5.1 Premisas
6. 6. Consideraciones finales
7. 7. Glosario de términos
8. 8. Referencias bibliográficas

 

1. Introducción

Las pruebas que podemos realizar desde Cypress para End2End están enfocadas en reproducir de alguna manera y validar las acciones que realiza un usuario desde un punto de vista funcional. De la misma manera, otras alternativas como Playwright o el uso de Selenium van en la misma dirección para este tipo de pruebas.

Aunque con Cypress es posible realizar capturas de pantalla, su objetivo es aportar evidencia, pero no el de verificar el formato que se presenta.

En muchos casos, nos encontramos con errores visuales que no detectamos con nuestros test End2End y que, por desgracia, son los que primero saltan a la vista o, en algunas ocasiones, impiden la usabilidad o legibilidad de una aplicación.

Plantearnos abarcar test visuales con un marco de test funcional End2End es un error, puesto que el coste de los test y su mantenimiento se dispara de forma exponencial, y además, nunca seremos capaces de testear con calidad el aspecto visual.

Vamos a intentar ampliar o complementar la capacidad que tenemos con unos test funcionales End2End para verificar la apariencia y el formato de las pantallas, además de dicha funcionalidad.

El Visual Testing es un buen complemento a los test End2End, aunque bien podría plantearse de forma independiente. Si decidimos plantear su uso de forma independiente, tenemos que llegar a una solución de compromiso, puesto que, aunque nos permite ampliar el alcance de nuestras pruebas y hacer la revisión visual que hemos comentado, su mantenimiento y relativa propensión a generar falsos positivos son dos desventajas a tener en cuenta.

Con llegar a una solución de compromiso, nos referimos a que no debemos caer en testear todas las interfaces de nuestra aplicación; debemos seleccionar aquellas interfaces o partes donde la regresión visual realmente nos aporte valor.

 

2. ¿Pero, a qué nos referimos con Visual Testing?

Las pruebas visuales tienen como principal objetivo validar que no se ha producido ningún bug visual, es decir, que no ha habido ningún cambio que provoque que un elemento se haya desajustado, cambiado de tamaño, desplazado, aparezca con colores distintos, etc.

La forma en la que se realiza este tipo de test es, básicamente, la comparación de las capturas o imágenes en las que se buscan las diferencias. Una será la referencia o «baseline» y la otra, la imagen a probar.

A grandes rasgos, el Visual Testing consiste en una serie de pasos:

1. Abrir un navegador simulando la interacción de un usuario en la aplicación.
2. Tomar una captura de pantalla.
3. Comparar la captura de pantalla con la correspondiente en el baseline.
4. Generar/presentar los resultados de la comparación: poner de manifiesto las diferencias.

 

3. Alternativas de herramientas para Visual Testing

Partiendo de un proyecto End2End con Cypress, existen varias alternativas para la implementación del Visual Testing; así, podemos utilizar herramientas open source o bien soluciones más avanzadas desarrolladas por empresas.

Algunos ejemplos de herramientas desarrolladas por empresas son:

• Aplitools: Plataforma avanzada de pruebas visuales basada en inteligencia artificial. Aplitools usa tecnología de visión por computadora para detectar cambios visuales en las aplicaciones y asegura que la interfaz de usuario se vea como debería en diferentes entornos y dispositivos.
• Oculow: Herramienta de pruebas visuales que permite detectar diferencias entre capturas de pantalla de versiones distintas de una aplicación. Oculow es conocida por ser fácil de integrar y económica, adecuada para proyectos que necesitan comparaciones visuales rápidas y efectivas.
• Chromatic: Solución de pruebas visuales específica para componentes de interfaces construidos con frameworks como React. Chromatic permite capturar, gestionar y comparar componentes de interfaz, ayudando a los equipos a verificar que los cambios en el código no afecten la apariencia de los elementos de la UI.
• Happo.io: Plataforma de pruebas visuales enfocada en componentes UI y diseñada para funcionar en múltiples navegadores y pantallas. Happo.io es útil para equipos que trabajan en entornos de desarrollo de interfaces complejas y quieren asegurar la consistencia visual en distintos dispositivos.
• Percy: Herramienta de pruebas visuales adquirida por BrowserStack que permite realizar capturas de pantalla automáticas y comparar diferencias visuales entre versiones de una aplicación. Percy es compatible con múltiples frameworks y se integra bien en pipelines de CI/CD, ayudando a detectar cambios inesperados en la interfaz.

Otros ejemplos de herramientas open source son varios plugins para Cypress, como:

• Cypress-image-snapshot: Plugin para Cypress que permite capturar y comparar capturas de pantalla en pruebas visuales. Utiliza herramientas de comparación de imágenes para detectar cambios visuales en la interfaz de usuario entre ejecuciones de prueba.
• Cypress-visual-regression: Extensión de Cypress que facilita la detección de regresiones visuales en aplicaciones web. Este plugin captura imágenes durante las pruebas y las compara con una imagen de referencia para verificar cambios inesperados.
• Cypress-image-diff-js: Plugin de Cypress que emplea la biblioteca `pixelmatch` para realizar comparaciones de imágenes a nivel de píxeles. Es útil para detectar diferencias visuales entre imágenes en pruebas de regresión visual.

Para nuestra pequeña ilustración, vamos a considerar el uso de cypress-image-diff-js.

https://github.com/uktrade/cypress-image-diff

Esta herramienta usa la librería JavaScript Pixelmatch para implementar la comparación de las imágenes a nivel de píxeles.

https://github.com/mapbox/pixelmatch

 

4. Instalación del plugin Cypress-image-diff

Esta herramienta utiliza Pixelmatch como motor y se apoya en Cypress para tomar capturas de pantalla.

 

4.1 Instalación

Para instalar las herramientas necesarias para la comparación de imágenes en Cypress, ejecuta el siguiente comando:

npm i -D cypress-image-diff-js cypress-image-diff-html-report

 

4.2 Importación del plugin

Para importar e inicializar el plugin, vamos al archivo cypress.config.js de nuestro proyecto y añadimos las dos líneas en el recuadro amarillo:

 

4.3 Añadir comando a Cypress

Ahora utilizamos la capacidad de los comandos de Cypress para ‘envolver’ las llamadas para las comparaciones de las imágenes. Vamos al fichero commands.js de Cypress y añadimos:

 

5. Ejemplo de uso

Partimos de un proyecto básico con Cypress para pruebas End-to-End. Es un pequeño proyecto que realiza tres pruebas básicas sobre un sitio web que es una tienda de animales.

Podemos encontrar este sitio en Visita la tienda de animales de OctoPerf.

Como podemos ver a continuación, en este caso validamos la búsqueda comprobando que aparece el nombre “Bulldog” en la tabla del resultado. También podríamos validar funcionalmente otros aspectos como el ID del producto o el comentario.

Para la implementación de Cucumber usamos cypress-cucumber-preprocessor, que es uno de los tantos plugins que tenemos para Cypress (https://docs.cypress.io/plugins). De hecho, ahora veremos cómo usar otro de ellos para la implementación del visual testing más adelante.

Login.feature

Feature: Login
  Test set that includes all the tests related to the Login functionality.

  @End01
  Scenario: Successful login
    Given I am on the "Login" page
    When I log in
    Then I should see the "Home" page

Logout.feature

Feature: Logout
  Test Plan that includes all cases related to main Menu functionality.

  @End02
  Scenario: Logout
    Given I am on the "Login" page
    And I log in
    When I log out
    Then I should be on the "Login" page

Search.feature

Feature: Search

  @End03
  Scenario: Search an item
    Given I am on the "Login" page
    And I log in
    When I search ""
    Then I should see "" in the grid
    Examples:
      | name    |
      | Bulldog |

Nos vamos a centrar en este último caso, por el cual se introduce un término con el nombre de una raza de perro y, tras hacer clic sobre el botón Search, se lanza la búsqueda mostrándonos el resultado en una tabla:

Como podemos ver, en este caso validamos la búsqueda comprobando que aparece el nombre “Bulldog” en la tabla del resultado. También podríamos validar funcionalmente otros aspectos como el ID del producto o el comentario.

En cualquier caso, se trata de una validación para verificar que funcionalmente la búsqueda ha ido bien, pero no cómo nos está mostrando los resultados: no entramos en validar el ‘aspecto’ o maquetación de la respuesta, la tabla, la imagen y su formato…

Es aquí donde vamos a incluir, junto con la validación funcional, un test complementario visual:

Definimos en nuestro feature una descripción más exacta de la prueba completando más la sentencia Then. Por otro lado, en la implementación hacemos uso del comando compareSnapshot y le pasamos como parámetro el nombre de la imagen que va a capturar.

Aquí, cuidado, nos tenemos que asegurar de que hacemos la captura en el momento adecuado, es decir, después de validar la respuesta por parte de Cypress del resultado.

Una buena práctica en caso de tener un test visual (por ejemplo, sin estar en cooperación con otro tipo de test funcional) es la de añadir sentencias comprobatorias para asegurar, por ejemplo, en este caso, que ya tenemos la imagen correcta a capturar, el resultado de la búsqueda.

Nos tenemos que asegurar siempre de que nuestra aplicación ha mostrado efectivamente aquello que pretendemos capturar y luego comparar.

Lanzamos ahora el test desde la interfaz gráfica de Cypress:

También, si nos vamos al proyecto, vemos nuevas carpetas:

En esta ejecución, automáticamente nos ha incluido en el baseline la captura de la pantalla.

Después, en la carpeta comparison igualmente la captura (esta sería la ejecución de la prueba)

Y finalmente, en diff nos lleva realmente el resultado de la comparación.

Para comprobar y ver un caso con error en el que se encuentran diferencias, vamos a modificar la prueba, haciendo ahora que la búsqueda nos devuelva otra raza, ahora de gato. En este caso, detectará que la captura del nuevo resultado no coincide con lo almacenado en el baseline que se toma como referencia.

Cambiamos la búsqueda, ejecutamos y, evidentemente, nos va a detectar diferencias haciendo que el test falle:

Si nos fijamos aquí en los resultados de la comparación, nos especifica el % de píxeles que marcan la diferencia (en la captura de la prueba 0.3122…). En un uso más avanzado, podemos configurar este nivel de exactitud haciendo la llamada con un segundo parámetro: testThreshold

Este parámetro es un número entre 0 y 1 que representa el porcentaje permitido de píxeles que pueden ser diferentes entre las dos imágenes.

https://cypress.visual-image-diff.dev/getting-started/cy.comparesnapshot-command

Muchas veces nos podemos encontrar casos en los que no interesa tener un nivel de exactitud fino del 100% y así evitamos falsos positivos.

Vamos a ver las capturas que nos ha realizado:

PREMISAS

Inicializamos el baseline en una ejecución exitosa de todos los tests. Por lo tanto, se requiere una versión estable para poder establecer las capturas que conforman las imágenes de referencia.

En las ejecuciones posteriores (mientras no eliminemos o actualicemos dicho baseline), se realizarán comprobaciones de cada una de las capturas. Cabe notar que, al hacer la captura, es necesario especificar el nombre de la imagen para mantener la correspondencia entre el baseline y las nuevas ejecuciones.

Hasta aquí, muy bien, pero… ¿qué pasa si consideramos escenarios outline? En este caso, tenemos un problema, ya que necesitamos distinguir la imagen que corresponde a cada escenario.

Como ya sabemos, en Gherkin, cuando los escenarios son similares, podemos valernos de plantillas y disponer los datos en forma de tablas, de modo que no tengamos que repetir los escenarios varias veces.

Entonces, ahora tenemos lo siguiente:

Si lanzamos estos escenarios para la implementación que tenemos actualmente, sobrescribiremos la captura de un escenario con la del otro y, además, en ambos casos (Persian y Bulldog), compararemos con la captura del resultado Bulldog que tenemos ahora en nuestro baseline, por lo que el escenario con Bulldog dará OK y el escenario con el gato Persian nos dará error:

Para solucionar esto, debemos considerar la captura como salida del escenario outline; de hecho, podemos tratarla como cualquier otro resultado esperado del test. El escenario outline quedará de la siguiente manera:

Su implementación en los step_definitions recibirá un nuevo parámetro:

En este caso, gestionamos las distintas capturas para ser comparadas según cada caso de los posibles escenarios. Generamos una captura distinta para cada caso de resultado en la tabla.

Lanzamos para verlo:

Como podemos ver, ahora tenemos una captura distinta para cada una de las combinaciones, de forma que podamos comparar visualmente cada raza o animal de manera independiente.

Es importante comentar aquí que también podemos plantear otra forma de abordar los tests visuales: referirse a zonas concretas de la pantalla o a elementos específicos, acotando la parte a comparar dentro de una pantalla. Esto permite afinar el objetivo comparativo y trabajar con partes determinadas o especialmente sensibles. Esto, por ejemplo, puede ser útil para evitar banners o elementos dinámicos que están continuamente variando en una aplicación web.

Esta característica, el nivel de exactitud de la comparación o bien otras opciones, dependen del framework seleccionado para implementar el testing visual.

 

6. Consideraciones finales

Hemos visto un sencillo caso para Cypress y algunos de los plugins que soporta.

El uso de soluciones comerciales para gestionar las capturas y comparar las imágenes nos brinda mayores capacidades. Por ejemplo, con Oculow o Applitools podemos determinar distintos niveles de comparación para afinar aún más el nivel de diferenciación que requerimos; incluso, tenemos la posibilidad de congelar las imágenes dinámicas para realizar la posterior comparación.

Para la comparación se han utilizado algoritmos a nivel de píxeles, y como hemos visto, es necesario especificar el porcentaje de error o de diferencia que asumimos, ya que puede ser un foco de falsos positivos. Hoy en día, la evolución del Visual Testing tiende a implementar estos algoritmos con inteligencia artificial mediante servicios en la nube, lo cual hace mucho más fiables los resultados.

El Visual Testing es una herramienta muy útil, ya que valida la experiencia de usuario al garantizar que nuestra aplicación se verá como se espera, generando gran satisfacción en el cliente. Sin embargo, no debemos utilizarlo de forma masiva; lo más lógico es considerar este tipo de prueba como complementaria a otro tipo de pruebas, dado que puede ser más lenta y menos eficiente, especialmente si se aplica de forma sistemática en todas las pantallas de una aplicación o en aplicaciones con interfaces de usuario complejas. Esto podría repercutir en un rendimiento de pruebas inasumible, así como en un alto esfuerzo para su revisión y mantenimiento.

 

7. Glosario de términos

1. Visual Testing: Tipo de prueba cuyo objetivo es verificar la apariencia visual de una aplicación, asegurándose de que los elementos de la interfaz de usuario (como tamaño, color, posición) se muestran correctamente y no han sido modificados inesperadamente.
2. End-to-End (E2E): Prueba que simula el recorrido completo de un usuario en una aplicación, verificando que todas las partes del sistema funcionan correctamente en conjunto, desde el frontend hasta el backend.
3. Baseline: Imagen de referencia utilizada en pruebas visuales para comparar capturas de pantalla actuales. Es la «base» contra la cual se verifican los cambios en versiones futuras.
4. Plugin: Componente de software que añade una funcionalidad específica a una aplicación principal. En este contexto, los plugins se utilizan para ampliar las capacidades de Cypress en pruebas visuales y funcionales.
5. Pixelmatch: Biblioteca JavaScript que realiza comparaciones de imágenes a nivel de píxeles. Es utilizada en pruebas visuales para identificar diferencias precisas entre imágenes.
6. Falsos positivos: Resultados de pruebas que indican errores o diferencias donde realmente no los hay. En visual testing, los falsos positivos pueden ocurrir si la comparación es demasiado estricta o si se analizan elementos visualmente irrelevantes.
7. Threshold: Parámetro que define el nivel de exactitud en una comparación. En visual testing, representa el porcentaje permitido de diferencia entre dos imágenes antes de que se considere un error.
8. Comparación de imágenes a nivel de píxeles: Método que compara cada píxel en dos imágenes para detectar diferencias exactas. Este método es útil para detectar pequeños cambios visuales pero puede generar falsos positivos en imágenes que incluyen elementos dinámicos.
9. Snapshot: Captura de pantalla o imagen tomada en un momento específico durante la ejecución de una prueba, utilizada para comparar visualmente con una imagen de referencia.
10. Step Definitions: Archivo en el que se definen las acciones asociadas a cada paso en un escenario de prueba de Cucumber. Estas definiciones permiten traducir los pasos descritos en lenguaje natural (Gherkin) a código ejecutable.
11. Gherkin: Lenguaje de scripting que permite escribir pruebas de software de manera comprensible para no técnicos. Gherkin utiliza palabras clave como Given, When, y Then para describir pasos de prueba.
12. Scenario Outline: Estructura en Gherkin que permite definir un solo escenario de prueba con múltiples conjuntos de datos, ejecutando el escenario con cada conjunto de datos.
13. Cypress-image-diff-js: Plugin para Cypress que permite comparar capturas de pantalla para detectar diferencias visuales. Usa Pixelmatch para realizar la comparación de imágenes.
14. CI/CD (Continuous Integration / Continuous Deployment): Práctica de desarrollo que automatiza la integración y el despliegue de código, permitiendo que los cambios se prueben y lancen de manera continua en un entorno de producción o de prueba.
15. Maquetación: Estructura o diseño visual de una página o aplicación. En pruebas visuales, la maquetación se verifica para asegurar que los elementos visuales están organizados correctamente.
16. Framework: Conjunto de herramientas, bibliotecas y convenciones que facilitan el desarrollo de software. En el contexto de pruebas, un framework de testing proporciona un entorno estructurado para escribir y ejecutar pruebas.
17. Comparación visual: Proceso de comparar dos imágenes para verificar si existen diferencias visuales. En pruebas automatizadas, este proceso se realiza mediante algoritmos que analizan cada píxel o zonas específicas de las imágenes.
18. Regresión visual: Cambios visuales no deseados que aparecen en una aplicación tras realizar modificaciones en el código. El testing visual ayuda a detectar estos cambios.

 

Referencias bibliográficas

1. «Automated Software Testing: Introduction, Management, and Performance»
   • Autores: Elfriede Dustin, Jeff Rashka, John Paul
   • Editorial: Addison-Wesley Professional
   • Año de publicación: 1999
   • Descripción: Este libro ofrece una introducción detallada a las pruebas automatizadas y cubre aspectos de gestión y rendimiento en pruebas de software. Aunque no específico sobre visual testing, proporciona una base sólida sobre los fundamentos de la automatización de pruebas que son útiles para comprender el contexto de Cypress y visual testing.
2. «Continuous Testing for DevOps Professionals: A Practical Guide From Industry Experts»
   • Autores: Eran Kinsbruner, Antoine Aymer
   • Editorial: Apress
   • Año de publicación: 2018
   • Descripción: Este libro explora la integración de pruebas continuas en entornos DevOps, un tema relacionado con CI/CD y pipelines de automatización. Ofrece una visión moderna de las prácticas de prueba, incluyendo la importancia del visual testing en entornos de despliegue continuo.
3. «Cypress Essentials: Modern End-to-End Testing»
   • Autor: Pradeep Soundararajan
   • Editorial: Packt Publishing
   • Año de publicación: 2020
   • Descripción: Este libro está dedicado exclusivamente a Cypress y sus aplicaciones en pruebas End-to-End. Es una excelente guía para aprender a implementar Cypress en proyectos y profundizar en temas como el uso de plugins para visual testing y la integración de herramientas de comparación de imágenes.
4. «JavaScript Testing Best Practices: End-to-End Testing with Cypress»
   • Autor: James Upton
   • Editorial: Leanpub
   • Año de publicación: 2021
   • Descripción: Aunque más enfocado en JavaScript, este libro detalla el uso de Cypress para pruebas automatizadas en aplicaciones modernas, incluyendo buenas prácticas y patrones de diseño aplicados a pruebas visuales. Es una referencia útil para quienes buscan aprender sobre Cypress en contextos reales.
5. «Visual Regression Testing with WebdriverIO: End-to-End Visual Testing for Modern Web Apps»
   • Autor: Narayan Prusty
   • Editorial: Independently Published
   • Año de publicación: 2022
   • Descripción: Este libro se centra en el concepto de visual regression testing usando WebdriverIO, otro marco de pruebas popular, pero proporciona principios y prácticas que también aplican al visual testing con Cypress y herramientas similares.
6. «The Complete Guide to UI Testing with Selenium and Cucumber»
   • Autores: Karl L. Hughes, Dennis Schultz
   • Editorial: Independently Published
   • Año de publicación: 2018
   • Descripción: Este libro ofrece una introducción a la realización de pruebas de interfaz de usuario (UI) con Selenium y Cucumber, cubriendo temas relacionados con la comparación de capturas de pantalla y la validación visual, que son útiles para quienes deseen comprender los conceptos básicos de visual testing aplicables a Cypress y plugins como cypress-image-diff-js.
7. «Effective Software Testing: A Developer’s Guide»
   • Autor: Maurício Aniche
   • Editorial: Manning Publications
   • Año de publicación: 2022
   • Descripción: Este libro cubre los principios básicos y avanzados de las pruebas de software con un enfoque en la implementación efectiva de las pruebas automatizadas. Ofrece una visión general sobre técnicas de testing que pueden ser complementarias al visual testing, y es útil para desarrolladores que desean optimizar sus prácticas de prueba en general.