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

Ekran görüntüsü testi, kullanıcı arayüzünüzün kullanıcılara 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. Oluşturma Önizlemesi ile Ekran Görüntüsü Testi, derlenebilir önizlemeler kadar kolay kullanılacak şekilde tasarlanmıştır.

Ekran görüntüsü testi, kullanıcı arayüzü parçasının ekran görüntüsünü alıp daha önce onaylanmış bir referans görüntüyle karşılaştıran otomatik bir testtir. 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:

  • Ekran görüntüsü testleri için kullanmak istediğiniz mevcut veya yeni bir dizi birleştirilebilir önizlemeyi belirleyin.
  • 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.
  • Testlerinizi ölçeklendirmenize yardımcı olması için uiMode veya fontScale gibi @Preview parametrelerini ve çoklu önizlemeleri kullanın.
  • Yeni screenshotTest kaynak kümesiyle testlerinizi modüler hale getirin.
Şekil 1. Örnek HTML raporu.

Şartlar

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 üzeri.

Kurulum

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

  1. Projenize com.android.compose.screenshot eklentisini (0.0.1-alpha07 sürümü) ekleyin.
    1. Eklentiyi sürüm katalogları dosyanıza ekleyin:
      [versions]
      agp = "8.5.0-beta01"
      kotlin = "1.9.20"
      ...
      screenshot = "0.0.1-alpha07"
      
      [plugins]
      ...
      screenshot = { id = "com.android.compose.screenshot", version.ref = "screenshot"}
      
    2. Modül düzeyindeki build.gradle.kts dosyanızda, eklentiyi plugins {} bloğuna ekleyin:
      plugins {
          ...
          alias(libs.plugins.screenshot)
      }
      
  2. Projenizin gradle.properties dosyasında deneysel özelliği etkinleştirin.
    android.experimental.enableScreenshotTest=true
    
  3. Modül düzeyindeki build.gradle.kts dosyanızın android {} bloğunda, screenshotTest kaynak kümesini kullanmak için deneysel işaretini etkinleştirin ve kotlinCompilerExtensionVersion değerinin 1.5.4 veya daha yeni bir sürüme ayarlandığından emin olun.
    android {
        ...
        composeOptions {
            kotlinCompilerExtensionVersion = "1.5.4"
        }
        experimentalProperties["android.experimental.enableScreenshotTest"] = true
    }
    
  4. ui-tooling bağımlılık eklediğinizden emin olun.
    1. Sürüm kataloglarınıza ekleyin:
      [libraries]
      androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
      
    2. 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 grubunda bulunmalıdır. Örneğin, app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt ({module}/src/screenshotTest/{kotlin|java}/com/your/package).

Bu dosyaya veya aynı kaynak kümesinde oluşturulan diğer dosyalara daha fazla kompozisyon ve/veya önizleme (çoklu önizlemeler dahil) ekleyebilirsiniz.

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 önizleme için referans resimler oluşturmanız gerekir. Bu referans resimler, kod değişiklikleri yaptıktan sonra değişiklikleri belirlemek için kullanılır. Birleştirilebilir önizleme ekran görüntüsü testleriniz için referans resimler oluşturmak üzere 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) bölümünde bulabilirsiniz.

Test raporu oluşturma

Referans resimler oluşturulduktan sonra, yeni bir ekran görüntüsü almak ve bunu referans resimle karşılaştırmak için doğrulama görevini çalış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, {module}/build/reports/screenshotTest/preview/{variant}/index.html adresinde bir HTML raporu oluşturur.

Bilinen sorunlar

Bilinen sorunların güncel listesini aracın Sorun Takip bileşeninde bulabilirsiniz. Diğer geri bildirimleri ve sorunları sorun izleyici üzerinden bildirebilirsiniz.

Yayın güncellemeleri

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

0.0.1-alpha06

Bu sürümde şunlar kullanıma sunulmuştur:

Resim farkı eşiği: Bu yeni genel eşik ayarı, ekran görüntüsü karşılaştırmaları üzerinde daha hassas kontrol sahibi olmanızı 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 uygulanı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