Test dello screenshot di anteprima di Scrivi

Il test degli screenshot è un modo efficace per verificare l'aspetto della tua UI per gli utenti. La Lo strumento di test dello screenshot di anteprima combina la semplicità e le funzionalità di anteprime componibili con di produttività grazie all'esecuzione di test di screenshot lato host. Scrivi anteprima Il test degli screenshot è progettato per essere facile da usare quanto le anteprime componibili.

Un test degli screenshot è un test automatico che acquisisce uno screenshot di un'interfaccia utente e la confronta con un'immagine di riferimento approvata in precedenza. Se le immagini non corrispondono, il test non riesce e genera un report HTML che confrontare e trovare le differenze.

Con lo strumento di test dello screenshot di anteprima di Compose Preview, puoi:

• Identifica una serie di anteprime componibili nuove o esistenti da utilizzare per i test di screenshot.
• Generare immagini di riferimento da queste anteprime componibili.
• Genera un report HTML che identifica le modifiche apportate a queste anteprime dopo apportare modifiche al codice.
• Usa i parametri @Preview, come uiMode o fontScale, e più anteprime per aiutarti a scalare i test.
• Modularizza i test con il nuovo set di origini screenshotTest.

di Gemini Advanced.

Requisiti

Per utilizzare il test dello screenshot di anteprima di Compose Preview, occorre quanto segue:

• Android Gradle 8.5.0-beta01 o versioni successive.
• Kotlin 1.9.20 o versioni successive.

Configura

Per attivare lo strumento:

1. Aggiungi il plug-in com.android.compose.screenshot, versione 0.0.1-alpha01 al progetto.
1. Aggiungi il plug-in al file dei cataloghi delle versioni:

   [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. Nel file build.gradle.kts a livello di modulo, aggiungi il plug-in nel Blocco plugins {}:

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

2. Attiva la proprietà sperimentale nel tag gradle.properties.

   android.experimental.enableScreenshotTest=true
   

3. Nel blocco android {} della sezione a livello di modulo build.gradle.kts, attiva il flag sperimentale per utilizzare il screenshotTest set di origini e assicurati che kotlinCompilerExtensionVersion impostata su 1.5.4 o successiva.

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

4. Assicurati di aver aggiunto ui-tooling la dipendenza.
   1. Aggiungila ai tuoi cataloghi delle versioni:

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

   2. Aggiungila al file build.gradle.kts a livello di modulo:

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

Specifica le anteprime componibili da utilizzare per i test degli screenshot

Per designare le anteprime componibili da utilizzare per i test degli screenshot, posiziona le anteprime in una classe di test. Il file della classe di test deve trovarsi nel nuovo screenshotTest set di origini, ad esempio app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt ({module}/src/screenshotTest/{kotlin|java}/com/your/package).

Puoi aggiungere altri elementi componibili e/o anteprime, incluse più anteprime, in questo o altri file creati nello stesso set di origini.

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!")
        }
    }
}

Genera immagini di riferimento

Dopo aver impostato una classe di test, devi generare immagini di riferimento l'anteprima. Queste immagini di riferimento vengono utilizzate per identificare le modifiche in un secondo momento, dopo che apportare modifiche al codice. Generare immagini di riferimento per l'anteprima componibile screenshot, esegui la seguente attività Gradle:

• Linux e macOS: ./gradlew updateDebugScreenshotTest (./gradlew {:module:}update{Variant}ScreenshotTest)
• Windows: gradlew updateDebugScreenshotTest (gradlew {:module:}update{Variant}ScreenshotTest)

Al termine dell'attività, trova le immagini di riferimento in app/src/debug/screenshotTest/reference ({module}/src/{variant}/screenshotTest/reference).

Genera un report di prova

Una volta create le immagini di riferimento, esegui l'attività di convalida per acquisire un nuovo screenshot e confrontarla con l'immagine di riferimento:

• Linux e macOS: ./gradlew validateDebugScreenshotTest (./gradlew {:module:}validate{Variant}ScreenshotTest)
• Windows: gradlew validateDebugScreenshotTest (gradlew {:module:}validate{Variant}ScreenshotTest)

L'attività di verifica crea un report HTML all'indirizzo {module}/build/reports/screenshotTest/preview/{variant}/index.html.

Problemi noti

Puoi trovare l'elenco aggiornato dei problemi noti nello strumento Componente Issue Tracker. Segnala qualsiasi altro feedback e problema tramite Issue Tracker.