Automatización del Testing Visual con Katalon: Garantizando la integridad visual de tus aplicaciones

¿Cómo funciona el testing visual con Katalon?

Antes de entrar en detalle, es importante introducir algunos términos y conceptos básicos comúnmente utilizados.

Línea base (Baseline): Una línea base es un punto de partida inicial que será utilizado como referencia para llevar a cabo una comparación. Establece cómo se espera que se vea la página (o un determinado componente de ella) en la interfaz de usuario. Sirve como punto de comparación durante las pruebas (se podría decir que es el resultado esperado). 

Generalmente, durante la primera ejecución de pruebas del proyecto, donde no hay una línea base previamente creada, esta se utiliza para generar las primeras versiones de estas capturas y allí comienzan los ciclos de testing visual. Cada línea base se identifica de forma única con un nombre, dicho nombre es el que se utiliza para la comparación visual entre las capturas de pantalla.

Colección de líneas base (Baseline collection): Una colección de líneas base, es una agrupación de varias capturas que se utilizan para una ejecución en particular. Por ejemplo, una colección de líneas base puede contener todas las capturas (líneas base) que se utilizarán en la próxima ejecución de pruebas.

Checkpoint: Un checkpoint representa un punto específico del flujo de pruebas donde se tomará una captura de la aplicación (o alguno de sus componentes) para verificar si hay cambios o discrepancias en comparación con la línea base establecida. Si el checkpoint difiere de la línea base, estamos ante una diferencia en la UI.

Métodos de comparación: 

Katalon cuenta con tres métodos de comparación diferentes, cada uno de ellos aborda el testing visual desde un punto de vista diferente.

• Comparación basada en píxeles: Este método realiza la comparación píxel por píxel, es decir, es capaz de detectar cualquier diferencia de píxeles entre la línea base y el checkpoint.

En muchos casos, ser tan estrictos en la comparación puede dar lugar a muchos escenarios de falsos positivos, por lo que se requiere la posibilidad de configurar una determinada tolerancia. Katalon cuenta con la posibilidad de ajustar el umbral de tolerancia, permitiendo cierta flexibilidad a la hora de realizar la comparación.

• Comparación basada en el diseño (layout): Este método identifica y mapea las zonas similares entre la línea base y el checkpoint, destacando las diferencias.

Katalon identifica y clasifica las zonas en tres tipos:

• Idénticas (color verde): Muestra las zonas de la interfaz de usuario representadas de forma idéntica entre ambas imágenes.
• Distinguibles (color rojo): Muestra las zonas de la interfaz de usuario que parecen idénticas en su mayoría, pero tienen alguna distinción reconocible.
• Faltantes/nuevas (color rosado): Muestra las zonas de la interfaz de usuario que existen en una pero no en la otra.

Este método es útil para complementar las diferencias identificadas por la comparación basada en píxeles y comprender mejor cómo estas afectan el diseño de la pantalla y sus elementos.

• Comparación basada en contenido de texto: Este método identifica y analiza las diferencias de contenido de texto entre las capturas. Es decir, solo se compara el texto entre la línea base y el checkpoint.

Katalon identifica y clasifica las zonas (textos) en 3 tipos:

• Idénticas (color verde): Cuando el texto es el mismo.
• Desplazadas (color azul): Cuando el texto es igual pero su posición ha cambiado.
• Faltantes/Nuevos (color rosado): Cuando el texto está presente en una captura, pero no lo está en la otra.

Este método es útil cuando hay mucho texto en las páginas. Ayuda a los usuarios a revisar y priorizar los cambios de texto críticos y por lo tanto necesitan atención inmediata.

Testing visual con Katalon en acción

Luego de explicar qué es y cómo se hace testing visual, se presentan una serie de pasos necesarios para implementar las pruebas visuales con Katalon.

A continuación, se describe en detalle cómo llevar a cabo Testing Visual en una página web utilizando Katalon, en distintos navegadores y tamaños de pantalla, tanto desktop como en dispositivos móviles.

