06/11/2024

Visual Testing automatizado con Selenium

COMPARTIR EN:

  • Linkedin Logo
  • Twitter Logo
  • Facebook Logo
  • Mail Logo

¿Te gustaría descubrir cómo mejorar la calidad visual de tu aplicación de manera eficiente y precisa? En nuestro último blog, exploramos a fondo el testing visual automatizado con Selenium. Aprende qué es el testing visual, cómo funciona, y las herramientas que utilizamos.

Descubre cómo esta técnica puede ayudarte a detectar cambios no deseados en la interfaz de usuario, asegurando una experiencia coherente y de alta calidad.

visual testing

¿Qué es el testing visual?

El Testing Visual es una técnica de pruebas que se enfoca en verificar a través de la comparación de imágenes, los elementos de la UI, como por ejemplo botones, imágenes, formularios, entre otros, e identificar si sufrieron cambios no deseados entre las distintas versiones del sistema bajo prueba.

¿Cómo funciona?

Cómo mencionamos anteriormente, el testing visual funciona en base a capturas de imágenes, que se toman en aquellos lugares específicos de la UI donde se desee verificar.

Para realizar estas capturas y poder hacer las verificaciones, es necesario emplear al menos dos ejecuciones de pruebas.

Durante la primera ejecución de las pruebas, se toma una captura inicial, denominada Línea Base (Baseline) que será el punto de referencia con el que se comparará cada una de las ejecuciones posteriores. Dicha captura puede ser de toda la UI o de cierto componente desplegado en ella (botones, formularios, imágenes, entre otros). La línea base representa el estado correcto del sistema, tal cuál como se espera que se visualice.

En las ejecuciones posteriores, se toma una nueva captura, denominada Checkpoint (resultado obtenido), que será comparada con su correspondiente Línea Base para verificar si hay o no diferencias visuales. En caso de haber alguna diferencia visual, la ejecución finaliza con resultado fallido, evidenciando que hubo algún cambio inesperado en la UI o alguno de sus componentes.

Utilizar Visual testing con herramientas de automatización de pruebas como Selenium, nos permite confeccionar flujos de prueba end-to-end que verifiquen no solo el comportamiento funcional del sistema, sino también aquellos aspectos visuales de la UI cuya correctitud queremos mantener.

ilustracion

Para facilitar la gestión y el órden, los archivos de estas imágenes se almacenan en directorios separados, utilizando el mismo nombre de archivo, lo que resulta muy fácil a la hora de manejar y compararlos. Por lo general, utilizar nombres de archivos mnemotécnicos facilita a entender el momento exacto o la pantalla dónde se realiza la verificación visual. Por ejemplo, “Registro_de_nuevo_usuario.png

Escenarios de aplicación

El testing visual se puede aplicar en una amplia gama de escenarios dentro de las pruebas automatizadas. 

Algunos de estos escenarios incluyen:

  • Pruebas de regresión: Verificar visualmente que los cambios en el código no hayan introducido errores visuales inesperados en la interfaz de usuario.
  • Pruebas de integración: Confirmar que los diferentes componentes de una aplicación se integren correctamente y mantengan una apariencia coherente.
  • Pruebas de navegador: Validar que la aplicación se vea y funcione correctamente en diferentes navegadores web y versiones, evitando problemas de compatibilidad visual.
  • Pruebas de cambios de diseño: Verificar que los cambios en el diseño o la apariencia de la aplicación se implementen correctamente y no afecten negativamente la experiencia del usuario.
  • Pruebas en cambios en la plataforma: Verificar que los cambios en el software base no afecten el sistema.

AShot

Para llevar a cabo este tipo de pruebas, empleamos AShot, una librería de código abierto que simplifica la captura de pantallas y la comparación de imágenes, entre otras funcionalidades asociadas que facilitan este tipo de pruebas.

