Screenshot-Tests sind eine effektive Möglichkeit, um zu überprüfen, wie Ihre Benutzeroberfläche für Nutzer aussieht. Die Das Tool zum Erstellen der Vorschau für Screenshot-Tests kombiniert die Einfachheit und Funktionen von zusammensetzbare Vorschauen mit dem höhere Produktivität durch das Ausführen von Screenshot-Tests auf Hostseite. Vorschau erstellen Die Screenshot-Tests sind so nutzerfreundlich wie zusammensetzbare Vorschauen.
Ein Screenshot-Test ist ein automatisierter Test, bei dem ein Screenshot einer Benutzeroberfläche erstellt wird. und vergleicht es dann mit einem zuvor genehmigten Referenzbild. Wenn die nicht übereinstimmen, schlägt der Test fehl und es wird ein HTML-Bericht erstellt, und die Unterschiede finden.
Mit dem Tool zum Erstellen der Vorschau für Screenshots können Sie Folgendes tun:
- Legen Sie fest, welche vorhandenen oder neuen zusammensetzbaren Vorschauen Sie verwenden möchten. Screenshot-Tests.
- Generieren Sie Referenzbilder aus diesen zusammensetzbaren Vorschauen.
- Erstellen Sie einen HTML-Bericht, aus dem hervorgeht, welche Änderungen an den Vorschauen nach Änderungen am Code vornehmen.
@Preview
-Parameter wieuiMode
oderfontScale
und Mehrfachvorschauen verwenden damit Sie Ihre Tests skalieren können.- Modularisieren Sie Ihre Tests mit dem neuen
screenshotTest
-Quellsatz.
![](https://developer.android.google.cn/static/studio/images/compose-screenshot-testing.png?authuser=19&hl=de)
Voraussetzungen
Um die Erstellung von Screenshot-Tests in der Vorschau zu verwenden, benötigen Sie Folgendes:
- Android Gradle 8.5.0-beta01 oder höher.
- Kotlin 1.9.20 oder höher.
Einrichten
So aktivieren Sie das Tool:
- Version des
com.android.compose.screenshot
-Plug-ins hinzufügen0.0.1-alpha01
zu Ihrem Projekt hinzugefügt. - Fügen Sie Ihrer Versionskatalogdatei das Plug-in hinzu:
[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"}
- Fügen Sie in der Datei
build.gradle.kts
auf Modulebene das Plug-in implugins {}
-Block:plugins { ... alias(libs.plugins.screenshot) }
- Experimentelle Property aktivieren in der
gradle.properties
-Datei.android.experimental.enableScreenshotTest=true
- Im Block
android {}
Ihrer Modulebenebuild.gradle.kts
enthält, aktivieren Sie das experimentelle Flag, um den ParameterscreenshotTest
-Quellen festgelegt und stellen Sie sicher, dasskotlinCompilerExtensionVersion
ist auf 1.5.4 oder höher festgelegt. <ph type="x-smartling-placeholder">android { ... composeOptions { kotlinCompilerExtensionVersion = "1.5.4" } experimentalProperties["android.experimental.enableScreenshotTest"] = true }
- Vergewissern Sie sich, dass Sie
ui-tooling
Abhängigkeit.- Fügen Sie sie Ihren Versionskatalogen hinzu:
[libraries] androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
- Fügen Sie ihn der Datei
build.gradle.kts
auf Modulebene hinzu:dependencies { screenshotTestImplementation(libs.androidx.compose.ui.tooling) }
- Fügen Sie sie Ihren Versionskatalogen hinzu:
Zusammensetzbare Vorschauen für Screenshot-Tests festlegen
Um die zusammensetzbaren Vorschauen festzulegen, die Sie für Screenshot-Tests verwenden möchten,
Vorschauen in einer Testklasse. Die Testklassendatei muss sich im neuen
screenshotTest
-Quellsatz, z. B.
app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt
({module}/src/screenshotTest/{kotlin|java}/com/your/package
)
Weitere zusammensetzbare Funktionen und/oder Vorschauen, einschließlich mehrerer Vorschauen, können Sie in oder andere Dateien, die im selben Quellsatz erstellt wurden.
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!")
}
}
}
Referenzbilder generieren
Nachdem Sie eine Testklasse eingerichtet haben, müssen Sie für jede Klasse Referenzbilder generieren. in der Vorschau ansehen. Diese Referenzbilder werden verwendet, um später, nachdem Sie Änderungen am Code vornehmen. So generieren Sie Referenzbilder für die zusammensetzbare Vorschau: Screenshottests, führen Sie die folgende Gradle-Task aus:
- Linux und macOS:
./gradlew updateDebugScreenshotTest
(./gradlew {:module:}update{Variant}ScreenshotTest
) - Windows:
gradlew updateDebugScreenshotTest
(gradlew {:module:}update{Variant}ScreenshotTest
)
Suchen Sie nach Abschluss der Aufgabe nach den Referenzbildern in
app/src/debug/screenshotTest/reference
({module}/src/{variant}/screenshotTest/reference
)
Testbericht erstellen
Sobald die Referenzbilder vorhanden sind, führen Sie die Validierungsaufgabe aus, um einen neuen Screenshot zu erstellen und vergleichen es mit dem Referenzbild:
- Linux und macOS:
./gradlew validateDebugScreenshotTest
(./gradlew {:module:}validate{Variant}ScreenshotTest
) - Windows:
gradlew validateDebugScreenshotTest
(gradlew {:module:}validate{Variant}ScreenshotTest
)
Die Verifizierungsaufgabe erstellt einen HTML-Bericht unter
{module}/build/reports/screenshotTest/preview/{variant}/index.html
Bekannte Probleme
Eine aktuelle Liste bekannter Probleme finden Sie in der Komponente der Problemverfolgung: Sonstiges Feedback und Probleme melden finden Sie in der Problemverfolgung.