Pengujian Screenshot Pratinjau Compose

Pengujian screenshot adalah cara yang efektif untuk memverifikasi tampilan UI Anda bagi pengguna. Tujuan Alat Pengujian Screenshot Pratinjau Compose menggabungkan kemudahan dan fitur pratinjau composable dengan peningkatan produktivitas dengan menjalankan pengujian {i>screenshot<i} sisi {i>host<i}. Pratinjau Compose Pengujian Screenshot dirancang agar mudah digunakan seperti pratinjau composable.

Pengujian screenshot adalah pengujian otomatis yang mengambil screenshot dari UI kemudian membandingkannya dengan gambar referensi yang telah 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 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, seperti uiMode atau fontScale, dan multi-pratinjau untuk membantu meningkatkan skala pengujian Anda.
• Modularisasi pengujian Anda dengan set sumber screenshotTest yang 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:

1. Menambahkan plugin com.android.compose.screenshot, versi 0.0.1-alpha01 ke project Anda.
1. 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"}
   

2. Di file build.gradle.kts level modul, tambahkan plugin di bagian Blok plugins {}:

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

2. Mengaktifkan properti eksperimental di bagian File gradle.properties.

   android.experimental.enableScreenshotTest=true
   

3. Di blok android {} tingkat modul file build.gradle.kts, aktifkan tanda eksperimental untuk menggunakan screenshotTest ke set sumber dan pastikan bahwa kotlinCompilerExtensionVersion ditetapkan ke 1.5.4 atau yang lebih tinggi.

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

4. Pastikan Anda telah menambahkan ui-tooling dependensi.
   1. Tambahkan ke katalog versi Anda:

      [libraries]
      androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
      

   2. Tambahkan file tersebut ke file build.gradle.kts level modul:

      dependencies {
        screenshotTestImplementation(libs.androidx.compose.ui.tooling)
      }
      

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 perlu membuat gambar referensi untuk setiap pratinjau. Gambar referensi ini digunakan untuk mengidentifikasi perubahan di lain waktu, setelah Anda membuat perubahan kode. Guna membuat gambar referensi untuk pratinjau composable pengujian screenshot, 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)
• Jendela: 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.