Generalmente cuando pensamos en bugs, vienen a nuestra mente errores relacionados a la lógica de las aplicaciones que producen fallas y comportamientos que no son los esperados. En parte, al ejecutar (y automatizar) pruebas funcionales, buscamos detectar estos errores lo antes posible. Muchas veces puede ocurrir que dejemos pasar otros tipos de errores, más evidentes y reconocibles para un usuario como lo son los errores visuales (o bugs visuales), lo que nos lleva a preguntarnos: ¿qué tan importante sería detectarlos? En este post Luis Zambra de Abstracta responde estas preguntas y nos cuenta cómo hacerlo mediante pruebas de regresión visual.
Impacto de bugs visuales en la experiencia de usuario
Cuando hablamos de bugs visuales, no nos referimos a los errores de lógica antes mencionados, sino que nos referimos a aquellos defectos estéticos que hacen que las interfaces (o partes de estas, o componentes visuales de las mismas) no se visualicen como deberían, entorpeciendo así la experiencia de usuario. Aquí tenemos un ejemplo de un bug visual en Amazon Prime en mobile:
The "Filter" bar is following us in this #GUIGoneWrong from @amazon! Visual #UI bugs sneak into production regularly, but Applitools Eyes is here to help 🛠️ Reach out to learn how visual #AI #testautomation can keep your apps and sites visually flawless pic.twitter.com/IG4oVNC8iv
— Applitools (@Applitools) November 12, 2018
¿Qué es lo que está mal en la imagen? Vemos que una barra para filtrar artículos se interpone en medio de la descripción del artículo, lo cual puede ser bastante molesto para un usuario que quiera verlos. Así como este tipo de bugs pueden generar cierto malestar, también pueden dejar totalmente inutilizable la aplicación para los usuarios si los bugs son suficientemente graves (como por ejemplo: desplazando o desapareciendo componentes visuales importantes).
Incluso si desarrollamos pruebas automatizadas de UI, estas no están hechas para realizar validaciones visuales, por lo que dejarían pasar este tipo de errores.
Dicho esto, ¿podemos quedarnos tranquilos de que nuestras aplicaciones no presentarán nunca este tipo de bugs? Podemos observar viendo el ejemplo presentado que incluso en aplicaciones de empresas que seguramente siguen estándares de calidad muy altos, este tipo de bugs pueden ocurrir.
Resumiendo los anteriores puntos:
- Nuestra aplicación puede quedar expuesta a bugs visuales, puesto que generalmente las pruebas automatizadas de UI no los detectan.
- Es importante detectar estos bugs, ya que pueden ser muy perjudiciales para la usabilidad y la accesibilidad de nuestra aplicación, impactando directamente la experiencia de nuestros usuarios.
Conociendo mejor la problemática de dejar pasar bugs visuales, podemos empezar a preguntarnos ¿cómo los detectamos de forma temprana?
Pruebas de regresión visual
Aquí es donde nos interesará considerar pruebas de regresión visual. Estas pruebas validan que el aspecto de nuestra aplicación no haya sufrido cambios inesperados de la siguiente manera: tenemos una captura (baseline) de la aplicación donde sabemos que funciona, cada vez que ejecutamos las pruebas se verifica si la aplicación cambió con respecto a la baseline, de ser así la prueba se marca como fallida.
Estas pruebas son especialmente útiles para detectar si se generaron errores visuales luego de haber hecho cambios en el sistema. Pueden integrarse a pruebas automatizadas que ya tengamos (como Selenium o WebdriverIO) mediante herramientas que permitan regresión visual. Además, muchas de estas herramientas permiten optar por aplicar varias lógicas de comparación de imágenes (por ejemplo, fijándose en la estructura de una interfaz, o en el contenido), lo que permite flexibilizar las pruebas y obtener resultados determinísticos.
Incorporando regresión visual: ventajas y desventajas
Ahora que tenemos un mejor entendimiento de en qué consisten las pruebas de regresión visual, podemos determinar algunas ventajas y desventajas de incorporarlas a nuestro proceso de pruebas automatizadas (te recomiendo leas sobre cuándo y cómo automatizar pruebas). Nos enfocaremos en las más relevantes y menos dependientes de herramientas específicas.
Ventajas de la regresión visual automática
- Mayor alcance de las pruebas automatizadas (o sea, con las mismas pruebas, se llegan a verificar más aspectos).
- Detección de errores visuales de forma temprana y rápida.
Desventajas de la regresión visual automática
- Gran costo de mantenimiento, debido a que mantenemos capturas de interfaces web y debemos tener en cuenta variantes como: browsers, dispositivos, sistemas operativos y más.
- Las comparaciones de imágenes pueden devolver falsos positivos que pueden llevar a resultados poco confiables y pérdida de tiempo analizando fallos que no se corresponden con errores.
Teniendo en cuenta estos puntos, podemos ver que ayudan a solucionar el problema de detectar bugs visuales a tiempo. Sin embargo, el alto costo de implementación y mantenimiento que implican puede llevar a que no sean redituables y terminemos descartando su uso, por lo que debemos implementarlas de tal forma que se puedan mitigar estas desventajas lo más posible.
Buenas prácticas en tests de regresión visual
Veamos algunas buenas prácticas que podemos aplicar para mitigar las desventajas antes vistas:
- Seleccionar las interfaces de la aplicación donde la regresión visual aporte resultados de valor (donde estén los casos más prioritarios o más críticos). Esto nos ayudará a acotar la cantidad de imágenes por casos a mantener y dejar sólo las más importantes.
- Evitar realizar siempre comparaciones exactas (pixel por pixel), puesto que son más propensas a fallar. En cambio, utilizar otros tipos de lógica de comparación más adecuados a nuestras necesidades (layout, contenido, etc). Esto nos ayudará a obtener resultados más determinísticos y confiables.
- Considerar baselines para los dispositivos donde nuestra aplicación tiene más impacto, y de la misma manera, en sus respectivos navegadores más usados. Esto nos ayudará a cubrir solamente las variantes más importantes.
En conclusión, estaremos sacando el mayor provecho a los resultados obtenidos de las pruebas y habremos reducido tanto el costo de mantenimiento como los falsos positivos.
Herramientas de regresión visual
Veamos algunas herramientas que nos permiten incorporar estas pruebas.
Applitools
Applitools es una plataforma de visual testing, provee una librería llamada Applitools Eyes disponible para lenguajes como Java, Javascript, Python, C#, entre otros lenguajes de programación, que puede integrarse a pruebas automatizadas a nivel de UI. Mediante esta librería, podemos integrar a nuestras pruebas varias funcionalidades para validar visualmente nuestras aplicaciones. Destacan sobre todo su gran comunidad y gran cantidad de material de estudio sobre esta herramienta.
Percy
Percy es una plataforma de visual testing, al igual que Applitools proporciona SDKs que se pueden integrar a pruebas a nivel de UI en varios lenguajes. Pueden destacarse sus funcionalidades de “screenshot stabilization” que permiten evitar falsos positivos por renderizado de fuentes o imágenes animadas. Por más información sobre esto revisá la documentación de Percy.
Oculow
Oculow es una novedosa herramienta de visual testing, al igual que Applitools cuenta con una plataforma web de test management y está disponible en varios lenguajes de programación (Java, Javascript y Python). Además de esto trae una innovadora funcionalidad para manejar baselines aplicando inteligencia artificial. Básicamente, nos da la opción de que la herramienta decida si en la imagen capturada existen bugs visuales o bien la interfaz cambió. Podés leer más sobre esto en la documentación de Oculow.
Conclusión
En definitiva, podemos ver que las pruebas de regresión visual tienen muchísimo potencial. Permiten probar aplicaciones con un enfoque visual que no podemos lograr con otros tipos de pruebas. Así logramos un cubrimiento importantísimo frente a errores que no siempre llegamos a detectar y que afectan directamente la experiencia de usuario. Creo que incorporar estas pruebas es una práctica que definitivamente recomendaría a cualquier tester, sobre todo por la gran importancia que brindan sus resultados a la experiencia de usuario.
Lo primero agradecerte tus post, que me están siendo muy útiles.
Ahora la pregunta, en tu opinión, ¿cuál es el más fácil de usar y no tiene coste?
Hola Conchi, ¿cómo estás?
Me alegro mucho que te estén sirviendo los posts 🙂
En mi opinión, la herramienta más fácil de usar de las que mencioné sería Applitools, más que nada por el hecho de que la plataforma es bastante user friendly y hay buena documentación y cursos gratuitos que facilitan bastante el aprendizaje.
En cuanto a costes, todas tienen planes gratuitos.
¡Saludos!
Soy bastante nuevo en todos estos temas, pero me parece genial poder aprender sobre las pruebas de regresión visual que ni siquiera se me había pasado por la mente.
Además gracias por mencionar algunas de estas herramientas.
Estoy haciendo el curso de Software tester, soy nueva en este tema y me pareció muy interesante ya que entendí varios conceptos que me serán útiles para aplicar en el curso. Muchas gracias.
Impressive posts! My blog QH3 about Thai-Massage also has a lot of exclusive content I created myself, I am sure you won’t leave empty-handed if you drop by my page.