Les tests de captures d'écran sont un moyen efficace de vérifier l'apparence de votre interface utilisateur pour les utilisateurs. L'outil de test des captures d'écran de l'aperçu de Compose combine la simplicité et les fonctionnalités des aperçus composables aux gains de productivité liés à l'exécution de tests de capture d'écran côté hôte. Aperçu de Compose Les tests de capture d'écran sont conçus pour être aussi faciles à utiliser que les aperçus composables.
Un test de capture d'écran est un test automatisé qui effectue une capture d'écran d'un élément de l'interface utilisateur, puis la compare à une image de référence approuvée précédemment. Si les images ne correspondent pas, le test échoue et génère un rapport HTML pour vous aider à comparer et à trouver les différences.
Grâce à l'outil de test des captures d'écran de l'aperçu de Compose, vous pouvez:
- Identifiez un certain nombre d'aperçus de composables existants ou nouveaux que vous souhaitez utiliser pour les tests de captures d'écran.
- Générez des images de référence à partir de ces aperçus composables.
- Générez un rapport HTML qui identifie les modifications apportées à ces aperçus après avoir apporté des modifications au code.
- Utilisez des paramètres
@Preview
, tels queuiMode
oufontScale
, ainsi que des aperçus multiples pour vous aider à adapter vos tests. - Modularisez vos tests avec le nouvel ensemble de sources
screenshotTest
.
![](https://developer.android.com/static/studio/images/compose-screenshot-testing.png?authuser=6&hl=fr)
Exigences
Pour utiliser les tests de capture d'écran de l'aperçu de Compose, vous avez besoin des éléments suivants:
- Android Gradle 8.5.0-beta01 ou version ultérieure.
- Kotlin 1.9.20 ou version ultérieure.
Configurer
Pour activer l'outil, procédez comme suit:
- Ajoutez le plug-in
com.android.compose.screenshot
, version0.0.1-alpha01
, à votre projet. - Ajoutez le plug-in à votre fichier de catalogue de versions :
[versions] agp = "8.5.0-beta01" kotlin = "1.9.20" ... screenshot = "0.0.1-alpha01" [plugins] ... screenshot = { id = "com.android.compose.screenshot", version.ref = "screenshot"}
- Dans le fichier
build.gradle.kts
au niveau du module, ajoutez le plug-in dans le blocplugins {}
:plugins { ... alias(libs.plugins.screenshot) }
- Activez la propriété expérimentale dans le fichier
gradle.properties
de votre projet.android.experimental.enableScreenshotTest=true
- Dans le bloc
android {}
de votre fichierbuild.gradle.kts
au niveau du module, activez l'indicateur expérimental pour utiliser l'ensemble de sourcesscreenshotTest
et assurez-vous quekotlinCompilerExtensionVersion
est défini sur 1.5.4 ou une version ultérieure.android { ... composeOptions { kotlinCompilerExtensionVersion = "1.5.4" } experimentalProperties["android.experimental.enableScreenshotTest"] = true }
- Assurez-vous d'avoir ajouté la dépendance
ui-tooling
.- Ajoutez-le à vos catalogues de versions :
[libraries] androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
- Ajoutez-le au fichier
build.gradle.kts
au niveau du module :dependencies { screenshotTestImplementation(libs.androidx.compose.ui.tooling) }
- Ajoutez-le à vos catalogues de versions :
Désigner des aperçus composables à utiliser pour les tests de capture d'écran
Pour désigner les aperçus de composables à utiliser pour les tests de capture d'écran, placez-les dans une classe de test. Le fichier de classe de test doit se trouver dans le nouvel ensemble de sources screenshotTest
, par exemple app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt
({module}/src/screenshotTest/{kotlin|java}/com/your/package
).
Vous pouvez ajouter d'autres composables et/ou aperçus, y compris des aperçus multiples, dans ce fichier ou dans d'autres fichiers créés dans le même ensemble de sources.
package com.google.yourapp
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.google.yourapp.ui.theme.MyApplicationTheme
class ExamplePreviewsScreenshots {
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
MyApplicationTheme {
Greeting("Android!")
}
}
}
Générer des images de référence
Après avoir configuré une classe de test, vous devez générer des images de référence pour chaque aperçu. Ces images de référence servent à identifier les modifications ultérieurement, après avoir apporté des modifications au code. Pour générer des images de référence pour vos tests de capture d'écran d'aperçu de composable, exécutez la tâche Gradle suivante:
- Linux et macOS:
./gradlew updateDebugScreenshotTest
(./gradlew {:module:}update{Variant}ScreenshotTest
) - Windows:
gradlew updateDebugScreenshotTest
(gradlew {:module:}update{Variant}ScreenshotTest
)
Une fois la tâche terminée, recherchez les images de référence dans app/src/debug/screenshotTest/reference
({module}/src/{variant}/screenshotTest/reference
).
Générer un rapport de test
Une fois que les images de référence existent, exécutez la tâche de validation pour faire une nouvelle capture d'écran et la comparer à l'image de référence:
- Linux et macOS:
./gradlew validateDebugScreenshotTest
(./gradlew {:module:}validate{Variant}ScreenshotTest
) - Windows:
gradlew validateDebugScreenshotTest
(gradlew {:module:}validate{Variant}ScreenshotTest
)
La tâche de validation crée un rapport HTML à l'adresse {module}/build/reports/screenshotTest/preview/{variant}/index.html
.
Problèmes connus
- Si un aperçu de l'ensemble de sources
screenshotTest
partage son nom de méthode complet avec un aperçu dansmain
, celui de la source principale est utilisé de manière incorrecte pour le test au lieu du test de capture d'écran.