Ekran görüntüsü testi

Ekran görüntüsü testi, uygulamanızın kullanıcı arayüzünü doğrulamanın çok etkili bir yoludur. Ekran görüntüsü testleri Bileşen, Özellik ve Uygulama testlerinde bulunabilir.

Hem araçlı hem de yerel ekran görüntüsü testleri oluşturmak için üçüncü taraf araçları kullanabilirsiniz. Oluştur'u kullanırsanız resmi Önizleme Ekran Görüntüsü Oluşturma test aracını kullanabilirsiniz.

Tanım

Ekran görüntüsü testleri, kullanıcı arayüzünün ekran görüntüsünü alır ve "referans" veya "altın" adı verilen daha önce onaylanmış bir resimle karşılaştırır.

Ekran görüntüsü testinde, yeni bir ekran görüntüsü ve bir referans resmi olmak üzere iki resim karşılaştırılır.
Şekil 1. Ekran görüntüsü testi iki görüntüyü karşılaştırır

Resimler aynıysa test geçer. Aralarında farklılık varsa araç bir rapor oluşturur:

Her iki tarafta referans ve yeni ekran görüntüsünü, ortada ise farkı gösteren bir ekran görüntüsü testi raporu.
Şekil 2. İki tarafta da referansın ve yeni ekran görüntüsünün yanı sıra ortadaki farkı gösteren ekran görüntüsü test raporu.

Raporda verilebilecek iki olası yanıt vardır:

  • Yeni kodda bir hata olduğunu fark edip hatayı düzeltin.
  • Yeni ekran görüntüsünü onaylayın ve referans resmini yenisiyle değiştirin.

Başarısız bir test her zaman bir hata olduğu anlamına gelmediğinden ekran görüntüsü testleri normal testlerden farklı bir iş akışına sahiptir.

Avantajları

Ekran görüntüsü testlerinin avantajları:

  • Ekran görüntüsü testi, test başına birden fazla iddiada bulunur. Örneğin, tek bir testle renkleri, kenar boşluklarını, boyutları ve yazı tiplerini kontrol edebilirsiniz.
  • Ekran görüntüsü testinin yazılması, anlaşılması ve bakımı, eşdeğer bir davranış testine kıyasla çok daha kolaydır.
  • Özellikle farklı ekran boyutlarındaki gerilemelerin doğrulanması ve yakalanması için yararlıdır.

Dezavantajları

Ancak ekran görüntüsü testlerinin bazı dezavantajları da vardır:

  • Büyük bir projede binlerce PNG dosyası oluşabileceğinden, referans resimlerle çalışmak zor olabilir.
  • Farklı platformlar (Linux, Mac ve Windows) biraz farklı ekran görüntüleri oluşturur.
  • Eşdeğer davranış testlerinden daha yavaştır.
  • Çok sayıda ekran görüntüsü testi yapmak sorunlara neden olabilir. Örneğin, tek bir değişiklik binlerce ekran görüntüsünü etkilediğinde.

Aşağıdaki bölümlerde bu sorunların ele alınmasıyla ilgili öneriler verilmiştir.

Ekran görüntüsü testlerini en aza indirin

Geri bildirimi ve geriye dönük test kapsamını en üst düzeye çıkarırken ekran görüntüsü testlerinin sayısını en aza indirmeniz gerekir.

Farklı kullanıcı arayüzü durumlarının kombinasyonları, test sayısını çok hızlı bir şekilde artırabilir. Uygulamanızın kullanıcı arayüzünün bir bölümünü doğrulamanın bazı yolları aşağıda verilmiştir:

  • Farklı temalar
  • Farklı yazı tipi boyutları kullanma
  • Farklı ekran boyutları veya sınırları içinde

Bunu uygulamanızın her bileşeni, düzeni ve ekranı için yaparsanız binlerce ekran görüntüsü dosyası elde edersiniz. Bu dosyaların çoğu size ek geri bildirim sağlamaz.

Örneğin, açık ve koyu temalarla ve 3 yazı tipi boyutuyla özel bir düğmeyi test etmek istiyorsanız bunların kombinasyonlarını oluşturmanız gerekmez. Bunun yerine, temalardan yalnızca birini seçebilirsiniz. Bunun nedeni, düğmenin uzun kelimelere tepki verme şeklinin temayı etkilememesidir.