Principales funcionalidades

  • Capturas de página completa: Permite capturar la página web completa, incluidas las partes que no están visibles en la ventana del navegador.
  • Captura de elementos: Permite capturar elementos (HTML) específicos de la UI, como botones, formularios, imágenes, entre otros.
  • Comparación de imágenes: Proporciona funciones para comparar imágenes, lo que es útil para la detección de diferencias visuales entre capturas de pantalla. Como mencionamos anteriormente, las imágenes de baseline y checkpoint se guardan con igual nombre para facilitar la búsqueda a la hora de comparar.
  • Configuración avanzada: AShot permite configurar diversas opciones, como la exclusión de ciertas áreas de la página, la posibilidad de ajustar el margen de tolerancia en las comparaciones, captura de encabezados y pies de página, entre otras.

Ashot

https://github.com/pazone/ashot

ExtentReports

Para facilitar la lectura y el análisis de resultados, integramos librerías de reporting que nos permiten, a través de varios formatos de reportes como HTML, PDF, etc. Tener el detalle de la ejecución de cada caso de prueba. 

Gracias a esto, logramos recolectar información tanto si la prueba es exitosa, como si no. En caso de detectarse diferencias entre las líneas base y sus correspondientes checkpoints, estas se despliegan en dicho reporte inmediatamente.

El informe no solo proporciona un resumen, sino que también ayuda a visualizar y entender los resultados de la ejecución. Juega un papel vital en la automatización de pruebas.

Para lograr esto, utilizamos la librería ExtentReports, una herramienta de generación de informes para proyectos de automatización de pruebas, que permite generar informes interactivos y visuales en formatos tales como HTML, correo electrónico, entre otros. Además, los informes son personalizables y se pueden adaptar a las necesidades de cada proyecto.

extentreports

https://extentreports.com/

¿En qué consiste nuestro template de testing visual con Selenium?

Se trata de un proyecto genérico de automatización de pruebas basado en Selenium WebDriver (Java) que ya está configurado e integrado con Ashot y ExtentReports. Sirve como punto de partida para practicar, aprender y aplicar testing visual en los proyectos.

Proporciona todas las funcionalidades requeridas para simplificar la automatización de pruebas visuales utilizando Ashot. Con ello, se agilizan los procesos de configuración y desarrollo, al mismo tiempo que se minimiza la curva de aprendizaje y el nivel técnico necesario para su implementación.

Además, gracias a la integración con la librería ExtentReports, se logra una mayor visibilidad y seguimiento de los resultados de las pruebas ejecutadas, con reportes claros y fácilmente entendibles.

¿Qué funcionalidades contiene el Template?

Las principales funcionalidades que contiene el template para las pruebas visuales son:

  • Manejo de ventanas y elementos HTML (DOM)
  • Manejo de diferentes capturas de pantalla, dependiendo la necesidad.
  • Simulación de acciones del usuario en la web
  • Multibrowser (Chrome, Firefox, Edge)
  • Verificaciones
  • Análisis de resultados de ejecución (ExtentReports)

Conclusiones

  • Utilizar el template de testing visual amplifica significativamente la seguridad y fiabilidad en la validación rápida y precisa del estado de la interfaz de usuario. Este enfoque, basado en comparación de imágenes, no solo garantiza la exactitud de la evaluación, sino que también ofrece la flexibilidad de examinar áreas específicas de interés, ya sea la vista actual del usuario en una página web o la página completa, sin la necesidad de utilizar el scroll. Además, tiene la capacidad de omitir partes y elementos de la web añadiendo una capa adicional de eficiencia a las pruebas.
  • La versatilidad de este enfoque es destacable, ya que es compatible con cualquier plataforma, dispositivo o sistema operativo.
  • A su vez, la integración de reportes en este template proporciona una mayor visibilidad y seguimiento de los resultados de las pruebas ejecutadas, facilitando una toma de decisiones más informada. En resumen, el uso de un template de visual testing con reportes integrados mejora significativamente la eficacia y eficiencia de las pruebas automatizadas, brindando confianza en la calidad del software.

Para impulsar tus habilidades en testing visual y simplificar tus procesos de automatización, te invitamos a explorar nuestro repositorio de GitHub, donde encontrarás el Template de Automatización de pruebas visuales con Selenium.