Ö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 ve 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 resimle 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:

  • Mevcut veya yeni derlenebilir önizlemeler için ekran görüntüsü testleri oluşturmak üzere @PreviewTest simgesini kullanın.
  • 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 eklentisi 8.5.0-beta01 veya sonraki sürümler.
  • Kotlin 1.9.20 veya üzeri. Compose Compiler Gradle eklentisini kullanabilmek için Kotlin 2.0 veya sonraki bir sürümü kullanmanızı öneririz.
  • Projeniz için Oluştur'un etkinleştirilmesi gerekir. Compose Derleyici Gradle eklentisini kullanarak Compose'u etkinleştirmenizi öneririz.

Kurulum

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

  1. Projenize com.android.compose.screenshot eklentisini (0.0.1-alpha10 sürümü) ekleyin.
    1. Eklentiyi sürüm katalogları dosyanıza ekleyin:
      [versions]
      agp = "8.11.0-alpha06"
      kotlin = "2.1.20"
      screenshot = "0.0.1-alpha10"
      
      [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.
    android {
        experimentalProperties["android.experimental.enableScreenshotTest"] = true
    }
    
  4. screenshot-validation-api ve ui-tooling bağımlılıkları ekleyin.
    1. Bunları sürüm kataloglarınıza ekleyin:
      [libraries]
      screenshot-validation-api = { group = "com.android.tools.screenshot", name = "screenshot-validation-api", version.ref = "screenshot"}
      androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
    2. Bunları modül düzeyindeki build.gradle.kts dosyanıza ekleyin:
      dependencies {
        screenshotTestImplementation(libs.screenshot.validation.api)
        screenshotTestImplementation(libs.androidx.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 @PreviewTest ek açıklamasıyla işaretleyin. Önizlemeler, yeni screenshotTest kaynak grubunda (ör. app/src/screenshotTest/kotlin/com/example/yourapp/ExamplePreviewScreenshotTest.kt) bulunmalıdır.

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

package com.example.yourapp

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.android.tools.screenshot.PreviewTest
import com.example.yourapp.ui.theme.MyApplicationTheme

@PreviewTest
@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 görseller, 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 görselleri app/src/screenshotTestDebug/reference ({module}/src/screenshotTest{Variant}/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 izleyici 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-alpha10

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

  • Bu sürümden itibaren tüm önizleme işlevlerinizi @PreviewTest ek açıklamasıyla işaretlemeniz gerekir. Ek açıklama içermeyen önizlemeler yürütülmez.

  • Referans resim dizini {module}/src/{variant}/screenshotTest/reference yerine {module}/src/screenshotTest{Variant}/reference olarak değiştirildi. Bunun nedeni, oluşturulan referans resimlerinin üretim kodunun bir parçası olmayacağından ve diğer test türlerinin dizin yapısına uygun olacağından emin olmaktır.

  • {variant}PreviewScreenshotRender görevi kaldırılır. Görüntü oluşturma işlemi JUnit Test Motoru'na taşındı.

  • update{Variant}ScreenshotTest görevi, güncellemeden önce yeni oluşturma resimlerini referans resimlerle karşılaştırır. Yalnızca belirtilen eşikten daha fazla farkı olan görseller güncellenir. --updateFilter komut satırı işareti kaldırıldı.

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