Test zum Erstellen eines Screenshots mit der Vorschau

Screenshot-Tests sind eine effektive Möglichkeit, zu prüfen, wie Ihre Benutzeroberfläche für Nutzer aussieht. Das Tool zum Testen von Screenshots in der Vorschau kombiniert die Einfachheit und Funktionen von kombinierbaren Vorschauen mit den Produktivitätsvorteilen von hostseitigen Screenshot-Tests. Der Screenshot-Test mit der Funktion „Vorschau erstellen“ ist genauso einfach zu verwenden wie die Funktion „Vorschau erstellen“.

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 es wird ein HTML-Bericht erstellt, mit dem Sie die Unterschiede vergleichen und finden können.

Mit dem Tool zum Testen von Screenshots in der Vorschau von Compose haben Sie folgende Möglichkeiten:

• Wählen Sie eine Reihe vorhandener oder neuer Previews aus, die Sie für Screenshot-Tests verwenden möchten.
• Erstellen Sie Referenzbilder aus diesen zusammensetzbaren Vorschauen.
• Erstellen Sie einen HTML-Bericht, in dem Änderungen an diesen Vorschauen nach Codeänderungen aufgeführt werden.
• Verwenden Sie @Preview-Parameter wie uiMode oder fontScale und mehrere Vorschauen, um Ihre Tests zu skalieren.
• Mit dem neuen screenshotTest-Quellsatz können Sie Ihre Tests modularisieren.

Voraussetzungen

Für den Screenshot-Test in der Compose-Vorschau 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. Fügen Sie Ihrem Projekt das com.android.compose.screenshot-Plug-in, Version 0.0.1-alpha07, hinzu.
1. Fügen Sie das Plug-in der Datei „version_catalogs“ hinzu:

   [versions]
   agp = "8.5.0-beta01"
   kotlin = "1.9.20"
   ...
   screenshot = "0.0.1-alpha07"
   
   [plugins]
   ...
   screenshot = { id = "com.android.compose.screenshot", version.ref = "screenshot"}
   

2. Fügen Sie das Plug-in in der Datei build.gradle.kts auf Modulebene in den Block plugins {} ein:

   plugins {
       ...
       alias(libs.plugins.screenshot)
   }
   

2. Aktivieren Sie das experimentelle Attribut in der gradle.properties-Datei Ihres Projekts.

   android.experimental.enableScreenshotTest=true
   

3. Aktivieren Sie im Block android {} der Datei build.gradle.kts auf Modulebene das experimentelle Flag, um das screenshotTest-Quellset zu verwenden. kotlinCompilerExtensionVersion muss auf 1.5.4 oder höher festgelegt sein.

   android {
       ...
       composeOptions {
           kotlinCompilerExtensionVersion = "1.5.4"
       }
       experimentalProperties["android.experimental.enableScreenshotTest"] = true
   }
   

4. Achten Sie darauf, dass Sie die Abhängigkeit ui-tooling hinzugefügt haben.
   1. Fügen Sie sie Ihren Versionskatalogen hinzu:

      [libraries]
      androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
      

   2. Fügen Sie sie der Datei build.gradle.kts auf Modulebene hinzu:

      dependencies {
        screenshotTestImplementation(libs.androidx.compose.ui.tooling)
      }
      

Zusammensetzbare Vorschauelemente für Screenshot-Tests festlegen

Wenn Sie die zusammensetzbaren Vorschauen festlegen möchten, 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 dieser Datei oder anderen Dateien, die im selben Source-Set erstellt wurden, weitere Composeables 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 können Sie später Änderungen erkennen, nachdem Sie Codeänderungen vorgenommen haben. 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)

Nach Abschluss der Aufgabe finden Sie die Referenzbilder unter 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 aufzunehmen 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üfungsaufgabe wird ein HTML-Bericht unter {module}/build/reports/screenshotTest/preview/{variant}/index.html erstellt.

Bekannte Probleme

Eine aktuelle Liste der bekannten Probleme finden Sie in der Problem-Tracker-Komponente des Tools. Anderes Feedback und Probleme können Sie über den Issue Tracker melden.

Versionsupdates

Versionshinweise und Änderungen für laufende Versionen

0.0.1-alpha06

Diese Version enthält folgende Neuerungen:

Schwellenwert für Bildunterschiede: Mit dieser neuen globalen Schwellenwerteinstellung können Sie Screenshot-Vergleiche genauer steuern. Aktualisieren Sie zum Konfigurieren die build.gradle.kts Ihres Moduls:

android {
    ...
    testOptions {
        ...
        screenshotTests {
            imageDifferenceThreshold = 0.0001f // 0.01%
        }
    }
}

Dieser Grenzwert wird auf alle im Modul definierten Screenshot-Tests angewendet.

• Fehlerkorrekturen: Einige Fehler im Compose-Renderer wurden behoben und die Unterstützung für leere Compose-Elemente wurde hinzugefügt.
• Leistungsverbesserungen: Der Algorithmus für Bildvergleiche wurde aktualisiert, um schneller zu sein.