Screenshot-Tests sind eine effektive Möglichkeit, um zu überprüfen, wie Ihre Benutzeroberfläche für Nutzende aussieht. Das Tool zum Testen von Screenshots zur Vorschau in der Vorschau kombiniert die Einfachheit und die Funktionen von zusammensetzbaren Vorschauen mit den Produktivitätsgewinnen beim Ausführen von Screenshot-Tests auf Hostseite. Vorschau erstellen Screenshottests sind so einfach zu verwenden wie zusammensetzbare Vorschauen.
Ein Screenshot-Test ist ein automatisierter Test, bei dem ein Screenshot einer Benutzeroberfläche erstellt und dann mit einem zuvor genehmigten Referenzbild verglichen wird. Wenn die Bilder nicht übereinstimmen, schlägt der Test fehl und erstellt einen HTML-Bericht, mit dem Sie die Unterschiede vergleichen und ermitteln können.
Mit dem Screenshot-Testtool „Vorschau erstellen“ können Sie Folgendes tun:
- Ermitteln Sie eine Anzahl vorhandener oder neuer zusammensetzbarer Vorschauen, die Sie für Screenshot-Tests verwenden möchten.
- Generieren Sie Referenzbilder aus diesen zusammensetzbaren Vorschauen.
- Generieren Sie einen HTML-Bericht, in dem Änderungen an diesen Vorschauen identifiziert werden, nachdem Sie Codeänderungen vorgenommen haben.
- Verwenden Sie
@Preview
-Parameter wieuiMode
oderfontScale
sowie mehrere Vorschauen, um Ihre Tests zu skalieren. - Modularisieren Sie Ihre Tests mit dem neuen Quellsatz
screenshotTest
.
Voraussetzungen
Sie benötigen Folgendes, um den Screenshot-Test „Vorschau erstellen“ verwenden zu können:
- Android Gradle 8.5.0-beta01 oder höher.
- Kotlin 1.9.20 oder höher.
Einrichten
So aktivieren Sie das Tool:
- Fügen Sie Ihrem Projekt das
com.android.compose.screenshot
-Plug-in, Version0.0.1-alpha01
, hinzu. - Fügen Sie das Plug-in der Datei mit den Versionskatalogen 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 das Plug-in in der Datei
build.gradle.kts
auf Modulebene zum Blockplugins {}
hinzu:plugins { ... alias(libs.plugins.screenshot) }
- Aktivieren Sie das experimentelle Attribut in der Datei
gradle.properties
Ihres Projekts.android.experimental.enableScreenshotTest=true
- Aktivieren Sie im Block
android {}
der Dateibuild.gradle.kts
auf Modulebene das experimentelle Flag zur Verwendung des QuellsatzesscreenshotTest
und achten Sie darauf, dasskotlinCompilerExtensionVersion
auf 1.5.4 oder höher festgelegt ist.android { ... composeOptions { kotlinCompilerExtensionVersion = "1.5.4" } experimentalProperties["android.experimental.enableScreenshotTest"] = true }
- Achten Sie darauf, dass Sie die Abhängigkeit
ui-tooling
hinzugefügt haben.- Fügen Sie ihn 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 ihn Ihren Versionskatalogen hinzu:
Zusammensetzbare Vorschauen für Screenshot-Tests festlegen
Um die zusammensetzbaren Vorschauen festzulegen, die Sie für Screenshot-Tests verwenden möchten, platzieren Sie die Vorschauen in einer Testklasse. Die Testklassendatei muss sich im neuen screenshotTest
-Quellsatz befinden, z. B. app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt
({module}/src/screenshotTest/{kotlin|java}/com/your/package
).
Sie können in dieser Datei oder in anderen Dateien, die im selben Quellsatz erstellt wurden, weitere zusammensetzbare Funktionen und/oder Vorschauen hinzufügen, einschließlich mehrerer Vorschauen.
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 Vorschau Referenzbilder generieren. Anhand dieser Referenzbilder werden später Änderungen am Code identifiziert. Führen Sie die folgende Gradle-Aufgabe aus, um Referenzbilder für Ihre zusammensetzbaren Vorschau-Screenshot-Tests zu generieren:
- Linux und macOS:
./gradlew updateDebugScreenshotTest
(./gradlew {:module:}update{Variant}ScreenshotTest
) - Windows:
gradlew updateDebugScreenshotTest
(gradlew {:module:}update{Variant}ScreenshotTest
)
Suchen Sie nach Abschluss der Aufgabe die Referenzbilder 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 mit dem Referenzbild zu vergleichen:
- Linux und macOS:
./gradlew validateDebugScreenshotTest
(./gradlew {:module:}validate{Variant}ScreenshotTest
) - Windows:
gradlew validateDebugScreenshotTest
(gradlew {:module:}validate{Variant}ScreenshotTest
)
Durch die Überprüfung wird unter {module}/build/reports/screenshotTest/preview/{variant}/index.html
ein HTML-Bericht erstellt.
Bekannte Probleme
- Wenn eine Vorschau im Quellsatz
screenshotTest
den voll qualifizierten Methodennamen mit einer Vorschau inmain
teilt, wird die Methode in „main“ fälschlicherweise für den Test und nicht für den Screenshot-Test verwendet.