I test degli screenshot sono un modo efficace per verificare l'aspetto dell'interfaccia utente per gli utenti. Lo strumento di test degli screenshot di anteprima di Compose combina la semplicità e le funzionalità delle anteprime componibili con i vantaggi in termini di produttività dell'esecuzione di test degli screenshot lato host. Il test di screenshot di Anteprima composta è progettato per essere facile da usare quanto le anteprime componibili.
Un test di screenshot è un test automatico che acquisisce uno screenshot di un componente dell'interfaccia utente e lo confronta con un'immagine di riferimento approvata in precedenza. Se le immagini non corrispondono, il test non va a buon fine e viene generato un report HTML per aiutarti a confrontare e trovare le differenze.
Con lo strumento di test degli screenshot dell'anteprima di composizione, puoi:
- Utilizza
@PreviewTest
per creare test di screenshot per anteprime di composibili nuove o esistenti. - Genera immagini di riferimento da queste anteprime componibili.
- Genera un report HTML che identifica le modifiche apportate a queste anteprime dopo aver apportato modifiche al codice.
- Utilizza i parametri
@Preview
, comeuiMode
ofontScale
, e le anteprime multiple per aiutarti a scalare i test. - Modulare i test con il nuovo set di origini
screenshotTest
.

Requisiti
Per utilizzare il test di screenshot dell'anteprima di composizione, devi disporre di quanto segue:
- Plug-in Android per Gradle 8.5.0-beta01 o versioni successive.
- Kotlin 1.9.20 o versioni successive. Ti consigliamo di utilizzare Kotlin 2.0 o versioni successive per poter utilizzare il plug-in Gradle Compose Compiler.
Componi abilitato per il tuo progetto. Ti consigliamo di attivare Compose utilizzando il plug-in Gradle del compilatore Compose.
Configura
Per attivare lo strumento:
- Aggiungi il plug-in
com.android.compose.screenshot
, versione0.0.1-alpha10
al tuo progetto. - Aggiungi il plug-in al file dei cataloghi delle versioni:
[versions] agp = "8.11.0-alpha06" kotlin = "2.1.20" screenshot = "0.0.1-alpha10" [plugins] screenshot = { id = "com.android.compose.screenshot", version.ref = "screenshot"}
- Nel file
build.gradle.kts
a livello di modulo, aggiungi il plug-in nel bloccoplugins {}
:plugins { alias(libs.plugins.screenshot) }
- Abilita la proprietà sperimentale nel file
gradle.properties
del progetto.android.experimental.enableScreenshotTest=true
- Nel blocco
android {}
del filebuild.gradle.kts
a livello di modulo, attiva il flag sperimentale per utilizzare il set di originescreenshotTest
.android { experimentalProperties["android.experimental.enableScreenshotTest"] = true }
- Aggiungi le dipendenze
screenshot-validation-api
eui-tooling
.- Aggiungile ai cataloghi delle versioni:
[libraries] screenshot-validation-api = { group = "com.android.tools.screenshot", name = "screenshot-validation-api", version.ref = "screenshot"} androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
- Aggiungili al file
build.gradle.kts
a livello di modulo:dependencies { screenshotTestImplementation(libs.screenshot.validation.api) screenshotTestImplementation(libs.androidx.ui.tooling) }
- Aggiungile ai cataloghi delle versioni:
Designare le anteprime componibili da utilizzare per i test degli screenshot
Per designare le anteprime composable che vuoi utilizzare per i test degli screenshot, contrassegnale con l'annotazione @PreviewTest
. Le anteprime devono trovarsi nel nuovo set di origini screenshotTest
, ad esempio app/src/screenshotTest/kotlin/com/example/yourapp/ExamplePreviewScreenshotTest.kt
.
Puoi aggiungere altri composabili e/o anteprime, incluse le anteprime multiple, in questo file o in altri file creati nello stesso set di origini.
package com.example.yourapp
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.android.tools.screenshot.PreviewTest
import com.example.yourapp.ui.theme.MyApplicationTheme
@PreviewTest
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
MyApplicationTheme {
Greeting("Android!")
}
}
Genera immagini di riferimento
Dopo aver configurato una classe di test, devi generare immagini di riferimento per ogni anteprima. Queste immagini di riferimento vengono utilizzate per identificare le modifiche in un secondo momento, dopo aver apportato le modifiche al codice. Per generare immagini di riferimento per i test degli screenshot di anteprima composable, esegui il seguente task Gradle:
- Linux e macOS:
./gradlew updateDebugScreenshotTest
(./gradlew :{module}:update{Variant}ScreenshotTest
) - Windows:
gradlew updateDebugScreenshotTest
(gradlew :{module}:update{Variant}ScreenshotTest
)
Al termine dell'attività, trova le immagini di riferimento in
app/src/screenshotTestDebug/reference
({module}/src/screenshotTest{Variant}/reference
).
Generare un report di test
Una volta che le immagini di riferimento sono presenti, esegui l'attività di convalida per acquisire un nuovo screenshot e confrontarlo con l'immagine di riferimento:
- Linux e macOS:
./gradlew validateDebugScreenshotTest
(./gradlew :{module}:validate{Variant}ScreenshotTest
) - Windows:
gradlew validateDebugScreenshotTest
(gradlew :{module}:validate{Variant}ScreenshotTest
)
L'attività di verifica crea un report HTML all'indirizzo
{module}/build/reports/screenshotTest/preview/{variant}/index.html
.
Problemi noti
Puoi trovare l'elenco attuale dei problemi noti nel componente Issue Tracker dello strumento. Segnala eventuali altri feedback e problemi tramite il tracker dei problemi.
Aggiornamenti delle versioni
Note di rilascio e modifiche per le versioni correnti.
0.0.1-alpha10
Questa release introduce:
A partire da questa versione, devi contrassegnare tutte le funzioni di anteprima con l'annotazione
@PreviewTest
. Le anteprime senza l'annotazione non verranno eseguite.La directory delle immagini di riferimento è stata modificata da
{module}/src/{variant}/screenshotTest/reference
a{module}/src/screenshotTest{Variant}/reference
. In questo modo, le immagini di riferimento generate non faranno parte del codice di produzione e saranno in linea con la struttura della directory di altri tipi di test.L'attività
{variant}PreviewScreenshotRender
viene rimossa. Il rendering delle immagini viene eseguito in JUnit Test Engine.L'attività
update{Variant}ScreenshotTest
confronta le nuove immagini di rendering con quelle di riferimento prima dell'aggiornamento. Verranno aggiornate solo le immagini con differenze superiori a una soglia specificata. Il flag--updateFilter
della riga di comando è stato rimosso.
0.0.1-alpha06
Questa release introduce:
Soglia di differenza di immagine: questa nuova impostazione della soglia globale ti consente di avere un controllo più preciso sui confronti degli screenshot. Per la configurazione, aggiorna il file build.gradle.kts del modulo:
android {
testOptions {
screenshotTests {
imageDifferenceThreshold = 0.0001f // 0.01%
}
}
}
Questa soglia verrà applicata a tutti i test degli screenshot definiti nel modulo.
- Correzioni di bug: alcuni bug di Compose Renderer e supporto aggiunto per la composizione vuota
- Miglioramenti al rendimento: l'algoritmo di confronto delle immagini è stato aggiornato per essere più veloce