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à dell'esecuzione di test degli screenshot lato host. Crea 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.
  • Genera 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.
Figura 1. Esempio di report HTML.

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 {} del file build.gradle.kts a livello di modulo, attiva il flag sperimentale per utilizzare 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 ui-tooling della 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 seguito, 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 eventuali altri feedback e problemi tramite il tracker dei problemi.

Aggiornamenti delle release

Note di rilascio e modifiche per le versioni in corso

0.0.1-alpha06

Questa release introduce:

"Image Difference Soglia": la nuova impostazione della soglia globale consente di avere un controllo più preciso sui confronti di screenshot. Per configurare, aggiorna build.gradle.kts del modulo:

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

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

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