Diese Seite wurde von der Cloud Translation API übersetzt.

Test zum Erstellen eines Screenshots mit der Vorschau

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 wie uiMode oder fontScale sowie mehrere Vorschauen, um Ihre Tests zu skalieren.
Modularisieren Sie Ihre Tests mit dem neuen Quellsatz screenshotTest.

**Abbildung 1.** Beispiel für einen HTML-Bericht

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, Version 0.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 Block plugins {} 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 Datei build.gradle.kts auf Modulebene das experimentelle Flag zur Verwendung des Quellsatzes screenshotTest und achten Sie darauf, dass kotlinCompilerExtensionVersion auf 1.5.4 oder höher festgelegt ist.
Hinweis:Wenn Sie Kotlin 2.0 oder höher verwenden, müssen Sie die Version „Compose Compiler“ nicht separat festlegen. Weitere Informationen zum Gradle-Plug-in „Compose Compiler“
```
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)
}

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 in main teilt, wird die Methode in „main“ fälschlicherweise für den Test und nicht für den Screenshot-Test verwendet.