Para pruebas de captura de pantalla Compose @Previews en CI | ningún emulador requerido por David Vávra | julio 2022

La prueba de captura de pantalla es la forma más efectiva de probar su capa de vista. Y si usa Compose, ya los tiene: métodos anotados de @Preview para Android Studio. Demostré esto en mi artículo anterior mostrando cómo conectar la biblioteca de prueba de captura de pantalla de Showkase y Facebook. Pero esta biblioteca tiene un inconveniente: requiere instrumentación (dispositivo o emulador) para ejecutarse. Lo que dificulta la configuración en CI y conduce a la escalabilidad. En este artículo, le mostraré cómo configurarlo sin un emulador, incluida una configuración de CI.

paparazzi

La prueba de captura de pantalla sin un emulador es posible con una biblioteca Paparazzi de Square. El renderizador de Android Studio se usa para renderizar vistas y componibles de Android en pruebas unitarias periódicas (carpeta «test»). No se requiere instrumentación (carpeta androidTest). Esto significa que las pruebas de captura de pantalla se completan en segundos en lugar de minutos. Puede usar el dispositivo CI basado en la nube más barato y elimina el dolor de cabeza de ejecutar el emulador de Android en CI. Esta biblioteca alcanzó recientemente una versión estable 1.0.0. Si desea ejecutar paparazzi localmente, solo use estas dos tareas de Gradle:

• ./gradlew recordPaparazziDebug captura todas las capturas de pantalla en una carpeta de «instantáneas»
• ./gradlew verificarPaparazziDebug verifica que las capturas de pantalla en la carpeta de instantáneas coincidan y le dice cuáles son diferentes

Integración de Showkase

Ya describí esta biblioteca en mi artículo anterior. En resumen, captura todos sus métodos anotados con @Preview y los pone a disposición para pruebas de captura de pantalla. Vaya directamente a mi ejemplo de integración si necesita todos los detalles. Esta clase es la parte principal de la integración Showkase-Paparazzi:

TestParameterInjector

La clase utiliza la biblioteca TestParameterInjector de Google. Permite crear múltiples pruebas unitarias a partir de un solo método @Test, lo cual es excelente para las pruebas de captura de pantalla. Este ejemplo crea una prueba de captura de pantalla para cada método anotado con @Preview. ¡Y como beneficio adicional, capturas de pantalla para el modo oscuro y tamaño de fuente 1.5! Esto se puede ampliar fácilmente con diferentes lugares, tamaños de pantalla, orientaciones, etc.Capturas de pantalla de ejemplo para el modo claro y oscuro, escala de fuente 1 y 1.5

integración de CI

Desea comparar capturas de pantalla con cada solicitud de extracción. Puede detectar rápidamente los errores de regresión incluso antes de fusionar el PR. Pero a medida que agrega o cambia funciones, los cambios de captura de pantalla pueden ser intencionales. Por lo tanto, mi integración de CI funciona así:

• Compara las capturas de pantalla con las existentes. Si son iguales, la marca es verde.
• Si son diferentes, las diferentes capturas de pantalla se moverán a otra sucursal según la sucursal de PR.
• Publica un comentario en el PR con un enlace para comparar las dos sucursales. GitHub hace un buen trabajo al mostrar las diferencias entre las imágenes.
• Si el cambio es intencional, simplemente puede fusionar la sucursal nuevamente en la sucursal de PR. De lo contrario, debe corregir el error de regresión.

Acciones de GitHub

Me gusta mucho GitHub Actions CI: integración perfecta de GitHub, gratis para proyectos pequeños, toneladas de acciones creadas por la comunidad que puedes reutilizar. Entonces, mi ejemplo es para acciones, pero el principio es el mismo para todos los CI: verifique el script bash para manejar las pruebas de captura de pantalla fallidas. Y mira un ejemplo de solicitud de extracción. Esta verificación solo duró 2:43 minutos. Y la mayor parte del tiempo se dedicó a crear la aplicación.Comentario de relaciones públicas sobre las pruebas de captura de pantalla fallidas

resumen

Le mostré cómo integrar la biblioteca Showkase con la biblioteca Paparazzi y crear pruebas de captura de pantalla para todos sus métodos anotados Compose @Preview, incluido el modo oscuro y el tamaño de fuente 1.5. Le mostré un ejemplo de integración de Github Actions con un flujo de trabajo para fusionar cambios intencionales en capturas de pantalla. Todo se ejecuta en segundos sin necesidad de un emulador de Android. Consulta el repositorio de GitHub para conocer todos los detalles. Creo que con esta configuración rápida y fácil, las pruebas de captura de pantalla pueden ser tan útiles y ampliamente utilizadas como las pruebas de unidades de lógica empresarial.