Descarga e instalación de Katalon Studio

Lo primero será crear un proyecto en Katalon Studio, para ello será necesario descargar la herramienta desde la página web oficial de Katalon para el sistema operativo utilizado. Para poder utilizar Katalon Studio, así como el resto de los productos de Katalon, se necesita una cuenta activa. Para esto se puede hacer click en la opción “Sign Up” o acceder directamente en el siguiente enlace.

Una vez descargado e instalado, Katalon Studio solicitará activación mediante el inicio de sesión con una cuenta Katalon. Una vez activado Katalon Studio, se podrá comenzar a utilizar. Cabe aclarar que para comenzar a utilizar Katalon Studio no se requiere licencia Enterprise, pero al momento de ejecutar las pruebas visuales, estas requerirán una licencia paga de la Plataforma Katalon.

Creación del proyecto en la Plataforma Katalon

Mientras que Katalon Studio permite crear los scripts automatizados para las pruebas visuales, la Plataforma Katalon (antes conocida como Katalon TestOps) permitirá, entre otras cosas, hacer uso de las funcionalidades de visual testing y comparación de capturas.

Para ello, es necesario crear y vincular el proyecto local en Katalon Studio a un proyecto en la Plataforma Katalon, de manera que la información de la ejecución, así como las colecciones de líneas base y checkpoints se suban a la plataforma para ser procesadas.

El primer paso es crear y configurar un proyecto en la Plataforma Katalon, para esto es necesario iniciar sesión en la web https://analytics.katalon.com/login utilizando la misma cuenta de Katalon con la que se activó Katalon Studio.

En la esquina superior derecha, haciendo click en el botón de configuración, se puede acceder a la opción que permite gestionar los proyectos (Project Management).

Al acceder allí, es necesario crear un nuevo proyecto. Siguiendo los pasos y completando los campos que se solicitan.

Será necesario seleccionar el equipo de trabajo (o crear uno nuevo si corresponde) y posteriormente indicar un nombre al nuevo proyecto.

Luego de su creación, el mismo será visible dentro del nodo de la organización en la cual se esté trabajando, tal y como se muestra en la siguiente imagen.

En Katalon Studio se debe crear y configurar el proyecto local haciendo referencia al proyecto recién creado en la Plataforma Katalon. Para proyectos nuevos, esta información aparecerá al momento de crear el mismo.

Para el caso de proyectos ya creados, se puede cargar o modificar esta configuración en las opciones del proyecto: “Project > Project Settings > Katalon Platform”.

Once the link between the local project (Katalon Studio) and the Katalon Platform has been made, and visual verifications are executed, this information will be sent to the Katalon Platform for processing. The results of each execution can also be visualized and managed directly from the Katalon Platform.

Una vez realizada esta vinculación entre el proyecto local (Katalon Studio) y la Plataforma Katalon, cuando se ejecuten las verificaciones visuales, se enviará esta información a la Plataforma Katalon para su procesamiento. También se podrán visualizar y gestionar los resultados de cada ejecución directamente desde dicha plataforma.

Configuraciones para pruebas en dispositivos móviles

Con Katalon es posible realizar testing visual tanto para aplicaciones web ejecutando en un navegador de escritorio como en dispositivos móviles, pero para levantar distintos emuladores es necesario realizar algunas configuraciones adicionales.

Instalación y configuración para emuladores Android

Para levantar un emulador Android, se recomienda descargar y utilizar Android Studio, ya que incorpora el componente Virtual Device Manager que permite crear y gestionar varios emuladores de forma rápida y sencilla.

Una vez instalado y ejecutado Android Studio, haciendo click en la opción “More Actions > Virtual Device Manager” es posible comenzar la creación del emulador, Se selecciona la opción “Create device”, siguiendo los pasos solicitados para terminar de configurar el emulador.

El dispositivo (emulador) recién configurado aparecerá en el componente Device Manager de Android Studio, al seleccionar la acción “Launch” se ejecutará y levantará el emulador.

Instalación y configuración para emuladores iOS

Para emular un dispositivo iOS, es necesario utilizar un equipo con MacOS y XCode (por defecto viene instalado en sistemas operativos MacOS, pero es posible descargarlo desde la web oficial). Desde XCode es posible configurar y crear emuladores de dispositivos tales como iPhone o iPad, para esto, se debe ir a “Open Developer Tool > Simulator”.

Allí se puede crear un nuevo simulador (New Simulator), ingresando nombre, tipo de dispositivo y versión de iOS requerida.

Scripting para Visual Testing

Para comenzar con el scripting de los casos de prueba, lo primero es definir las páginas y/o componentes que formarán parte del alcance de las pruebas visuales. Es decir, armar los guiones y flujos de prueba que serán verificados por los scripts.

Katalon Studio cuenta con varios comandos (Keywords) para la automatización de pruebas, que permiten por ejemplo:

• La navegación sobre el sistema a probar y sus componentes o páginas.
• La interacción con los elementos de su interfaz gráfica, como accionar botones, completar campos, clickear enlaces, entre otros.
• Chequeos funcionales, para verificar cierta condición en la interfaz, sus elementos y/o información desplegada en ellos.

A su vez, cuenta con comandos específicos para la aplicación de testing visual, que permiten sacar capturas a la pantalla o algún elemento particular de esta, y aplicar las verificaciones (checkpoints) correspondientes.

Estos comandos son:

• takeScreenshotAsCheckpoint: Toma una captura de pantalla de la sección visible de la UI. Más información sobre este keyword en este enlace.
• takeFullPageScreenshotAsCheckpoint: Toma una captura de la pantalla completa, incluyendo todo el contenido visible y no visible. Más información sobre este keyword en este enlace.
• takeElementScreenshotAsCheckpoint: Toma una captura de pantalla de un elemento seleccionado. Más información sobre este keyword en este enlace.
• takeAreaScreenshotAsCheckpoint: Toma una captura de pantalla de un área seleccionada. Más información sobre este keyword en este enlace.

En la siguiente imagen se puede apreciar un script básico, que servirá de ejemplo para mencionar las capacidades de Katalon para testing visual.

1. 1. Open Browser – Abrir el navegador web.
2. 2. Navigate To Url – Navegar/acceder a una determinada URL.
3. 3. Take Full Page Screenshot As Checkpoint – Tomar una captura de pantalla de la página completa.
4. 4. Close Browser – Cerrar el navegador web.

En pocas palabras, el script mencionado anteriormente, permite acceder a la URL del sistema bajo prueba desde el navegador establecido, tomar una captura de pantalla (checkpoint) con el nombre “full_page_checkpoint” y posteriormente cerrar la sesión del navegador. De esta manera se ha generado un script simple que al ejecutarse por primera vez, tomará la captura de pantalla como línea base bajo el nombre “full_page_checkpoint” y la almacenará en la Plataforma Katalon. Cuando este sea ejecutado nuevamente y se dispare el comando “Take Full Page Screenshot As Checkpoint”, se comparará la imagen de línea base previamente almacenada con la imagen recién capturada. 

Una segunda opción que brinda Katalon es el comando “Take Screenshot As Checkpoint”, a diferencia del anterior, solo toma una captura de la sección que es visible en el navegador, es decir, lo que se ve en pantalla.

A su vez, Katalon cuenta con funcionalidades para excluir elementos HTML de la página que no se desean verificar, elementos que no son de interés para las pruebas, o que son objetos dinámicos y por lo tanto cambiarán entre cada ejecución. Algunos ejemplos de esto son los banners de publicidad, pop-ups con mensajes o información dinámica, entre otros. Para lograr esto se debe pasar como parámetro a la función “Take Full Page Screenshot As Checkpoint” la lista de objetos (Test Objects) que se desean ignorar.

