Pengujian screenshot adalah cara yang efektif untuk memverifikasi tampilan UI Anda bagi pengguna. Alat Pengujian Screenshot Pratinjau Compose menggabungkan kemudahan dan fitur pratinjau composable dengan peningkatan produktivitas dengan menjalankan pengujian screenshot sisi host. Pengujian Screenshot Pratinjau Compose dirancang agar mudah digunakan seperti pratinjau composable.
Pengujian screenshot adalah pengujian otomatis yang mengambil screenshot bagian UI, lalu membandingkannya dengan gambar referensi yang telah disetujui sebelumnya. Jika gambar tidak cocok, pengujian akan gagal dan menghasilkan laporan HTML untuk membantu Anda membandingkan dan menemukan perbedaannya.
Dengan alat Pengujian Screenshot Pratinjau Compose, Anda dapat:
- Identifikasi sejumlah pratinjau composable yang sudah ada atau baru yang ingin Anda gunakan untuk pengujian screenshot.
- Membuat gambar referensi dari pratinjau composable tersebut.
- Buat laporan HTML yang mengidentifikasi perubahan pada pratinjau tersebut setelah Anda membuat perubahan kode.
- Gunakan parameter
@Preview
, sepertiuiMode
ataufontScale
, dan multi-pratinjau untuk membantu Anda menskalakan pengujian. - Modularisasi pengujian Anda dengan set sumber
screenshotTest
baru.
Persyaratan
Untuk menggunakan Pengujian Screenshot Pratinjau Compose, Anda memerlukan hal berikut:
- Android Gradle 8.5.0-beta01 atau yang lebih tinggi.
- Kotlin 1.9.20 atau yang lebih tinggi.
Penyiapan
Untuk mengaktifkan alat ini, ikuti langkah-langkah berikut:
- Tambahkan plugin
com.android.compose.screenshot
, versi0.0.1-alpha01
ke project Anda. - Tambahkan plugin ke file katalog versi:
[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"}
- Dalam file
build.gradle.kts
level modul, tambahkan plugin dalam blokplugins {}
:plugins { ... alias(libs.plugins.screenshot) }
- Aktifkan properti eksperimental di file
gradle.properties
project Anda.android.experimental.enableScreenshotTest=true
- Dalam blok
android {}
filebuild.gradle.kts
level modul, aktifkan tanda eksperimental untuk menggunakan set sumberscreenshotTest
dan pastikankotlinCompilerExtensionVersion
ditetapkan ke versi 1.5.4 atau yang lebih tinggi.android { ... composeOptions { kotlinCompilerExtensionVersion = "1.5.4" } experimentalProperties["android.experimental.enableScreenshotTest"] = true }
- Pastikan Anda telah menambahkan dependensi
ui-tooling
.- Tambahkan ke katalog versi:
[libraries] androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
- Tambahkan ke file
build.gradle.kts
level modul:dependencies { screenshotTestImplementation(libs.androidx.compose.ui.tooling) }
- Tambahkan ke katalog versi:
Menetapkan pratinjau composable yang akan digunakan untuk pengujian screenshot
Untuk menentukan pratinjau composable yang ingin Anda gunakan untuk pengujian screenshot, tempatkan
pratinjau di class pengujian. File class pengujian harus ditempatkan di set sumber
screenshotTest
baru, misalnya
app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt
({module}/src/screenshotTest/{kotlin|java}/com/your/package
).
Anda dapat menambahkan lebih banyak composable dan/atau pratinjau, termasuk multi-pratinjau, dalam file ini atau file lain yang dibuat dalam set sumber yang sama.
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!")
}
}
}
Membuat gambar referensi
Setelah menyiapkan class pengujian, Anda harus membuat gambar referensi untuk setiap pratinjau. Gambar referensi ini digunakan untuk mengidentifikasi perubahan nanti, setelah Anda membuat perubahan kode. Guna membuat gambar referensi untuk pengujian screenshot pratinjau composable, jalankan tugas Gradle berikut:
- Linux dan macOS:
./gradlew updateDebugScreenshotTest
(./gradlew {:module:}update{Variant}ScreenshotTest
) - Windows:
gradlew updateDebugScreenshotTest
(gradlew {:module:}update{Variant}ScreenshotTest
)
Setelah tugas selesai, cari gambar referensi di
app/src/debug/screenshotTest/reference
({module}/src/{variant}/screenshotTest/reference
).
Membuat laporan pengujian
Setelah gambar referensi ada, jalankan tugas validasi untuk mengambil screenshot baru dan bandingkan dengan gambar referensi:
- Linux dan macOS:
./gradlew validateDebugScreenshotTest
(./gradlew {:module:}validate{Variant}ScreenshotTest
) - Windows:
gradlew validateDebugScreenshotTest
(gradlew {:module:}validate{Variant}ScreenshotTest
)
Tugas verifikasi akan membuat laporan HTML di {module}/build/reports/screenshotTest/preview/{variant}/index.html
.
Masalah umum
- Jika pratinjau dalam set sumber
screenshotTest
memiliki nama metode yang sepenuhnya memenuhi syarat dengan pratinjau dimain
, metode yang utama akan salah digunakan untuk pengujian, bukan pengujian screenshot.