Le test des captures d'écran est un moyen efficace de vérifier l'apparence de votre interface utilisateur pour les utilisateurs. La L'outil de test des captures d'écran d'aperçu de Compose combine la simplicité et les fonctionnalités de aperçus composables avec la fonction de gains de productivité liés à l'exécution de tests de captures d'écran côté hôte. Aperçu de Compose Les tests de captures 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 le compare à une image de référence déjà approuvée. Si le ne correspondent pas, le test échoue et génère un rapport HTML qui vous aide comparer et trouver les différences.
Avec l'outil de test des captures d'écran d'aperçu de Compose, vous pouvez:
- Identifier le nombre d'aperçus composables existants ou nouveaux que vous souhaitez utiliser des tests de capture 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 une fois que vous modifier le code.
- Utiliser les paramètres
@Preview
, tels queuiMode
oufontScale
, et les 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=2&hl=fr)
Conditions requises
Pour utiliser les tests de captures d'écran d'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.
Configuration
Pour activer cet outil, procédez comme suit:
- Ajouter le plug-in
com.android.compose.screenshot
, version0.0.1-alpha01
à votre projet. - Ajoutez le plug-in à votre fichier de catalogues 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 Blocplugins {}
:plugins { ... alias(libs.plugins.screenshot) }
- Activez la propriété expérimentale dans le fichier
gradle.properties
.android.experimental.enableScreenshotTest=true
- Dans le bloc
android {}
de votre modulebuild.gradle.kts
, activez l'indicateur expérimental pour utiliserscreenshotTest
et assurez-vous quekotlinCompilerExtensionVersion
est défini sur la version 1.5.4 ou ultérieure. <ph type="x-smartling-placeholder">android { ... composeOptions { kotlinCompilerExtensionVersion = "1.5.4" } experimentalProperties["android.experimental.enableScreenshotTest"] = true }
- Assurez-vous d'avoir ajouté la
ui-tooling
la dépendance.- Ajoutez-le à vos catalogues de versions:
[libraries] androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
- Ajoutez-le à votre 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 composables que vous souhaitez utiliser pour les tests de capture d'écran, placez
les aperçus dans une classe de test. Le fichier de classe de test doit se trouver dans le nouveau
screenshotTest
ensemble de sources, 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 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 un aperçu. Ces images de référence permettent d'identifier les modifications modifier le code. Générer des images de référence pour l'aperçu de votre composable des tests de capture d'écran, 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 l'opération terminée, recherchez les images de référence
app/src/debug/screenshotTest/reference
({module}/src/{variant}/screenshotTest/reference
).
Générer un rapport de test
Une fois les images de référence existantes, exécutez la tâche de validation pour faire une nouvelle capture d'écran puis comparez-la à 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 vérification crée un rapport HTML à l'adresse
{module}/build/reports/screenshotTest/preview/{variant}/index.html
Problèmes connus
La liste actuelle des problèmes connus est disponible dans les Composant Issue Tracker. Signaler tout autre commentaire ou problème via l'outil de suivi des problèmes.