Testowanie zrzutu ekranu w podglądzie tworzenia

Testowanie zrzutów ekranu to skuteczny sposób sprawdzania, jak użytkownicy widzą interfejs użytkownika. Narzędzie do testowania zrzutu ekranu Compose Preview łączy w sobie prostotę i funkcje kompozycyjnego podglądu z zwiększyć produktywność dzięki testom zrzutów ekranu po stronie hosta. Podgląd tworzenia wiadomości Testowanie zrzutu ekranu zostało opracowane z myślą o łatwej obsłudze wersji przedpremierowej w wersji kompozycyjnej.

Test zrzutu ekranu to automatyczny test, który polega na wykonaniu zrzutu ekranu z elementu interfejsu a następnie porównuje go z zatwierdzonym wcześniej obrazem referencyjnym. Jeśli nie pasują do siebie, test kończy się niepowodzeniem i generuje raport HTML porównać i znaleźć różnice.

Narzędzie do testowania zrzutu ekranu Compose Preview pozwala:

• Określ liczbę istniejących lub nowych podglądów kompozycji, których chcesz używać i testów zrzutów ekranu.
• Wygeneruj obrazy referencyjne na podstawie tych podglądów kompozycyjnych.
• Wygenerować raport HTML, który wskaże zmiany w tych podglądach po wprowadzić zmiany w kodzie.
• Używaj parametrów @Preview, takich jak uiMode lub fontScale, oraz podglądu wielokrotnego aby pomóc w skalowaniu testów.
• Spersonalizuj testy za pomocą nowego zbioru źródłowego screenshotTest.

Wymagania

Aby skorzystać z testowania zrzutu ekranu w trybie tworzenia podglądu, musisz mieć:

• Android Gradle w wersji 8.5.0-beta01 lub nowszej.
• Kotlin w wersji 1.9.20 lub nowszej.

Konfiguracja

Aby włączyć to narzędzie, wykonaj następujące czynności:

1. Dodaj wersję wtyczki com.android.compose.screenshot 0.0.1-alpha01 do projektu.
1. Dodaj wtyczkę do pliku katalogów wersji:

   [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. W pliku build.gradle.kts na poziomie modułu dodaj wtyczkę do sekcji Blokada plugins {}:

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

2. Włącz w projekcie właściwość eksperymentalną gradle.properties.

   android.experimental.enableScreenshotTest=true
   

3. W bloku android {} na poziomie modułu build.gradle.kts, włącz flagę eksperymentalną, by używać parametru Ustawiono źródło screenshotTest i upewnij się, że kotlinCompilerExtensionVersion ma wersję 1.5.4 lub nowszą.

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

4. Pamiętaj, aby dodać ui-tooling zależności.
   1. Dodaj go do katalogów wersji:

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

   2. Dodaj go do pliku build.gradle.kts na poziomie modułu:

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

Wskaż podglądy kompozycyjne do wykorzystania w testach zrzutów ekranu

Aby wskazać podgląd kompozycyjny, którego chcesz używać w testach zrzutów ekranu, umieść w podglądzie w klasie testowej. Plik zajęć testowych musi znajdować się w nowym Na przykład zbiór źródeł screenshotTest app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt ({module}/src/screenshotTest/{kotlin|java}/com/your/package).

Więcej funkcji kompozycyjnych lub podglądów, w tym wielu podglądów, możesz dodać w ten plik lub inne pliki utworzone w tym samym zbiorze źródłowym.

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

Wygeneruj obrazy referencyjne

Po skonfigurowaniu zajęć testowych musisz wygenerować obrazy referencyjne dla każdej z nich podgląd. Te obrazy referencyjne posłużą do zidentyfikowania zmian później, po wprowadzić zmiany w kodzie. Aby generować obrazy referencyjne na potrzeby podglądu kompozycyjnego testów zrzutu ekranu, uruchom to zadanie Gradle:

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

Po ukończeniu zadania znajdź obrazy referencyjne w app/src/debug/screenshotTest/reference ({module}/src/{variant}/screenshotTest/reference).

Generowanie raportu z testu

Gdy obrazy referencyjne istnieją, uruchom zadanie weryfikacji, aby zrobić nowy zrzut ekranu. i porównaj go ze zdjęciem referencyjnym:

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

Zadanie weryfikacji utworzy raport HTML o adresie {module}/build/reports/screenshotTest/preview/{variant}/index.html

Znane problemy

Aktualną listę znanych problemów znajdziesz w Komponent Issue Tracker. Zgłoś inne opinie i problemy korzystając z narzędzia do śledzenia problemów.