Pengujian screenshot adalah cara yang efektif untuk memverifikasi tampilan UI Anda bagi pengguna. Alat Pengujian Screenshot Pratinjau Compose menggabungkan kesederhanaan dan fitur pratinjau composable dengan peningkatan produktivitas dari menjalankan pengujian screenshot sisi host. Pratinjau Compose Pengujian Screenshot dirancang agar mudah digunakan seperti pratinjau composable.
Pengujian screenshot adalah pengujian otomatis yang mengambil screenshot bagian UI, lalu membandingkannya dengan gambar referensi yang disetujui sebelumnya. Jika gambar tidak cocok, pengujian gagal dan menghasilkan laporan HTML untuk membantu Anda bandingkan dan temukan perbedaannya.
Dengan alat Pengujian Screenshot Pratinjau Compose, Anda dapat:
- Identifikasi sejumlah pratinjau composable yang ada atau baru yang ingin Anda gunakan untuk pengujian screenshot.
- Buat gambar referensi dari pratinjau composable tersebut.
- Membuat laporan HTML yang mengidentifikasi perubahan pada pratinjau tersebut setelah Anda membuat perubahan kode.
- Gunakan parameter
@Preview
, sepertiuiMode
ataufontScale
, dan multi-pratinjau untuk membantu meningkatkan skala pengujian Anda. - Buat modular 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:
- Menambahkan plugin
com.android.compose.screenshot
, versi0.0.1-alpha01
ke project Anda. - Tambahkan plugin ke file katalog versi Anda:
[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"}
- Di file
build.gradle.kts
level modul, tambahkan plugin di bagian Blokplugins {}
:plugins { ... alias(libs.plugins.screenshot) }
- Mengaktifkan properti eksperimental di bagian
File
gradle.properties
.android.experimental.enableScreenshotTest=true
- Di blok
android {}
tingkat modul filebuild.gradle.kts
, aktifkan tanda eksperimental untuk menggunakanscreenshotTest
ke set sumber dan pastikan bahwakotlinCompilerExtensionVersion
ditetapkan ke 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 Anda:
[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 Anda:
Menetapkan pratinjau composable yang akan digunakan untuk pengujian screenshot
Untuk menetapkan pratinjau composable yang ingin digunakan untuk pengujian screenshot, tempatkan
pratinjau di class pengujian. File class pengujian harus berada di file baru
screenshotTest
set sumber, 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, di file ini atau file lain yang dibuat dalam {i>sourceset<i} 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 di lain waktu, setelah Anda membuat perubahan kode. Untuk membuat gambar referensi untuk pengujian screenshot pratinjau composable, jalankan tugas Gradle berikut:
- Linux dan macOS:
./gradlew updateDebugScreenshotTest
(./gradlew {:module:}update{Variant}ScreenshotTest
) - Jendela:
gradlew updateDebugScreenshotTest
(gradlew {:module:}update{Variant}ScreenshotTest
)
Setelah tugas selesai, temukan 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 membuat laporan HTML di
{module}/build/reports/screenshotTest/preview/{variant}/index.html
.
Masalah umum
Anda dapat menemukan daftar masalah umum saat ini di Komponen Issue Tracker. Melaporkan masukan dan masalah lainnya melalui Issue Tracker.
Update rilis
Catatan rilis dan perubahan untuk versi yang sedang berlangsung
0.0.1-alpha06
Rilis ini memperkenalkan:
Ambang Batas Perbedaan Gambar: Setelan ambang batas global yang baru ini memungkinkan Anda untuk mendapatkan kontrol yang lebih baik atas perbandingan screenshot. Untuk mengonfigurasi, perbarui build.gradle.kts modul:
android {
...
testOptions {
...
screenshotTests {
imageDifferenceThreshold = 0.0001f // 0.01%
}
}
}
Nilai minimum ini akan diterapkan ke semua pengujian screenshot yang ditentukan dalam modul.
- Perbaikan Bug: Beberapa bug Perender Compose dan dukungan tambahan untuk penulisan kosong
- Peningkatan Performa: Algoritme diffing gambar diperbarui agar lebih cepat