Cette page a été traduite par l'API Cloud Translation.

Test de capture d'écran de l'aperçu Compose

Les tests de captures d'écran sont un moyen efficace de vérifier l'apparence de votre UI pour les utilisateurs. L'outil de test des captures d'écran d'aperçu Compose combine la simplicité et les fonctionnalités des aperçus de composables avec les 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 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 les images ne correspondent pas, le test échoue et génère un rapport HTML pour vous aider à 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 que uiMode ou fontScale, et les aperçus multiples pour vous aider à adapter vos tests.
Modularisez vos tests avec le nouvel ensemble de sources screenshotTest.

Conditions requises

Pour utiliser les tests de capture 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, version 0.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 Bloc plugins {}:
```
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 fichier build.gradle.kts au niveau du module, activez l'indicateur expérimental pour utiliser l'ensemble de sources screenshotTest et assurez-vous que kotlinCompilerExtensionVersion est défini sur 1.5.4 ou version ultérieure.
Remarque:Si vous utilisez Kotlin 2.0 ou une version ultérieure, il n'est pas nécessaire de définir le paramètre Version du compilateur Compose séparément. En savoir plus sur les Plug-in Gradle de Compose Compiler
```
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)
}

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 des aperçus, y compris des multi-aperçus, 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

Une fois que vous avez 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 permettent d'identifier les modifications modifier le 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 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. Signalez tout autre commentaire et problème via l'outil de suivi des problèmes.

Mises à jour des versions

Notes de version et modifications des versions en cours

0.0.1-alpha06

Cette version inclut les éléments suivants:

Seuil de différence d'image : ce nouveau paramètre de seuil global vous permet de mieux contrôler les comparaisons de captures d'écran. Pour configurer, mettez à jour le fichier build.gradle.kts de votre module :

android {
    ...
    testOptions {
        ...
        screenshotTests {
            imageDifferenceThreshold = 0.0001f // 0.01%
        }
    }
}

Ce seuil sera appliqué à tous les tests de captures d'écran définis dans le module.

Correction de bugs: certains bugs dans le moteur de rendu Compose et ajout de la prise en charge du mode de rédaction vide
Améliorations des performances: l'algorithme de comparaison d'images a été mis à jour pour être plus rapide