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 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 wie uiMode oder fontScale und Mehrfachvorschauen verwenden damit Sie Ihre Tests skalieren können.
  • Modularisieren Sie Ihre Tests mit dem neuen screenshotTest-Quellsatz.
<ph type="x-smartling-placeholder">
</ph>
Abbildung 1. Beispiel für einen HTML-Bericht.

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:

  1. Version des com.android.compose.screenshot-Plug-ins hinzufügen 0.0.1-alpha01 zu Ihrem Projekt hinzugefügt.
    1. 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"}
    2. Fügen Sie in der Datei build.gradle.kts auf Modulebene das Plug-in im plugins {}-Block: 
      plugins {
    ...
    alias(libs.plugins.screenshot)
}
  2. Experimentelle Property aktivieren in der gradle.properties-Datei. 
    android.experimental.enableScreenshotTest=true
  3. Im Block android {} Ihrer Modulebene build.gradle.kts enthält, aktivieren Sie das experimentelle Flag, um den Parameter screenshotTest-Quellen festgelegt und stellen Sie sicher, dass kotlinCompilerExtensionVersion 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
}
  4. Vergewissern Sie sich, dass Sie ui-tooling Abhängigkeit.
    1. Fügen Sie sie Ihren Versionskatalogen hinzu: 
      [libraries]
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
    2. 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, 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.