Screenshot Testing con las previews de Compose

El testing clásico con la API de testing de Jetpack Compose y, en general, cualquier sistema que permita simular las acciones del usuario, solo permite comprobar funcionalidad.

Pero si queremos ir más allá y comprobar también la apariencia, estas herramientas se nos quedan cortas.

Lo mejor sería poder comprobar si la pantalla tiene exactamente la apariencia que esperamos.

Y esto es lo que nos permite el Screenshot Testing.

En su versión más simplista, es un test que compara pantallazos:

1. Tenemos un pantallazo que es como queremos que se vea nuestra pantalla,

2. Sacamos otro pantallazo con la situación actual

3. Comparamos la coincidencia entre ambos

En Android existen muchas herramientas para hacer esto, y se dividen en dos grandes categorías:

1. Las que ejecutan en el dispositivo: arrancan la App, la llevan hasta el punto que queremos y sacan el pantallazo

2. Las que confían en las previews o el diseñador de vistas clásicas: obtienen los pantallazos de estas herramientas, y así no tienen que ejecutar el dispositivo

Ambas tiene sus pros y sus contras.

En cuanto a las que usan el dispositivo:

• Son más cercanas a la realidad

• Es más difícil hacer tests de componentes unitarios

• Son más lentas

En cuanto a las que usan las previews:

• Puede que no reflejen exactamente la pantalla real

• Las previews no son exactas

• Es más fácil testear un único widget / vista

• Son más rápidas y fáciles de ejecutar, ya que no requieren de dispositivo

El equipo de Android ha lanzado una nueva funcionalidad llamada “Compose Preview Screenshot Testing” que, como puedes imaginar, entra en la segunda cateogría.

Esta herramienta nos permite:

• Identificar las previews que queremos usar para screenshot testing

• Generar imágenes de referencia para esas previews

• Generar un informe en HTML que identifica las diferencias después de hacer cambios de código

• Usar parámetros de las @Preview como el uiMode o fontScale, y multi-previews para escalar los tests

• Modularizar los tests gracias al uso de un nuevo source set llamado screenshotTest

Requerimientos

Para usarlo, hacen falta:

• Android Gradle 8.5.0 o superior

• Kotlin 1.9.20 o superior

Configuración

Primero necesitamos añadir el plugin de Screenshot (comprueba la última versión):

agp = "8.5.1"
kotlin = "2.0.0"  
...
screenshot = "0.0.1-alpha02"  
  
[plugins]  
...
screenshot = { id = "com.android.compose.screenshot", version.ref = "screenshot"}

Añade el plugin al build.gradle:

plugins {
	...
	alias(libs.plugins.screenshot)
}

Activa la propiedad experimental en gradle.properties:

android.experimental.enableScreenshotTest=true

En el bloque de android {}, también hay que añadir el flag experimental. Si estás usando una versión inferior a Kotlin 2.0, tendrás que asegurarte de que el compilador de Compose es superior a 1.5.4:

android {
    ...
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.4"
    }
    experimentalProperties["android.experimental.enableScreenshotTest"] = true
}

También necesitas añadir la librería de ui-tooling a este nuevo tipo de tests:

[libraries]  
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}

dependencies {
  screenshotTestImplementation(libs.androidx.compose.ui.tooling)
}

Define qué Composables usarás para tus tests de Screenshot

Para que se usen las previews como tests de Screenshot, necesitas añadirlas al source set de screenshotTest.

Puedes añadir más composables y/o previews, incluyendo multi-previews, en este archivo u otros creados en el mismo source set.

Genera imágenes de referencia

Después de que hayas configurado una clase de test, necesitas generar imágenes de referencia para cada preview.

Estas imágenes de referencia se usan para identificar cambios posteriores. Para generar estas imágenes:

./gradlew updateDebugScreenshotTest

Genera un informe de los tests

Una vez que las imágenes de referencia existen, ejecuta la tarea de validación para tomar un nuevo pantallazo y comparar con la imagen de referencia:

./gradlew validateDebugScreenshotTest

Ignorar los referencias de screenshot en Git

Las referencias de los pantallazos de las previews se almacenan en la carpeta /src/debug/screenshotTest.

Si no quieres que se suban, debes ignorarlos. Por ejemplo, en el .gitignore de app puedes añadir:

/src/debug/screenshotTest

Conclusión

Con estos tests puedes, de forma sencilla, y sin tener ningún tipo de conocimientos sobre testing, comprobar que las pantallas tienen la apariencia que esperas.

Si algo cambia, será muy fácil detectar esos cambios y ver si son esperados o ha habido un error.

• Si son cambios esperados, tendrás que rehacer tus imágenes de referencia

• Si hay un error, podrás ir al composable que renderiza la preview y solucionarlo

Aquí tienes un link a un repositorio con un ejemplo configurado, para que puedas ejecutarlo y problarlo. Pertenece a nuestra formación Testing Expert.