Bazı kullanıcı arayüzü özelliği kombinasyonlarını atlayabilirsiniz.
Şekil 3. Bazı kullanıcı arayüzü özelliği kombinasyonlarını çıkarabilirsiniz.

Mağaza referans resimleri

Referans (veya altın) resimler genellikle kaynak denetiminize kaydedilebilen PNG dosyalarıdır. Ancak Git ve çoğu kaynak kontrol yöneticisi büyük ikili program dosyaları için değil, metin dosyaları için optimize edilmiştir.

Bu dosyaları yönetmek için 3 seçeneğiniz vardır:

  • Git'i kullanmaya devam edin ancak depolama alanı kullanımını en aza indirmeye çalışın.
  • Git LFS'yi kullanın.
  • Ekran görüntülerini yönetmek için bir bulut hizmeti kullanın.

Platform farklılıkları

Ekran görüntüsü testleri, metin veya gölgeler gibi belirli özellikleri çizmek için düşük düzey platform API'lerini kullanır. Platformlar bu API'leri farklı şekillerde uygulayabilir. Mac'te geliştirme yapıyor ve yerel olarak çekilen yeni ekran görüntülerini kaydediyorsanız Linux CI makinesinde bozuk testler görebilirsiniz.

Sorunu gidermenin 2 yolu vardır:

  • Küçük değişikliklere tolerans gösterme
  • Sunucularda ekran görüntüsü alma

Küçük değişikliklere izin verin

Çoğu ekran görüntüsü test kitaplığını, iki ekran görüntüsünü karşılaştırırken küçük farklılıklara izin verecek şekilde yapılandırabilirsiniz.

Bu konuda iki yaklaşım vardır:

  • Değiştirilen piksellerin yüzdesine veya piksel değerlerindeki toplam farkın yüzdesine göre bir tolerans yapılandırın.
  • Piksel yerine yapısal ve anlamsal benzerliği doğrulamak için akıllı bir farklılaştırıcı (ekran görüntülerini karşılaştıran algoritma) kullanın.

Bu yaklaşımın dezavantajı, yanlış pozitif sonuçlar vermesi ve eşiğin altında olan veya yanlışlıkla yeterince benzer olduğu düşünülen hataları yakalamamasıdır.

Sunucularda ekran görüntüsü alma

Piksel mükemmel ekran görüntüsü karşılaştırıcısı kullanmak için testlerinizin aynı koşullarda ekran görüntüleri aldığından emin olmanız gerekir. Bunu yapmak için Sürekli Entegrasyon (CI) sisteminizi kullanabilir veya bir bulut hizmetini kullanabilirsiniz.

Örneğin, CI iş akışınızda aşağıdakileri yapan bir adım oluşturabilirsiniz:

  1. Ekran görüntüsü testlerini çalıştırır (yalnızca piksel mükemmelliği eşleme kullanılmadığında gereklidir).
  2. Önceki adım başarısız olursa yeni ekran görüntüleri kaydeder.
  3. Yeni dosyaları dallara gönderir.
Alternatif metin: CI'de ekran görüntüsü almanın gösterildiği şema
Şekil 4. CI'da ekran görüntüsü almayı gösteren şema

Bu yaklaşımı kullandığınızda ekran görüntüsü testleri CI'de hiçbir zaman başarısız olmaz ancak değişiklik sizin için değiştirilir. Böylece, siz ve değişiklik inceleme uzmanları değişikliği birleştirerek yeni ekran görüntülerini kabul edebilirsiniz.

Ekran görüntüsü test araçları

Ekran görüntüsü testi için mevcut araçlar ve kitaplıklar arasındaki temel farkları göz önünde bulundurun:

  • Ortam: Ana makinede çalıştırılan yerel testler veya emülatörde ya da cihazda çalıştırılan araçla testler.
  • Oluşturma motoru: Ana makine tarafı ekran görüntüsü çözümleri, Android Studio'nun önizlemeler için oluşturma motoru olan Layoutlib'i veya Robolectric Native Graphics'i (RNG) kullanabilir.
    • Layoutlib tabanlı çerçeveler, farklı davranışları göstermek için farklı durumlar kullanarak statik bileşenleri oluşturmaya odaklanır. Kullanımı genellikle daha kolaydır.
    • RNG ile entegre olan çerçeveler, Robolectric'teki tüm özellikleri kullanabilir. Bu sayede daha geniş kapsamlı testler yapabilirsiniz.