Snapshot Testing

20 de junio de 2024

1. ¿Qué es un snapshot testing?
2. Snapshot Testing en iOS
3. Snapshot Testing en Android
– Configuración
– Escribir los tests
– Ejecución
4. Bibliografía

En el vertiginoso mundo del desarrollo de software, donde los cambios son constantes y las actualizaciones son frecuentes, asegurar la estabilidad y consistencia de nuestras aplicaciones es más crucial que nunca. Por esta razón el testing de las aplicaciones se ha vuelto un proceso muy importante.

Existen muchos tipos de pruebas,como las unitarias, de seguridad, de rendimiento… y diversos mecanismos para poder ejecutarlas como Appium, XCTest, Detox…

En este articulo profundizaremos en uno de estos tipos: los snapshot testing

¿Qué es un snapshot testing?

El snapshot testing es un método de prueba que captura una imagen de la pantalla como referencia inicial. Cada vez que se ejecutan las pruebas, se genera una nueva imagen que se compara con la referencia original. Esto permite detectar cualquier cambio en la interfaz visual.

Snapshot Testing en iOS

Basándonos en la librería creada por la empresa Point Free, podemos testear las vistas independientemente de si están hechas en SwiftUI o en UIKit. Existen dos maneras de poder realizar estas pruebas, la primera de ellas es Image strategy.

Image Strategy es una estrategia en la que se genera una captura de pantalla y se analiza pixel a pixel si se ha producido un cambio en la vista nueva comparada con la vista original, si existe algún cambio el test falla. Cabe destacar que la primera vez que se ejecuten las pruebas, estos fallarán, porque al no existir una vista base esta se creará en el momento en el que falle el primer test.

Otra estrategia es recursive strategy description, que, en lugar de generar una imagen, genera una descripción de la vista en la que se compara la descripción en texto de la vista original con la generada en el test, si alguna cadena de texto ha cambiado, el test fallará.

Para poder realizar estas pruebas basta con import la librería de XCTest y SnapshotTesting, generar una instancia de la vista que queremos testear y usar la función assertSnapshot pasándole como parámetros la instancia de la vista y el tipo de estrategia a seguir:

Tenemos la opción también de generar vistas para distintos móviles añadiendo al tipo de recursión el parámetro on e indicando el dispositivo a testear:

Ahora veremos un test completo. Se va a testear el login de la app con el user “test” y la contraseña “test”. Lo primero de todo es poner el parámetro “récord” a true para indicar que es la vista que se quiere tomar como referencia:

Una vez compilamos el test nos saldrá un error porque, como ya comentamos anteriormente, no existe una imagen de referencia ya que la acabamos de crear. En el mensaje de error nos indica la ruta del directorio en la que se encuentra la imagen de referencia. Si volvemos a ejecutar el test saldrá que es un test correcto, porque ya tenemos imagen de referencia y además es exactamente igual a la imagen que acabamos de generar:

Si cambiamos ahora el usuario, el test fallará y nos indicará la ruta del directorio que contiene la imagen de referencia y la ruta de la imagen generada en el último test para que podamos comprobar que es lo que ha cambiado:

Snapshot Testing en Android

En el caso de Android disponemos del framework Paparazzi. Aunque se puede usar tanto con vistas tradicionales como con Jetpack Compose, explicaremos cómo comparar las “previews” generadas de un composable.

Configuración

Para usar Paparazzi lo primero será añadir la dependencia a nuestro archivo gradle:

Y posteriormente añadir el plugin:

Escribir los tests

A la hora de escribir los test lo primera será definir una regla:

Donde indicaremos la máxima diferencia permitida entre pantallas y el dispositivo tipo.

Posteriormente escribimos nuestro test. Esto se puede hace de dos maneras:

1. Indicar directamente que Composable queremos testear:

2.Usar todas las previews apoyándonos en la librería Showkase:

Siendo PreviewProvider un objeto que devuelve el listado de todas las previews del proyecto gracias a la función getMetadada() de Showkase:

Ejecución

Antes de ejecutar los test es importante generar las que serán las imágenes predefinidas. Estas serán las que utilizará Paparazzi como referencia para saber si nuestros composables han cambiado.Para generar las imágenes usamos el siguiente comando:./gradlew myModule:recordPaparazziDebugEstas imágenes se almacenarán como un reporte en html para poder ser consultadas.Finalmente, ya podemos ejecutar nuestro comando para lanzar los tests:./gradlew module:verifyPaparazziDebugY comprobar el resultado: