Ö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. Compose Preview Screenshot Testing aracı, birleştirilebilir önizlemelerin basitliğini ve özelliklerini, ana makine tarafında ekran görüntüsü testleri çalıştırmanın getirdiği üretkenlik avantajlarıyla birleştirir. Oluşturma Önizlemesi Ekran Görüntüsü Testi, oluşturulabilir ö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 ve ardından bunu daha önce onaylanmış bir referans resimle karşılaştıran otomatik bir testtir. Resimler eşleşmezse test başarısız olur ve farklılıkları karşılaştırıp bulmanıza yardımcı olacak bir HTML raporu oluşturulur.

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

Mevcut veya yeni composable önizlemeler için ekran görüntüsü testleri oluşturmak üzere @PreviewTest simgesini kullanın.
Bu birleştirilebilir önizlemelerden referans resimler oluşturun.
Kod değişiklikleri yaptıktan sonra bu önizlemelerde yapılan değişiklikleri belirleyen bir HTML raporu oluşturun.
Testlerinizi ölçeklendirmenize yardımcı olması için @Preview veya fontScale gibi @Preview parametrelerini ve çoklu önizlemeleri kullanın.uiMode
Yeni screenshotTest kaynak grubuyla testlerinizi modüler hale getirin.

IDE entegrasyonu

Temel Gradle görevlerini (updateScreenshotTest ve validateScreenshotTest) manuel olarak çalıştırarak Compose Preview Ekran Görüntüsü Testi aracını kullanabilirsiniz. Ancak Android Studio Otter 3 Yeni Özellikler Güncellemesi Canary 4, tam IDE entegrasyonu sunar. Bu sayede, referans resimler oluşturabilir, testler çalıştırabilir ve doğrulama hatalarını tamamen IDE içinde analiz edebilirsiniz. Temel özelliklerden bazıları şunlardır:

Düzenleyicideki oluk simgeleri. Artık doğrudan kaynak kodundan test çalıştırabilir veya referans resimleri güncelleyebilirsiniz. Yeşil çalıştırma simgeleri, @PreviewTest ile açıklama eklenmiş composable'ların ve sınıfların yanındaki olukta görünür.
- Ekran görüntüsü testleri yapın. Testleri özellikle tek bir işlev veya tüm sınıf için yürütün.
- Referans resim ekleyin veya güncelleyin. Güncelleme akışını özellikle seçili kapsam için tetikleyin.

Etkileşimli referans yönetimi. Referans görselleri güncellemek artık daha güvenli ve daha ayrıntılı.
- Yeni referans görsel oluşturma iletişim kutusu. Toplu Gradle görevi çalıştırmak yerine, yeni bir iletişim kutusu sayesinde hangi önizlemelerin oluşturulacağını veya güncelleneceğini tam olarak görselleştirip seçebilirsiniz.
- Varyasyonları önizleyin. İletişim kutusunda tüm önizleme varyasyonları (ör. açık tema veya koyu tema ya da farklı cihazlar) ayrı ayrı listelenir. Böylece, resim oluşturmadan önce belirli öğeleri seçebilir veya temizleyebilirsiniz.

Entegre test sonuçları ve fark görüntüleyici. IDE'den ayrılmadan sonuçları görüntüleyin.
- Birleştirilmiş çalıştırma paneli. Ekran görüntüsü testi sonuçları, standart Çalıştır araç penceresinde görünür. Testler, sınıf ve işlevlere göre gruplandırılır. Geçti veya kaldı durumu açıkça belirtilir.
- Görsel fark aracı. Bir test başarısız olduğunda Ekran görüntüsü sekmesinde Referans, Gerçek ve Fark resimlerini yan yana karşılaştırabilirsiniz.
- Ayrıntılı özellikler. Özellikler sekmesinde, eşleşme yüzdesi, resim boyutları ve kullanılan belirli önizleme yapılandırması (örneğin, uiMode veya fontScale) dahil olmak üzere başarısız testlerle ilgili meta veriler yer alır.

Esnek test kapsamı. Artık çeşitli kapsamlarla ekran görüntüsü testlerini doğrudan Proje Görünümü'nden yürütebilirsiniz. Belirli bir seçim için ekran görüntüsü testleri çalıştırmak üzere bir modülü, dizini, dosyayı veya sınıfı sağ tıklayın.

Şartlar

Tam IDE entegrasyonu aracılığıyla Compose Preview ekran görüntüsü testini kullanmak için projenizin aşağıdaki koşulları karşılaması gerekir:

Android Studio Panda 1 Canary 4 veya sonraki sürümler.
Android Gradle eklentisinin (AGP) 9.0 veya sonraki bir sürümü.
Compose Preview Screenshot Testing eklentisinin 0.0.1-alpha14 veya sonraki bir sürümü.
Kotlin 2.2.10 veya sonraki sürümler.
JDK 17 veya sonraki sürümler.
Projeniz için oluşturma etkinleştirilmiş olmalıdır. Compose Compiler Gradle eklentisini kullanarak Compose'u etkinleştirmenizi öneririz.

Yalnızca IDE entegrasyonu olmadan temel Gradle görevlerini kullanmak istiyorsanız:

Android Gradle eklentisinin (AGP) 8.5.0 veya sonraki bir sürümü.
Compose Preview Screenshot Testing eklentisinin 0.0.1-alpha14 veya sonraki bir sürümü.
Kotlin 1.9.20 veya sonraki bir sürüm. Compose Compiler Gradle eklentisini kullanabilmek için Kotlin 2.0 veya sonraki bir sürümü kullanmanızı öneririz.
JDK 17 veya sonraki sürümler.
Projeniz için oluşturma etkinleştirilmiş olmalıdır. Compose Compiler Gradle eklentisini kullanarak Compose'u etkinleştirmenizi öneririz.

Kurulum

Hem entegre araç hem de temel Gradle görevleri, Compose Preview Screenshot Testing eklentisini kullanır. Eklentiyi ayarlamak için aşağıdaki adımları uygulayın:

Projenizin gradle.properties dosyasında deneysel özelliği etkinleştirin.
```
android.experimental.enableScreenshotTest=true
```
Modül düzeyindeki build.gradle.kts dosyanızın android {} bloğunda, screenshotTest kaynak grubunu kullanmak için deneysel işareti etkinleştirin.
```
android {
    experimentalProperties["android.experimental.enableScreenshotTest"] = true
}
```

Projenize com.android.compose.screenshot eklentisini (0.0.1-alpha14 sürümü) ekleyin.

Eklentiyi sürüm katalogları dosyanıza ekleyin:

[versions]
agp = "9.0.0-rc03"
kotlin = "2.1.20"
screenshot = "0.0.1-alpha14"

[plugins]
screenshot = { id = "com.android.compose.screenshot", version.ref = "screenshot"}

Modül düzeyindeki build.gradle.kts dosyanızda, plugins {} bloğuna eklentiyi ekleyin:
```
plugins {
    alias(libs.plugins.screenshot)
}
```

screenshot-validation-api ve ui-tooling bağımlılıklarını ekleyin.

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

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ü testlerinde kullanılacak composable önizlemelerini belirleme

Ekran görüntüsü testlerinde kullanmak istediğiniz composable önizlemelerini belirtmek için önizlemeleri @PreviewTest ek açıklamasıyla işaretleyin. Önizlemeler, yeni screenshotTest kaynak grubunda bulunmalıdır. Örneğin:

app/src/screenshotTest/kotlin/com/example/yourapp/ ExamplePreviewScreenshotTest.kt

Bu dosyaya veya aynı kaynak grubunda oluşturulan diğer dosyalara çoklu önizlemeler de dahil olmak üzere daha fazla composable veya önizleme 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 resimler 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 istiyorsanız IDE entegrasyonu veya Gradle görevleriyle ilgili bu bölümdeki talimatları uygulayın.

IDE'de

Bir @PreviewTest işlevinin yanındaki oluk simgesini tıklayın ve Referans Resimleri Ekle/Güncelle'yi seçin. İletişim kutusunda önizlemeleri seçin ve Ekle'yi tıklayın.

Gradle görevleriyle

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/screenshotTestDebug/reference({module}/src/screenshotTest{Variant}/reference) içinde bulabilirsiniz.

Test raporu oluşturma

Referans resimler oluşturulduktan sonra IDE entegrasyonu veya Gradle görevleriyle ilgili bu bölümdeki talimatları uygulayarak bir test raporu oluşturun.

IDE'de

Bir @PreviewTest işlevinin yanındaki oluk simgesini tıklayın ve Run 'ScreenshotTests''i seçin.

Bir test başarısız olursa Çalıştır panelinde test adını tıklayın. Entegre yakınlaştırma ve kaydırma kontrollerini kullanarak resim farkını incelemek için Ekran görüntüsü sekmesini seçin.

Gradle görevleriyle

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

Kotlin Multiplatform (KMP): Hem IDE hem de temel alınan eklenti yalnızca Android projeleri için tasarlanmıştır. KMP projelerinde Android dışı hedefler desteklenmez.

Aracın sorun izleme bileşeninde bilinen sorunların tam listesini bulabilirsiniz. Diğer geri bildirim ve sorunları sorun izleyici üzerinden bildirin.

Yayın güncellemeleri

Sürüm güncellemelerinin tam listesi için sürüm notlarına bakın.

Önizleme Ekran Görüntüsü Testi Oluşturma Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

IDE entegrasyonu

Şartlar

Kurulum

Ekran görüntüsü testlerinde kullanılacak composable önizlemelerini belirleme

Referans resimler oluşturma

IDE'de

Gradle görevleriyle

Test raporu oluşturma

IDE'de

Gradle görevleriyle

Bilinen sorunlar

Yayın güncellemeleri

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