Test dello screenshot di anteprima di Scrivi

Il test degli screenshot è un modo efficace per verificare l'aspetto della tua UI per gli utenti. Lo strumento di test dello screenshot di anteprima di Scrivi combina la semplicità e le funzionalità delle anteprime componibili con i miglioramenti in termini di produttività derivanti dall'esecuzione dei test degli screenshot lato host. Anteprima scrittura Il test degli screenshot è progettato per essere facile da usare quanto le anteprime componibili.

Un test con screenshot è un test automatico che acquisisce uno screenshot di una parte dell'interfaccia utente e lo confronta con un'immagine di riferimento approvata in precedenza. Se le immagini non corrispondono, il test non va a buon fine e genera un report HTML per aiutarti a confrontare e trovare le differenze.

Con lo strumento di test dello screenshot di anteprima di Scrivi, puoi:

• Identifica una serie di anteprime componibili esistenti o nuove che vuoi utilizzare per i test degli screenshot.
• Genera immagini di riferimento da quelle anteprime componibili.
• Genera un report HTML che identifichi le modifiche apportate a queste anteprime dopo aver apportato modifiche al codice.
• Utilizza i parametri @Preview, come uiMode o fontScale, e le anteprime multiple per scalare i test.
• Modula i tuoi test con il nuovo set di origini screenshotTest.

Requisiti

Per utilizzare il test dello screenshot di anteprima di Compose, è necessario quanto segue:

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

Configura

Per attivare lo strumento, procedi nel seguente modo:

1. Aggiungi il plug-in com.android.compose.screenshot, versione 0.0.1-alpha01 al tuo 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 file gradle.properties del tuo progetto.

   android.experimental.enableScreenshotTest=true
   

3. Nel blocco android {} del file build.gradle.kts a livello di modulo, abilita il flag sperimentale in modo che utilizzi il set di origine screenshotTest e assicurati che kotlinCompilerExtensionVersion sia impostato su 1.5.4 o versioni successive.

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

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

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

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

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

Specificare 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 set di origine screenshotTest, 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 le anteprime multiple, in questo file o in 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 configurato una classe di test, devi generare immagini di riferimento per ogni anteprima. Queste immagini di riferimento vengono utilizzate per identificare le modifiche in seguito, dopo aver apportato modifiche al codice. Per generare immagini di riferimento per i test degli screenshot dell'anteprima componibile, 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).

Generare un report di test

Una volta presenti le immagini di riferimento, esegui l'attività di convalida per acquisire un nuovo screenshot e confrontarlo 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

• Se un'anteprima nel set di origine screenshotTest condivide il nome completo del metodo con un'anteprima in main, quella principale viene utilizzata in modo errato per il test anziché per il test dello screenshot.