Organización de proyecto

Es importante mantener el proyecto ordenado, ya que inicialmente puede ser necesario ejecutar las pruebas en todos los navegadores y dispositivos, pero a medida que avanza el proyecto, es posible que se ejecuten solamente algunas pruebas específicas. La correcta organización del proyecto permitirá hacerlo sin dificultad.

A medida que el proyecto crece, es probable que sea necesario agregar, modificar o eliminar casos de prueba. Al tener una estructura organizada, estos cambios podrán realizarse de manera ágil y precisa, facilitando la gestión y adaptación del proyecto a medida que evoluciona.

Para ellos, Katalon provee las siguientes estructuras de elementos:

• Carpetas
• Test Cases
• Test Suites
• Test Suite Collections

A modo de ejemplo, se podría organizar el proyecto utilizando distintas carpetas que agrupen los Test Case por página o pantalla a probar. Dentro de cada carpeta se almacenan los Test Case que serán ejecutados para cada una de las combinaciones de dispositivos.

Siguiendo con el ejemplo anterior, se crean las Test Suite correspondientes por cada combinación de dispositivo y navegador en el que se ejecutarán las pruebas, de esta manera es posible ejecutar y obtener los resultados en la Plataforma Katalon agrupados por dispositivos y navegadores, lo cual facilita en gran medida el análisis de los resultados.

Una Test Suite se podría ver de esta forma:

Las distintas Test Suite que son creadas se visualizan de la siguiente forma:

Por último, se crea una Test Suite Collection que es la encargada de ejecutar todas las Test Suite que están definidas dentro de ella. Cada Test Suite Collection se configura de forma tal que se ejecute con un navegador y dispositivo específico, de esta manera es posible realizar una sola ejecución para todas las pruebas.

Para ello, es importante recordar que se deben configurar y levantar los emuladores correspondientes.

La configuración de la Test Suite Collection se visualiza de la siguiente forma:

Ejecución de las pruebas

Ejecución desde Katalon Studio

Al momento de ejecutar las pruebas, primero se debe verificar que efectivamente estén levantados todos los dispositivos en los que se ejecutarán. Se recomienda verificar también la Test Suite Collection, de manera de validar que se hayan configurado los tests correctamente.

Finalmente, para proceder a la ejecución, se debe dar click en el botón “Execute” de la Test Suite Collection, y esta comenzará a ejecutar todas las Test Suites, mostrando el progreso de la ejecución en el Log Viewer de Katalon Studio.

En este ejemplo se visualizan los pasos del script ejecutado, y al final se indica la exportación del reporte a la Plataforma Katalon. En este momento es posible acceder a la Plataforma Katalon e ingresar al proyecto correspondiente para visualizar los resultados.

Cabe aclarar que ejecutando las pruebas desde Katalon Studio, no es posible generar una nueva línea base, se debe generar manualmente desde la Plataforma Katalon como se detalla más adelante.

Ejecución desde la Plataforma Katalon

Las principales ventajas para la ejecución de pruebas visuales desde la Plataforma Katalon son la capacidad de agendar múltiples ejecuciones fácilmente y generar a demanda nuevas líneas base de forma automática.

Para realizar la ejecución desde la Plataforma Katalon se deben hacer las siguientes configuraciones:

• Almacenar el proyecto Katalon en un repositorio Git (Github, Gitlab, Azure DevOps, etc.) y configurar un “Script Repository” en la plataforma con los accesos al mismo (aquí más información: enlace).
• Configurar el agente de Katalon en el equipo local donde se encuentran los emuladores (aquí más información: enlace).
• Agendar la ejecución (Test Run) desde el apartado “Executions” en la Plataforma Katalon (aquí más información: enlace). Dentro del apartado “Executions” es posible agendar las ejecuciones utilizando la opción “Schedule Test Run”.

