Screenshot Testing pour Compose Preview

Plongez dans la mise en place des tests de screenshots pour vos previews Jetpack Compose. Robin et Etienne présentent comment intégrer cet outil dans vos projets Android natifs et l’automatiser dans vos chaînes CI/CD, pour une qualité visuelle garantie de vos interfaces.

Transcript

1. Robin Caroff U Tech - GDG Nantes Android U Tech Etienne Priou Screenshot Testing pour Compose Preview
3. C’est quoi des screenshots test ?
4. 🤔
5. Un système de screenshots tests permet d’effectuer automatiquement cette comparaison et de produire un rapport. Avec le rapport, deux réponses possibles : Il y a une erreur dans le nouveau code on la corrige. 🐛 On approuve la nouvelle capture d'écran et on remplace l'image de référence par la nouvelle. ✅
6. Avantages 😀 Plusieurs assertions à la fois 😀 Pas d’écriture de tests nécessaire 😀 Facile à maintenir 😀 Très utile pour la détection de régression sur différentes configurations Inconvénients 😒 Génère beaucoup d’images 😒 Peut être plus compliqué à débugger quand un composant affecte plusieurs screenshots 😒 Variation acceptable difficile à définir
7. Google’s Compose Preview Screenshot Testing
8. Maturité • Annoncé en 2024 Google IO • Développement actif (alpha-8) • Pas de roadmap visible • Issue Tracker actif • Pas open source
9. Rapide à mettre en place • Kotlin Version: Version 1.9.20 minimum. • Android Gradle Plugin: Version 8.5.0-beta01 minimum. • Utiliser Jetpack Compose pour les vues • Nécessité de créer des fichiers de tests spécifiques
10. Comment fonctionne ? • Utilise les annotation @Preview dans des fichiers de tests afin de générer des screenshots de référence. ./gradlew updateDebugScreenshotTest • Le plugin va génère de nouveaux screenshots et les compare avec les références afin de valider les tests avec la commande ./gradlew validateDebugScreenshotTest. • Les résultats sont consultable via un rapport html simple à comprendre
11. Quelles autres solutions existent ?
12. Quelles solutions open source existent ? Outil Rapidité Configuration Support Compose CI/CD Communauté Création Paparazzi ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ✅ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ 2019 Roborazzi ⭐⭐⭐⭐ ⭐⭐⭐⭐ ✅ ⭐⭐⭐⭐ ⭐⭐⭐ 2022 Shot ⭐⭐⭐ ⭐⭐⭐⭐⭐ ✅ ⭐⭐⭐ ⭐⭐⭐ 2017 Facebook ⭐⭐ ⭐⭐ ❌ ⭐⭐⭐ ⭐⭐⭐ 2015 Dropshots ⭐⭐⭐ ⭐⭐⭐ ❌ ⭐⭐⭐ ⭐⭐ 2018
13. Du code 󰳕
14. Comment fonctionne ? @Composable fun CallCard( userName: String, modifier: Modifier = Modifier, ){ Card( modifier = modifier, shape = RoundedCornerShape(8.dp), ) { Column( modifier = Modifier . padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally , ) { Icon( imageVector = Icons.Rounded. Call, contentDescription = "Call Icon" ) Text(userName) } } } @Composable @Preview internal fun CallCardPreview () { CallCard("Robin") }
15. Comment fonctionne ? ./gradlew updateDebugScreenshotTest class CallCardScreenshots { @Preview @Composable fun CallCardPreviewTest () { CallCardPreview () } }
16. Comment fonctionne ? @Composable fun CallCard( userName: String, modifier: Modifier = Modifier, ){ Card( modifier = modifier, shape = RoundedCornerShape(7.dp), ) { Column( modifier = Modifier . padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally , ) { Icon( imageVector = Icons.Rounded. Call, contentDescription = "Call Icon" ) Text(userName) } } } @Composable @Preview fun CallCardPreview () { CallCard("Robin") } ./gradlew validateDebugScreenshotTest
17. Comment fonctionne ?
18. 👀 Custom Test Previews
19. Custom Test Previews @Preview @PreviewFrench @PreviewsUOrientation @PreviewsUFontScale @PreviewLightDark annotation class PreviewScreenshotTest @Preview( name = "Landscape Mode" , showBackground = true, device = Devices. AUTOMOTIVE_1024p , widthDp = 640 ) @Preview(name = "Portrait Mode" , showBackground = true) annotation class PreviewsUOrientation @Preview(name = "Default Font Size" , fontScale = 1f) @Preview(name = "Large Font Size" , fontScale = 1.5f) annotation class PreviewsUFontScale @Preview(locale = "fr") annotation class PreviewFrench
21. 🚀 Démo !
22. Mise en place d’une CI avec Github Actions
23. CI/CD - exemple avec Github Actions - name: Run screenshot tests run: ./gradlew :app:validateDebugScreenshotTest - name: Upload screenshot test report if: always() uses: actions/upload-artifact@v4 with: name: screenshot-test-report path: app/build/reports/screenshotTest/
24. ⚠
25. Les couleurs peuvent être différentes d’un OS à l’autre
26. Autoriser un seuil de différence testOptions { screenshotTests { imageDifferenceThreshold = 0.02f // 0.2% } } #app/build.gradle.kts 📎Image Thresholding in Image Processing
27. Les couleurs peuvent être différentes d’un OS à l’autre
28. Et Git dans tout ça ?
29. Git LFS # Installation de Git LFS git lfs install # Configuration pour les screenshots git lfs track "**/*.png" # Ajout du fichier .gitattributes git add .gitattributes
30. Git LFS 👌 Bonnes pratiques : • Mettre en place Git LFS dès le début du projet • Documenter la configuration LFS dans le README du projet • S'assurer que tous les membres de l'équipe ont Git LFS installé • Définir une stratégie de nettoyage des anciennes images
31. Suppression de l’historique git filter-repo \ --path 'app/src/debug/screenshotTest' \ --invert-paths \ --force \ --before='1 year ago' git lfs prune # Une fois la PR mergée git lfs prune --force git gc --aggressive
32. Avantages 😀 Simple à mettre en place 😀 Automatisation facilitée 😀 Tests JVM ⇒ Execution rapide Inconvénients 😒 Pas open source 😒 En cours de développement 😒 Faible documentation 😒 Le rendu peut varier selon l’OS et générer des faux positifs ⚠ Attention à l’utilisation de Git 🍿 Takeaway - Compose Preview Screenshot testing
33. Robin Caroff U Tech - GDG Nantes Android U Tech Etienne Priou Screenshot Testing pour Compose Preview