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. Die Das Tool zum Erstellen der Vorschau für den Screenshot-Test vereint die Einfachheit und Funktionen von zusammensetzbaren Vorschauen mit dem Produktivitätssteigerung bei der Ausführung 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, um die Unterschiede zu finden.

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.
• Generieren Sie Referenzbilder aus diesen zusammensetzbaren Vorschauen.
• Erstellen Sie einen HTML-Bericht, in dem die Änderungen an der Vorschau aufgeführt sind, Ä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.

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 android {}-Block 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.

   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 befinden, 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. Anhand dieser Referenzbilder können Sie später Änderungen erkennen, nachdem Sie Codeänderungen vorgenommen haben. 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 mit dem Referenzbild vergleichen:

• 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: 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:

Grenzwert für Bilddifferenz: Mit dieser neuen Einstellung für den globalen Grenzwert können Sie Screenshot-Vergleiche genauer steuern. Zum Konfigurieren aktualisieren Sie Ihr build.gradle.kts des Moduls:

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

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

• Fehlerkorrekturen: Einige Fehler im Editor-Renderer sowie zusätzliche Unterstützung für leeres Schreiben
• Leistungsverbesserungen: Der Bilddifferenz-Algorithmus wurde aktualisiert, um schneller zu sein.