1. Introducción
2. Beneficios del Visual Testing
3. Cómo el Visual Testing en Appium eleva nuestro Testing
4. Ejemplo Práctico: Asegurando la UI de nuestra app con Appium Visual Testing
5. Conclusión
En el mundo de las pruebas de software, asegurarnos de que una aplicación funcione correctamente no siempre significa que se muestre como esperamos. Las pruebas automáticas nos permiten verificar si nuestra aplicación responde como se espera, pero ¿qué sucede cuando esos elementos no se encuentran en la ubicación correcta, no tienen el color esperado, o se superponen de forma inesperada? Es aquí donde el Visual Testing se convierte en un aliado esencial.
Beneficios del Visual Testing
El Visual Testing garantiza que la interfaz de usuario de tu aplicación se vea y se comporte de manera coherente en todas las plataformas y dispositivos, ofreciendo una experiencia óptima para el usuario final. Aquí algunos de los beneficios clave:
- Validación Visual Completa: Mientras que las pruebas automáticas pueden confirmar que un botón es «clicable», el Visual Testing verifica si ese botón es visible, está en el lugar correcto, tiene el color adecuado y no está oculto por otros elementos. Esto asegura que la aplicación se vea profesional y que la interfaz sea fácil de usar.
- Detección de Problemas de Layout: Los cambios en el diseño, los tamaños de pantalla y las actualizaciones de contenido pueden causar problemas visuales que pasen desapercibidos en las pruebas automáticas. El Visual Testing puede detectar estos problemas y garantizar que los elementos de la interfaz no se superpongan o estén fuera de lugar.
- Consistencia en la Experiencia de Usuario: El Visual Testing asegura que la apariencia visual de tu aplicación sea coherente en todos los dispositivos y plataformas. Esto es crucial para mantener una experiencia de marca uniforme y mejorar la satisfacción del usuario.
- Complemento Ideal a las Pruebas Automáticas: En una prueba automática, podrías verificar que un texto aparece cuando se completa una acción, pero sin pruebas visuales no podrías garantizar que el texto aparece en el lugar correcto, con el tamaño adecuado y sin superposición. El Visual Testing complementa estas pruebas asegurando que la funcionalidad está respaldada por una presentación visual adecuada.
Cómo el Visual Testing en Appium eleva nuestro Testing
Appium, junto con su plugin de imágenes, lleva el Visual Testing a otro nivel. Utilizando tla comparación de imágenes, Appium no solo verifica si los elementos están presentes, sino que también valida su apariencia y posición en la pantalla. Aquí hay algunas formas en que el plugin de imágenes mejora el Visual Testing:
- Detección de Cambios Visuales no Deseados: Si realizas un cambio en la aplicación, puedes compararlo con una imagen de referencia para asegurarte de que no haya alteraciones no deseadas en la UI. Por ejemplo, si el botón de «Reservar» cambia de color o se desplaza, el plugin lo detectará y podrás solucionar el problema antes de que llegue al usuario final.
- Pruebas en Dispositivos y Resoluciones Variadas: El como se muestra una aplicación puede variar dependiendo del dispositivo y la resolución. El plugin de imágenes de Appium permite comparar cómo se ve la aplicación en diferentes configuraciones, asegurando que mantenga una apariencia coherente.
Ejemplo Práctico: Asegurando la UI de nuestra app con Appium Visual Testing
Para nuestro ejemplo práctico usaremos Appium 2.0 con el plugin de images-plugin con Pytest como marco de pruebas. Los informes generados por Allure Report nos ayudarán a visualizar los resultados de nuestras pruebas de manera efectiva.
Para realizar pruebas visuales, es fundamental contar con una imagen de referencia que represente el estado esperado de la interfaz de usuario en el dispositivo. Esta imagen de referencia sirve como «modelo» para comparar la apariencia actual de la aplicación durante las pruebas.
Es crucial que la imagen de referencia tenga siempre las mismas dimensiones que la captura actual de la aplicación para que la comparación sea precisa. Dado que las dimensiones de la pantalla varían según el dispositivo o la resolución, se necesitan imágenes de referencia específicas para cada dispositivo que desees probar.
El proceso es sencillo:
- Capturar la imagen de referencia: Primero, necesitas tomar una captura de pantalla de la aplicación cuando se encuentre en el estado deseado. Asegúrate de que todos los elementos estén correctamente posicionados, con los colores, tamaños y estilos que esperas. Esta imagen se utilizará como punto de comparación en futuras pruebas.
- Almacenar la imagen de referencia: Guarda esta imagen en un directorio específico de tu proyecto de pruebas. Es importante mantener un registro organizado de estas imágenes, ya que podrías necesitar múltiples imágenes de referencia para diferentes pantallas, resoluciones o estados de la aplicación.
- Comparar con la captura actual: Durante la ejecución de las pruebas visuales, Appium tomará una nueva captura de la pantalla actual de la aplicación y la comparará con la imagen de referencia. El plugin de imágenes de Appium evaluará si hay diferencias significativas entre ambas imágenes y te alertará si encuentra inconsistencias.
¡Basta ya de tanto texto y muéstrame cómo lo haces! 😅
En nuestro caso queremos asegúranos que la pantalla de Bienvenida se muestra correctamente en todo momento. Cómo hemos mencionado primero necesitamos una imagen de referencia.
Test
Captura de referencia.
import base64from typing import Tuple
from typing import Optional
from PIL import Image
def image_comparison(self, image_template_path: str, actual_state_screen_path: str) -> Tuple[float, Optional[str]]:
# Open the expected image template in binary mode and read its contents
with open(image_template_path, ‘rb’) as img:
image_template = img.read()
# Open the actual state screenshot in binary mode and read its contents
with open(actual_state_screen_path, ‘rb’) as img:
actual_state_screen = img.read()
# Encode the expected image template to base64 format for comparison
base64_image_template = base64.b64encode(image_template).decode(‘utf-8’)
# Encode the actual state screenshot to base64 format for comparison
base64_actual_state_screen = base64.b64encode(actual_state_screen).decode(‘utf-8’)
# Use the driver to compare the two images for similarity and get the results
get_images_result = self.driver.get_images_similarity(
base64_image1=base64_image_template,
base64_image2=base64_actual_state_screen,
visualize=True # Visualize the comparison result
)
# Return the similarity score and the visualization of the comparison
return get_images_result[‘score’], get_images_result[‘visualization’]
Tenemos definido un método ‘image_comparison’ el cual compara visualmente una imagen de referencia con una captura del estado actual de la aplicación y devuelve el resultado de la comparación.
Como resultado se devuelve dos valores: el puntaje de similitud (score) y la imagen visual de las diferencias (visualization). El puntaje indica qué tan similares son las dos imágenes (1.0 significa que son idénticas), y ‘visualization ‘contiene la imagen que muestra las diferencias si las hay.
Ya en el propio test realizaremos la comprobación:
import allure
@allure.step(«User verifica que UI contiene los elementos esperados»)
def user_verify_ui(self):
# Define the directory where screenshots will be saved
screenshots_directory = f»../screenshots/»
# Generate a unique name for the screenshot using the device name and current timestamp
unique_screenshot_name = f»{get_custom_device_name(self.driver)}_{GenerateData.CURRENTIME_NANO_SECS.value}»
# Create the full path for the screenshot
screenshot_full_path = f»{screenshots_directory}{unique_screenshot_name}»
# Capture the current state of the UI and save it to the defined path
self.screenshot(screenshot_full_path)
# Retrieve the expected screenshot for verification from the designated path
expected_screenshot_path = retrieve_screenshot_saved_for_ui_verification(
self,
path=f»../pages/images/{get_custom_device_name(self.driver)}/splash_page»,
screen_name=»splash»
)
# Retrieve the actual screenshot taken for UI testing
actual_screenshot_path = retrieve_path_screenshot_taken_for_ui_testing(self, screenshot_full_path)
# Compare the expected screenshot with the actual screenshot and get the comparison results
image_comparison_result = self.image_comparison(expected_screenshot_path, actual_screenshot_path)
# Save the visual comparison result as a PNG file
self.save_base64_to_png(image_comparison_result[1], «../screenshots/splash_page»)
with open(«../screenshots/splash_page», «rb») as image_file:
allure.attach(image_file.read(), name=»UI Verification Screenshot»,
attachment_type=allure.attachment_type.PNG)
# Assert that the similarity score is above the threshold of 0.97
assert image_comparison_result[
0] >= 0.995, f»UI verification failed. Similarity score: {image_comparison_result[0]}»
La función ‘user_verify_ui‘está diseñada para verificar que la interfaz de usuario (UI) de una aplicación contiene los elementos esperados.
Para este caso la Verificación del puntaje se comprueba que el puntaje de similitud sea al menos 0.995 (Sí 😎, somos muy meticulosos) lo que indica que las imágenes son suficientemente similares.
Resultado positivo
En la imagen, las diferencias visuales entre las dos capturas de pantalla se encuentran únicamente en la barra de menú del dispositivo (menú bar). Estos cambios suelen incluir elementos como el estado de la batería, la hora, el nivel de señal, y otras notificaciones, que son aspectos dinámicos y variables de la interfaz del dispositivo.
Informe sin diferencia entre estado esperado y el actual.
Resultado negativo
“Muy bien, pero enséñame que detecta algún cambio no esperado 😤”
En este caso el nombre del cliente ha desaparecido, no es un error que imposibilite el reservar tus vacaciones, pero a todos nos gusta que no haya errores.
En este caso se indica el texto que falta:
Informe mostrando las diferencias entre estado esperado y el actual.
Conclusión
El Visual Testing ofrece grandes beneficios al asegurar que la interfaz de usuario se vea y funcione tal como se espera. Permite detectar errores visuales, cambios no intencionados y garantizar la consistencia de la experiencia del usuario en diferentes dispositivos y navegadores. Esto reduce el riesgo de problemas que podrían afectar la imagen de la marca y mejora la calidad del producto final, ahorrando tiempo y costos en la detección temprana de problemas. En resumen, el Visual Testing es una inversión que garantiza interfaces impecables y una experiencia de usuario superior.
