Testowanie zrzutu ekranu w podglądzie tworzenia

Testowanie zrzutów ekranu to skuteczny sposób na sprawdzenie, jak interfejs wygląda dla użytkowników. Narzędzie do testowania zrzutów ekranu w widoku tworzenia łączy w sobie prostotę i funkcje przewidywanych podglądów z możliwością zwiększenia produktywności dzięki testom zrzutów ekranu prowadzonym po stronie hosta. Testowanie podglądu w widoku tworzenia i zrzutów ekranu zostało zaprojektowane tak, aby było tak samo łatwe w użyciu jak składane podglądy.

Test zrzutu ekranu to automatyczny test, który wykonuje zrzut ekranu elementu interfejsu użytkownika, a następnie porównuje go z wcześniej zatwierdzonym obrazem referencyjnym. Jeśli obrazy się nie zgadzają, test się nie powiedzie i wygeneruje raport HTML, który pomoże Ci porównać obrazy i znaleźć różnice.

Za pomocą narzędzia do testowania zrzutów ekranu w ramach podglądu kompozycji możesz:

• Wybierz kilka istniejących lub nowych kompozycji podglądu, których chcesz użyć do testów zrzutów ekranu.
• na podstawie tych kompozycji generować obrazy referencyjne.
• wygenerować raport HTML, który wskazuje zmiany w tych podglądach po wprowadzeniu zmian w kodzie;
• Aby testy były bardziej elastyczne, używaj parametrów @Preview, takich jak uiMode lub fontScale, oraz podglądu wieloelementowego.
• Uporządkuj testy za pomocą nowego zestawu screenshotTest źródeł.

Wymagania

Aby korzystać z testowania zrzutów ekranu w ramach funkcji Compose Preview, musisz mieć:

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

Konfiguracja

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

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

   [versions]
   agp = "8.5.0-beta01"
   kotlin = "1.9.20"
   ...
   screenshot = "0.0.1-alpha07"
   
   [plugins]
   ...
   screenshot = { id = "com.android.compose.screenshot", version.ref = "screenshot"}
   

2. W pliku build.gradle.kts na poziomie modułu dodaj wtyczkę w bloku plugins {}:

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

2. Włącz tę właściwość eksperymentalną w pliku gradle.properties projektu.

   android.experimental.enableScreenshotTest=true
   

3. W bloku android {} w pliku build.gradle.kts na poziomie modułu włącz flagę eksperymentalną, aby używać zestawu źródeł screenshotTest. Upewnij się, że w pliku kotlinCompilerExtensionVersion ustawiona jest wersja 1.5.4 lub nowsza.

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

4. Sprawdź, czy dodano zależność ui-tooling.
   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)
      }
      

Wyznaczanie kompozycji do użycia w przypadku testów zrzutów ekranu

Aby wyznaczyć kompozycje podglądów, których chcesz używać do testów zrzutów ekranu, umieść te kompozycje w klasie testowej. Plik klasy testu musi znajdować się w nowym zestawie źródeł screenshotTest, np. app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt({module}/src/screenshotTest/{kotlin|java}/com/your/package).

Do tego pliku lub innych plików utworzonych w tym samym zbiorze źródeł możesz dodać więcej komponentów lub podglądów, w tym podglądów zbiorczych.

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

Generowanie obrazów referencyjnych

Po skonfigurowaniu klasy testowej musisz wygenerować obrazy referencyjne dla każdego podglądu. Te obrazy referencyjne służą do identyfikowania zmian po wprowadzeniu zmian w kodzie. Aby wygenerować obrazy referencyjne do testów zrzutów ekranu w ramach składanych podglądów, uruchom to zadanie Gradle:

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

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

Generowanie raportu testowego

Gdy obrazy odniesienia są już dostępne, uruchom zadanie weryfikacyjne, aby wykonać nowy zrzut ekranu i porównać go z obrazem odniesienia:

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

Zadanie weryfikacji tworzy raport HTML pod adresem {module}/build/reports/screenshotTest/preview/{variant}/index.html.

Znane problemy

Aktualną listę znanych problemów znajdziesz w komponencie Issue Tracker narzędzia. Pozostałe opinie i problemy możesz zgłaszać za pomocą śledzika problemów.

Aktualizacje wersji

Informacje o wersji i zmiany w bieżących wersjach

0.0.1-alpha06

Ta wersja zawiera:

Próg różnicy obrazów: to nowe ustawienie globalnego progu pozwoli Ci uzyskać większą kontrolę nad porównywaniem zrzutów ekranu. Aby skonfigurować, zaktualizuj plik build.gradle.kts modułu:

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

Ten próg zostanie zastosowany do wszystkich testów zrzutów ekranu zdefiniowanych w module.

• Poprawki błędów: naprawiono niektóre błędy modułu tworzenia wiadomości oraz dodano obsługę pustego tworzenia wiadomości.
• Ulepszenia dotyczące wydajności: algorytm porównywania obrazów został zaktualizowany, aby działał szybciej