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. 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 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 jakuiMode
lubfontScale
, 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 te czynności:
- Dodaj wersję wtyczki
com.android.compose.screenshot
0.0.1-alpha01
do projektu. - 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"}
- W pliku
build.gradle.kts
na poziomie modułu dodaj wtyczkę do sekcji Blokadaplugins {}
:plugins { ... alias(libs.plugins.screenshot) }
- Włącz w projekcie właściwość eksperymentalną
gradle.properties
.android.experimental.enableScreenshotTest=true
- W bloku
android {}
na poziomie modułubuild.gradle.kts
, włącz flagę eksperymentalną, by używać parametru Ustawiono źródłoscreenshotTest
i upewnij się, żekotlinCompilerExtensionVersion
ma wersję 1.5.4 lub nowszą.android { ... composeOptions { kotlinCompilerExtensionVersion = "1.5.4" } experimentalProperties["android.experimental.enableScreenshotTest"] = true }
- Pamiętaj, aby dodać
ui-tooling
zależności.- Dodaj go do katalogów wersji:
[libraries] androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
- Dodaj go do pliku
build.gradle.kts
na poziomie modułu:dependencies { screenshotTestImplementation(libs.androidx.compose.ui.tooling) }
- Dodaj go do katalogów wersji:
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 będą już dostępne, uruchom zadanie weryfikacyjne, aby wykonać nowy zrzut ekranu i porównać go z obrazem 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.
Aktualizacje wersji
Informacje o wersjach i zmiany dotyczące bieżących wersji
0.0.1-alfa06
W tej wersji:
Próg różnicy obrazów: to nowe ustawienie globalnego progu pozwoli Ci uzyskać większą kontrolę nad porównywaniem zrzutów ekranu. Aby je skonfigurować, zaktualizuj Do modułu build.gradle.kts:
android {
...
testOptions {
...
screenshotTests {
imageDifferenceThreshold = 0.0001f // 0.01%
}
}
}
Będzie on stosowany we wszystkich testach zrzutów ekranu zdefiniowanych w module.
- Poprawki błędów: niektóre błędy mechanizmu renderowania Compose oraz obsługa pustego okna tworzenia wiadomości
- Większa wydajność: algorytm różnicowania obrazów został zaktualizowany, aby działał szybciej