Il test degli screenshot è un modo efficace per verificare l'aspetto della tua UI 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. Crea anteprima Il test degli screenshot è progettato per essere facile da usare quanto le anteprime componibili.
Un test degli screenshot è un test automatico che acquisisce uno screenshot di un'interfaccia utente e la confronta con un'immagine di riferimento approvata in precedenza. Se le immagini non corrispondono, il test non riesce e genera un report HTML che confrontare e trovare le differenze.
Con lo strumento di test dello screenshot di anteprima di Compose Preview, puoi:
- Identifica una serie di anteprime componibili nuove o esistenti da utilizzare per i test di screenshot.
- Genera immagini di riferimento da queste anteprime componibili.
- Genera un report HTML che identifica le modifiche apportate a queste anteprime dopo apportare modifiche al codice.
- Usa i parametri
@Preview
, comeuiMode
ofontScale
, e più anteprime per aiutarti a scalare i test. - Modularizza i test con il nuovo set di origini
screenshotTest
.
Requisiti
Per utilizzare il test dello screenshot di anteprima di Compose Preview, occorre quanto segue:
- Android Gradle 8.5.0-beta01 o versioni successive.
- Kotlin 1.9.20 o versioni successive.
Configura
Per attivare lo strumento:
- Aggiungi il plug-in
com.android.compose.screenshot
, versione0.0.1-alpha01
al progetto. - Aggiungi il plug-in al file dei cataloghi delle versioni:
[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"}
- Nel file
build.gradle.kts
a livello di modulo, aggiungi il plug-in nel Bloccoplugins {}
:plugins { ... alias(libs.plugins.screenshot) }
- Attiva la proprietà sperimentale nel tag
gradle.properties
.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
e assicurati chekotlinCompilerExtensionVersion
sia impostato su 1.5.4 o versioni successive.android { ... composeOptions { kotlinCompilerExtensionVersion = "1.5.4" } experimentalProperties["android.experimental.enableScreenshotTest"] = true }
- Assicurati di aver aggiunto
ui-tooling
della dipendenza.- Aggiungila ai tuoi cataloghi delle versioni:
[libraries] androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
- Aggiungila al file
build.gradle.kts
a livello di modulo:dependencies { screenshotTestImplementation(libs.androidx.compose.ui.tooling) }
- Aggiungila ai tuoi cataloghi delle versioni:
Specifica le anteprime componibili da utilizzare per i test degli screenshot
Per designare le anteprime componibili da utilizzare per i test degli screenshot, posiziona
le anteprime in una classe di test. Il file della classe di test deve trovarsi nel nuovo
screenshotTest
set di origini, ad esempio
app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt
({module}/src/screenshotTest/{kotlin|java}/com/your/package
).
Puoi aggiungere altri elementi componibili e/o anteprime, incluse più anteprime, in questo o altri file creati nello stesso set di origini.
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!")
}
}
}
Genera immagini di riferimento
Dopo aver impostato una classe di test, devi generare immagini di riferimento l'anteprima. Queste immagini di riferimento vengono utilizzate per identificare le modifiche in seguito, apportare modifiche al codice. Generare immagini di riferimento per l'anteprima componibile screenshot, esegui la seguente attività 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/debug/screenshotTest/reference
({module}/src/{variant}/screenshotTest/reference
).
Genera un report di prova
Una volta create le immagini di riferimento, esegui l'attività di convalida per acquisire un nuovo screenshot e confrontarla 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 aggiornato dei problemi noti nello strumento Componente Issue Tracker. Segnala eventuali altri feedback e problemi tramite il tracker dei problemi.
Aggiornamenti delle release
Note di rilascio e modifiche per le versioni in corso
0.0.1-alpha06
Questa release introduce:
"Image Difference Soglia": la nuova impostazione della soglia globale consente di avere un controllo più preciso sui confronti di screenshot. Per configurare, aggiorna build.gradle.kts del modulo:
android {
...
testOptions {
...
screenshotTests {
imageDifferenceThreshold = 0.0001f // 0.01%
}
}
}
Questa soglia verrà applicata a tutti i test di screenshot definiti nel modulo.
- Correzioni di bug: alcuni bug del renderer di Compose e aggiunto supporto per la modalità di scrittura vuota
- Miglioramenti delle prestazioni: l'algoritmo per il confronto delle immagini è stato aggiornato per essere più veloce