Testowanie zrzutu ekranu to skuteczny sposób na sprawdzenie, jak interfejs wyświetla się z perspektywy użytkowników. Narzędzie do testowania zrzutu ekranu w podglądzie tworzenia wiadomości łączy w sobie prostotę i funkcje podglądów kompozycyjnych z większą produktywnością, jaką jest przeprowadzanie testów zrzutów ekranu po stronie hosta. Podgląd tworzenia wiadomości Testowanie zrzutu ekranu jest tak proste w użyciu, jak podglądy kompozycyjne.
Test zrzutu ekranu to automatyczny test, który polega na wykonaniu zrzutu ekranu przedstawiającego dany element interfejsu, a następnie porównaniu go z wcześniej zatwierdzonym obrazem referencyjnym. Jeśli obrazy nie pasują, test kończy się niepowodzeniem i generowany jest raport HTML, który ułatwia porównywanie i znajdowanie różnic.
Za pomocą narzędzia do testowania zrzutu ekranu w podglądzie tworzenia wiadomości możesz:
- Określ istniejące lub nowe podglądy kompozycyjne, których chcesz użyć do testowania zrzutów ekranu.
- Wygeneruj obrazy referencyjne na podstawie podglądu kompozycyjnego.
- Wygenerować raport HTML, który wskazuje zmiany w podglądzie po wprowadzeniu zmian w kodzie.
- Używaj parametrów
@Preview
, np.uiMode
lubfontScale
, oraz wielu podglądów, aby skuteczniej skalować testy. - Modyfikuj testy przy użyciu nowego zestawu źródeł
screenshotTest
.
Wymagania
Aby można było skorzystać ze zrzutu ekranu w podglądzie tworzenia wiadomości, potrzebne są:
- Android Gradle w wersji 8.5.0-beta01 lub nowszej.
- Kotlin w wersji 1.9.20 lub nowszej.
Skonfiguruj
Aby włączyć narzędzie, wykonaj następujące czynności:
- Dodaj do projektu wtyczkę
com.android.compose.screenshot
w wersji0.0.1-alpha01
. - 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ę w blokuplugins {}
:plugins { ... alias(libs.plugins.screenshot) }
- Włącz właściwość eksperymentalną w pliku
gradle.properties
projektu.android.experimental.enableScreenshotTest=true
- W bloku
android {}
plikubuild.gradle.kts
na poziomie modułu włącz flagę eksperymentalną, aby używała zbioru źródłowegoscreenshotTest
, i sprawdź, czykotlinCompilerExtensionVersion
ma wartość 1.5.4 lub nowszą.android { ... composeOptions { kotlinCompilerExtensionVersion = "1.5.4" } experimentalProperties["android.experimental.enableScreenshotTest"] = true }
- Sprawdź, czy masz dodaną zależność
ui-tooling
.- 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:
Wyznacz podglądy kompozycyjne do testowania zrzutów ekranu
Aby wyznaczyć podglądy kompozycyjne, których chcesz używać do testowania zrzutów ekranu, umieść podglądy w klasie testowej. Plik klasy testowej musi znajdować się w nowym zbiorze źródłowym screenshotTest
, na przykład app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt
({module}/src/screenshotTest/{kotlin|java}/com/your/package
).
Możesz dodać więcej funkcji kompozycyjnych lub podglądów, w tym wiele podglądów, do tego pliku lub innych plików utworzonych 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 klasy testowej musisz wygenerować obrazy referencyjne dla każdego podglądu. Obrazy referencyjne służą później do identyfikowania zmian, gdy wprowadzisz już zmiany w kodzie. Aby wygenerować obrazy referencyjne na potrzeby testów zrzutów ekranu kompozycyjnego, 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 app/src/debug/screenshotTest/reference
({module}/src/{variant}/screenshotTest/reference
).
Generowanie raportu testowego
Gdy obrazy referencyjne będą już dostępne, uruchom zadanie weryfikacji, aby zrobić 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 tworzy raport HTML pod adresem {module}/build/reports/screenshotTest/preview/{variant}/index.html
.
Znane problemy
- Jeśli podgląd w zestawie źródłowym
screenshotTest
ma pełną i jednoznaczną nazwę metody z podglądem w interfejsiemain
, w testach zamiast w teście zrzutu ekranu zostanie użyta w pełni główna nazwa metody.