Önizleme Ekran Görüntüsü Testi Oluşturma

Ekran görüntüsü testi, kullanıcı arayüzünüzün kullanıcılar tarafından nasıl göründüğünü doğrulamanın etkili bir yoludur. Oluşturma Önizlemesi Ekran Görüntüsü Testi aracı, oluşturulabilir önizlemelerin sadeliğini ve özelliklerini, barındırıcı tarafında ekran görüntüsü testleri çalıştırmanın üretkenlik kazanımlarıyla birleştirir. Önizleme Oluştur Ekran Görüntüsü Testi, composable önizlemeler kadar kolay kullanılacak şekilde tasarlanmıştır.

Ekran görüntüsü testi, bir kullanıcı arayüzü parçasının ekran görüntüsünü alan otomatik bir testtir ve bunu önceden onaylanmış bir referans resimle karşılaştırır. Görüntüler eşleşmezse test başarısız olur ve farklılıkları karşılaştırmanıza ve bulmanıza yardımcı olacak bir HTML raporu oluşturulur.

Oluşturma Önizlemesi Ekran Görüntüsü Testi aracıyla şunları yapabilirsiniz:

  • Kullanmak istediğiniz mevcut veya yeni composable önizlemeleri tanımlayın ekran görüntüsü testleri.
  • Bu derlenebilir önizlemelerden referans resimler oluşturun.
  • Kod değişiklikleri yaptıktan sonra bu önizlemelerde yapılan değişiklikleri tanımlayan bir HTML raporu oluşturun.
  • uiMode veya fontScale gibi @Preview parametrelerini ve çoklu önizlemeleri kullanın kullanabilirsiniz.
  • Yeni screenshotTest kaynak kümesiyle testlerinizi modüler hale getirin.
Şekil 1. Örnek HTML raporu.

Gereksinimler

Oluşturma Önizlemesi Ekran Görüntüsü Testi'ni kullanmak için aşağıdakilere ihtiyacınız vardır:

  • Android Gradle 8.5.0-beta01 veya sonraki sürümler.
  • Kotlin 1.9.20 veya sonraki sürümler.

Kurulum

Aracı etkinleştirmek için aşağıdaki adımları uygulayın:

  1. com.android.compose.screenshot eklentisi sürümünü ekleyin projenize 0.0.1-alpha01 ekleyin.
    1. Eklentiyi sürüm katalogları dosyanıza ekleyin: 
      [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. Modül düzeyindeki build.gradle.kts dosyanıza, eklentiyi plugins {} blok: 
      plugins {
    ...
    alias(libs.plugins.screenshot)
}
  2. Projenizin gradle.properties dosyası yükleyin. 
    android.experimental.enableScreenshotTest=true
  3. Modül seviyenizin android {} bloğunda build.gradle.kts dosyası varsa, screenshotTest kaynağının ayarlandığından ve kotlinCompilerExtensionVersion, 1.5.4 veya sonraki bir sürüme ayarlanmış. 
    android {
    ...
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.4"
    }
    experimentalProperties["android.experimental.enableScreenshotTest"] = true
}
  4. URL'nin sonuna ui-tooling desteklenmektedir.
    1. Sürümü kataloglarınıza ekleyin: 
      [libraries]
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
    2. Kodu modül düzeyindeki build.gradle.kts dosyanıza ekleyin: 
      dependencies {
  screenshotTestImplementation(libs.androidx.compose.ui.tooling)
}

Ekran görüntüsü testleri için kullanılacak birleştirilebilir önizlemeleri belirleme

Ekran görüntüsü testleri için kullanmak istediğiniz birleştirilebilir önizlemeleri belirlemek üzere önizlemeleri bir test sınıfına yerleştirin. Test sınıfı dosyası yeni screenshotTest kaynak grubu, örneğin app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt ({module}/src/screenshotTest/{kotlin|java}/com/your/package).

Çoklu önizlemeler de dahil olmak üzere daha fazla composable ve/veya önizleme ekleyebilirsiniz. bu dosyayı veya aynı kaynak kümesinde oluşturulmuş diğer dosyaları.

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!")
        }
    }
}

Referans resimleri oluşturma

Test sınıfı oluşturduktan sonra her bir sınıf için referans görüntüler oluşturmanız gerekir. önizle. Bu referans resimler, kod değişiklikleri yaptıktan sonra değişiklikleri belirlemek için kullanılır. composable önizlemeniz için referans görüntüler oluşturmak amacıyla ekran görüntüsü test etmek için aşağıdaki Gradle görevini çalıştırın:

  • Linux ve macOS: ./gradlew updateDebugScreenshotTest (./gradlew {:module:}update{Variant}ScreenshotTest)
  • Windows: gradlew updateDebugScreenshotTest (gradlew {:module:}update{Variant}ScreenshotTest)

Görev tamamlandıktan sonra referans resimleri app/src/debug/screenshotTest/reference ({module}/src/{variant}/screenshotTest/reference).

Test raporu oluşturma

Referans görüntüler oluşturulduktan sonra yeni ekran görüntüsü almak için doğrulama görevini çalıştırın ve bunu referans resimle karşılaştırın:

  • Linux ve macOS: ./gradlew validateDebugScreenshotTest (./gradlew {:module:}validate{Variant}ScreenshotTest)
  • Windows: gradlew validateDebugScreenshotTest (gradlew {:module:}validate{Variant}ScreenshotTest)

Doğrulama görevi, şu adreste bir HTML raporu oluşturur: {module}/build/reports/screenshotTest/preview/{variant}/index.html

Bilinen sorunlar

Bilinen sorunların güncel listesini aracın Sorun İzleyici bileşeni. Diğer geri bildirimleri ve sorunları bildirin sorun izleyici ile takip edebilirsiniz.

Yayın güncellemeleri

Devam eden sürümler için sürüm notları ve değişiklikler

0,0.1-alfa06

Bu sürümle birlikte:

Görüntü Farkı Eşiği: Bu yeni genel eşik ayarı, aşağıdakileri yapmanıza olanak sağlar: ekran görüntüsü karşılaştırmaları üzerinde daha hassas bir kontrol sağlar. Yapılandırmak için modülünüzün build.gradle.kts dosyasını güncelleyin:

android {
    ...
    testOptions {
        ...
        screenshotTests {
            imageDifferenceThreshold = 0.0001f // 0.01%
        }
    }
}

Bu eşik, modülde tanımlanan tüm ekran görüntüsü testlerine uygulanacaktır.

  • Hata Düzeltmeleri: Bazı Oluşturma Oluşturucusu hataları ve boş oluşturma için destek eklendi
  • Performans İyileştirmeleri: Resim karşılaştırma algoritması daha hızlı olacak şekilde güncellendi