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 degli screenshot di anteprima di Compose combina la semplicità e le funzionalità delle anteprime componibili con i vantaggi in termini di produttività dei test degli screenshot lato host. Anteprima composizione Il test degli screenshot è progettato per essere facile da usare come le anteprime componibili.

Un test dello screenshot è un test automatizzato 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 riesce e viene generato un report HTML per aiutarti a confrontare e trovare le differenze.

Con lo strumento di test degli screenshot di anteprima della composizione, puoi:

  • Utilizza @PreviewTest per creare test degli screenshot per le anteprime di composable esistenti o nuove.
  • Genera immagini di riferimento da queste 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.
  • Modularizza i test con il nuovo set di origini screenshotTest.
Figura 1. Esempio di report HTML.

Requisiti

Per utilizzare il test degli screenshot di anteprima della composizione, devi disporre di quanto segue:

  • Plug-in Android per Gradle 8.5.0-beta01 o versioni successive.
  • Kotlin 1.9.20 o versioni successive. Ti consigliamo di utilizzare Kotlin 2.0 o versioni successive per poter utilizzare il plug-in Gradle del compilatore Compose.
  • JDK 23 o versioni precedenti. Questo strumento non è compatibile con JDK 24 o versioni successive a causa di una dipendenza da Java Security Manager, che è stato rimosso nelle versioni più recenti di JDK
  • Compose è abilitato per il tuo progetto. Ti consigliamo di abilitare Compose utilizzando il plug-in Gradle Compose Compiler.

Configura

Per attivare lo strumento:

  1. Aggiungi il plug-in com.android.compose.screenshot, versione 0.0.1-alpha10 al tuo progetto.
    1. Aggiungi il plug-in al file dei cataloghi delle versioni:
      [versions]
      agp = "8.11.0-alpha06"
      kotlin = "2.1.20"
      screenshot = "0.0.1-alpha10"
      
      [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. Abilita la proprietà sperimentale nel file gradle.properties del progetto.
    android.experimental.enableScreenshotTest=true
  3. Nel blocco android {} del file build.gradle.kts a livello di modulo, attiva il flag sperimentale per utilizzare il set di origini screenshotTest.
    android {
        experimentalProperties["android.experimental.enableScreenshotTest"] = true
    }
    
  4. Aggiungi le dipendenze screenshot-validation-api e ui-tooling.
    1. Aggiungili ai cataloghi delle versioni:
      [libraries]
      screenshot-validation-api = { group = "com.android.tools.screenshot", name = "screenshot-validation-api", version.ref = "screenshot"}
      androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
    2. Aggiungili al file build.gradle.kts a livello di modulo:
      dependencies {
        screenshotTestImplementation(libs.screenshot.validation.api)
        screenshotTestImplementation(libs.androidx.ui.tooling)
      }

Designare le anteprime componibili da utilizzare per i test degli screenshot

Per indicare le anteprime componibili che vuoi utilizzare per i test degli screenshot, contrassegna le anteprime con l'annotazione @PreviewTest. Le anteprime devono trovarsi nel nuovo set di origini screenshotTest, ad esempio app/src/screenshotTest/kotlin/com/example/yourapp/ExamplePreviewScreenshotTest.kt.

Puoi aggiungere altri composable e/o anteprime, incluse le anteprime multiple, in questo file o in altri file creati nello stesso set di origini.

package com.example.yourapp

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.android.tools.screenshot.PreviewTest
import com.example.yourapp.ui.theme.MyApplicationTheme

@PreviewTest
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyApplicationTheme {
        Greeting("Android!")
    }
}

Generare 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 un secondo momento, 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/screenshotTestDebug/reference ({module}/src/screenshotTest{Variant}/reference).

Generare un report di test

Una volta che le immagini di riferimento esistono, 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 in {module}/build/reports/screenshotTest/preview/{variant}/index.html.

Problemi noti

Puoi trovare l'elenco attuale dei problemi noti nel componente Issue Tracker dello strumento. Segnala eventuali altri feedback e problemi tramite lo strumento di monitoraggio dei problemi.

Aggiornamenti delle versioni

Note di rilascio e modifiche per le versioni in corso.

0.0.1-alpha10

Questa release introduce:

  • A partire da questa versione, devi contrassegnare tutte le funzioni di anteprima con l'annotazione @PreviewTest. Le anteprime senza l'annotazione non verranno eseguite.

  • La directory delle immagini di riferimento è stata modificata da {module}/src/{variant}/screenshotTest/reference a {module}/src/screenshotTest{Variant}/reference. In questo modo, le immagini di riferimento generate non faranno parte del codice di produzione e saranno allineate alla struttura delle directory di altri tipi di test.

  • L'attività {variant}PreviewScreenshotRender viene rimossa. Il rendering delle immagini viene migrato nel motore di test JUnit.

  • L'attività update{Variant}ScreenshotTest confronta le nuove immagini di rendering con le immagini di riferimento prima dell'aggiornamento. Aggiornerà solo le immagini che presentano differenze superiori a una soglia specificata. Il flag --updateFilter della riga di comando è stato rimosso.

0.0.1-alpha06

Questa release introduce:

Soglia di differenza immagine: questa nuova impostazione della soglia globale ti consentirà di avere un controllo più preciso sui confronti degli screenshot. Per configurare, aggiorna il file build.gradle.kts del modulo:

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

Questa soglia verrà applicata a tutti i test degli screenshot definiti nel modulo.

  • Correzioni di bug: alcuni bug del renderer di Compose e aggiunta del supporto per la composizione vuota
  • Miglioramenti delle prestazioni: l'algoritmo di confronto delle immagini è stato aggiornato per essere più veloce