CI | tarafından David Vávra | Tem, 2022

CI |  tarafından David Vávra |  Tem, 2022

Ekran görüntüsü testleri, Görünüm katmanınızı test etmenin en etkili yoludur. Ve Compose kullanıyorsanız, bunlara zaten sahipsiniz — @Preview-Android Studio için açıklamalı yöntemler. bunu bende gösterdim önceki makale nasıl bağlanacağını gösterdi Şovkase & Facebook’un ekran görüntüsü test kitaplığı. Ancak bu kitaplığın bir dezavantajı vardır – çalışması için enstrümantasyon (aygıt veya öykünücü) gerektirir. Bu, CI’deki kurulumu karmaşıklaştırır ve pullanmaya neden olur. Bu yazıda, bir CI kurulumu da dahil olmak üzere bir emülatör olmadan nasıl yapılandırılacağını göstereceğim.

Paparazziler

Bir öykünücü olmadan ekran görüntüsü testi, bir Paparazzi kitaplığı Square’den. Normal birim testlerinde (“test” klasörü) Android Görünümlerini ve Birleştirilebilirleri oluşturmak için Android Studio oluşturucuyu kullanırlar. Enstrümantasyona gerek yok (“androidTest” klasörü). Bu, ekran görüntüsü testlerinin bittiği anlamına gelir. saniye dakika yerine. En ucuz bulut tabanlı CI makinesini kullanabilirsiniz ve CI üzerinde Android emülatörü çalıştırarak baş ağrılarını ortadan kaldırır. Bu kitaplık yakın zamanda kararlı bir sürüm 1.0.0’a ulaştı.

Paparazzi’yi yerel olarak çalıştırmak istiyorsanız, şu iki Gradle görevini kullanmanız yeterlidir:

  • ./gradlew recordPaparazziDebug tüm ekran görüntülerini bir “anlık görüntüler” klasörüne yakalar
  • ./gradlew verifyPaparazziDebug “anlık görüntüler” klasöründeki ekran görüntülerinin eşleşip eşleşmediğini doğrular ve hangilerinin farklı olduğunu size bildirir

Showkase entegrasyonu

Bu kütüphaneyi zaten tanımlamıştım önceki makalem. Kısacası, tüm @Preview– açıklamalı yöntemler ve bunları ekran görüntüsü testi için kullanılabilir hale getirir. doğrudan içine atla benim örnek entegrasyonumtüm ayrıntılara ihtiyacınız varsa.

Bu sınıf, Showkase-Paparazzi entegrasyonunun ana kısmıdır:

TestParametreEnjektör

sınıf kullanıyor TestParametreEnjektör Google’dan kitaplık. Tek bir cihazdan birden fazla birim testi oluşturmaya izin verir. @Test ekran görüntüsü testi için harika bir yöntem. Bu örnek, her biri için bir ekran görüntüsü testi oluşturacaktır. @Preview– açıklamalı yöntem. Ve bir bonus olarak, karanlık mod ve 1.5 yazı tipi ölçeği için ekran görüntüleri! Bu, farklı yerel ayarlar, ekran boyutları, yönlendirme vb. ile kolayca genişletilebilir.

Açık ve koyu mod, 1 ve 1.5 yazı tipi ölçeği için örnek ekran görüntüleri

CI entegrasyonu

Her çekme isteğiyle ekran görüntülerini karşılaştırmak istiyorsunuz. PR’yi birleştirmeden önce bile regresyon hatalarını hızlı bir şekilde yakalayabilirsiniz. Ancak özellikler eklediğinizde veya değiştirdiğinizde, ekran görüntüsü değişiklikleri kasıtlı olabilir. Bu nedenle, CI entegrasyonum şu şekilde çalışır:

  • Ekran görüntülerini mevcut olanlarla karşılaştırır. Aynıysa, kontrol yeşildir.
  • Farklılarsa, farklı ekran görüntülerini PR şubesine göre farklı bir şubeye iter.
  • İki şubeyi karşılaştırmak için bir bağlantıyla PR’a bir yorum gönderir. GitHub, resimler arasındaki farkları gösterme konusunda oldukça iyi bir iş çıkarıyor.
  • Değişiklik kasıtlıysa, dalı tekrar PR dalı ile birleştirebilirsiniz. Değilse, regresyon hatasını düzeltmelisiniz.

GitHub Eylemleri

gerçekten sevdim GitHub Eylemleri CI: sorunsuz GitHub entegrasyonu, küçük projeler için ücretsiz, yeniden kullanabileceğiniz topluluk tarafından oluşturulmuş tonlarca Eylem. Benim örneğim Eylemler içindir, ancak ilke tüm CI’ler için aynıdır:

Kontrol et başarısız ekran görüntüsü testlerini işlemek için bash betiği. Ve bir bak örnek çekme isteği. Bu kontrol koştu sadece 2:43 dakika. Ve çoğu zaman uygulamayı oluşturmaya harcandı.

Ekran görüntüsü testlerinin başarısız olması durumunda PR yorumu

Özet

Showkase kütüphanesini Paparazzi kütüphanesi ile nasıl entegre edeceğinizi ve tüm Compose’larınız için ekran görüntüsü testlerini nasıl oluşturacağınızı gösterdim. @Preview-karanlık mod ve 1.5 yazı tipi ölçeği dahil açıklamalı yöntemler. Ekran görüntülerinde kasıtlı değişiklikleri birleştirmek için bir iş akışıyla Github Actions entegrasyonu örneğini gösterdim. Her şey Android öykünücüsüne ihtiyaç duymadan saniyeler içinde çalışır. Kontrol et GitHub deposu tüm detaylar için.

Bu hızlı ve kolay kurulumla ekran görüntüsü testinin, iş mantığının birim testleri kadar kullanışlı ve yaygın hale gelebileceğine inanıyorum.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.