Al clickear sobre dicha opción se despliega el siguiente formulario para configurar la ejecución. En el mismo se puede configurar la fecha y hora de ejecución, el proyecto a ejecutar (desde el “Script Repository”), el ambiente de ejecución, la Test Suite, entre otras opciones.

Al seleccionar “Schedule” la ejecución se confirmará y llegada la fecha/hora indicada comenzará a ejecutar las pruebas utilizando el ambiente (Environment) local, dado que es el que cuenta con los emuladores.

Trabajar con las colecciones de líneas base desde la Plataforma Katalon

Desde la misma pantalla “Schedule Test Run”, en las opciones avanzadas, es posible indicar a Katalon la colección de líneas base con la que se desea comparar dicha ejecución.

Esto permite mantener varias colecciones y utilizarlas según corresponda, ya sea por múltiples versiones del sistema bajo pruebas, por diferencias visuales entre ambientes de pruebas, entre otras.

También desde allí es posible generar una nueva colección de líneas base. Esto indica a la Plataforma Katalon que genere en dicha ejecución, una nueva colección de líneas base con las nuevas capturas.

Informe de resultados

Los resultados de las ejecuciones se pueden ver únicamente a través de la Plataforma Katalon en la sección de Visual Testing, donde cada ejecución se identifica con un ID único. 

Al seleccionar una ejecución, se muestran todas las capturas generadas en la misma (checkpoints). Al seleccionar y abrir el detalle de algún checkpoint, se visualiza a la izquierda de la pantalla la línea base y a la derecha, el checkpoint.

En caso de no detectar diferencias, Katalon automáticamente marca la verificación como correcta (PASSED), por el contrario si se encuentran diferencias la marcará para revisar (UNRESOLVED).

A su vez, es posible ajustar el umbral de tolerancia, el método de comparación, así cómo también, ajustar manualmente el resultado de la prueba (FAILED, PASSED, UNRESOLVED).

En función de estas marcas, se puede observar la cantidad de casos que han pasado y/o fallado. Al regresar al apartado Visual Testing, se pueden visualizar todas las ejecuciones junto con sus resultados e indicadores.

Agregar imágenes a la colección de líneas base

Desde la misma pantalla de resultados, es posible agregar aquellas comparaciones exitosas (marcadas PASSED) a la colección de líneas base, de modo que Katalon actualice las versiones de las capturas automáticamente. Seleccionando la opción de “Save to Baseline”, Katalon generará una nueva versión de la línea base con estas capturas.

En la sección “Visual Baseline Collections”, se muestran todas las colecciones creadas, junto con sus respectivas versiones e imágenes. Al abrir una colección específica, es posible visualizar y eliminar las imágenes que contiene.

¿Cómo se visualizan los distintos métodos de comparación?

Tal y como se comentó previamente, existen tres métodos de comparación. A continuación se presenta un ejemplo de cómo funciona cada uno de ellos para la misma prueba.

Comparación por píxeles

Comparación por diseño

Comparación por contenido de texto

Conclusiones

Abordar una estrategia de testing visual automatizada puede ser una gran herramienta en los proyectos, permitiendo detectar fácil y rápidamente inconsistencias o errores en la interfaz de usuario con gran exactitud.

Katalon representa una poderosa alternativa como herramienta para testing visual, tanto para contextos de aplicaciones web como móviles. Acelerar el proceso de pruebas sobre la UI, al capturar y almacenar imágenes de referencia, establece una base sólida para realizar comparaciones precisas en futuras iteraciones del desarrollo. Esto permite a los equipos de desarrollo y pruebas, identificar de forma temprana cualquier desviación visual, ahorrando tiempo y recursos antes de que se conviertan en defectos más costosos.

Al integrar visual testing en los proyectos, se logra una mayor cobertura y confianza en la calidad de los productos entregados. Esta combinación de automatización y precisión eleva los estándares de calidad y asegura una experiencia consistente para los usuarios.