Ö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 Önizleme Ekran Görüntüsü Testi aracı, oluşturulabilir önizlemelerin basitliği ve özelliklerini, ana makine tarafı ekran görüntüsü testleri çalıştırmanın verimlilik kazanımlarıyla birleştirir. Önizleme Oluşturma Ekran Görüntüsü Testi, oluşturulabilecek önizlemeler kadar kolay olacak ş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ü alıp daha önce onaylanmış bir referans görüntüyle karşılaştıran otomatik bir testtir. Resimler eşleşmezse test başarısız olur ve farkları karşılaştırıp bulmanıza yardımcı olacak bir HTML raporu oluşturur.

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

  • Ekran görüntüsü testleri için kullanmak istediğiniz mevcut veya yeni composable önizlemelerin sayısını belirleyin.
  • Oluşturulabilir bu önizlemelerden referans resimler oluşturabilir.
  • 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 parametreleri ve çoklu önizlemeler kullanın.
  • Testlerinizi yeni screenshotTest kaynak kümesiyle modüler hale getirin.
Şekil 1. Örnek HTML raporu.

Gereksinimler

Ekran Görüntüsü Oluşturma Testi'ni oluşturmak 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. com.android.compose.screenshot eklentisini projenize ekleyin (0.0.1-alpha01 sürümü).
    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 {} blokuna ekleyin: 
      plugins {
    ...
    alias(libs.plugins.screenshot)
}
  2. Projenizin gradle.properties dosyasında deneysel mülkü etkinleştirin. 
    android.experimental.enableScreenshotTest=true
  3. Modül düzeyindeki build.gradle.kts dosyanızın android {} bloğunda, screenshotTest kaynak grubunu kullanmak için deneysel işareti etkinleştirin ve kotlinCompilerExtensionVersion öğesinin 1.5.4 veya daha yüksek bir değere ayarlandığından emin olun. 
    android {
    ...
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.4"
    }
    experimentalProperties["android.experimental.enableScreenshotTest"] = true
}
  4. ui-tooling bağımlılığını 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. Bu içeriği 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 composable önizlemeler belirleme

Ekran görüntüsü testleri için kullanmak istediğiniz composable ö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 çoklu önizleme dahil daha fazla composable ve/veya önizleme 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 resimler oluşturma

Bir test sınıfı ayarladıktan sonra, her önizleme için referans görüntüler oluşturmanız gerekir. Bu referans görüntüler, daha sonra kod değişiklikleri yapmanızdan sonra değişiklikleri tanımlamak için kullanılır. Oluşturulabilir önizleme ekran görüntüsü testleriniz için referans görüntüler 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 şurada bulun: app/src/debug/screenshotTest/reference ({module}/src/{variant}/screenshotTest/reference).

Test raporu oluşturma

Referans görüntüler mevcut olduğunda 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

  • screenshotTest kaynak grubundaki bir önizleme, tam nitelikli yöntem adını main öğesindeki bir önizlemeyle paylaşırsa test için ekran görüntüsü testi yerine yanlış bir şekilde ana dizindeki yöntem kullanılır.