Appium Kullanarak Görsel Regresyon Testine Başlarken
Yayınlanan: 2023-09-17Günümüzün yazılımı, birden fazla platform ve cihazda kusursuz bir kullanıcı deneyimi talep ediyor. Bu alandaki en zorlu yönlerden biri uygulamanızın görsel bütünlüğünü korumaktır. İşte bu noktada görsel regresyon testi (VRT) devreye giriyor ve normalde fark edilmeyecek görsel hataları ve tutarsızlıkları yakalamanın kolay bir yolunu sunuyor. VRT'ye başlamak isteyenler için Appium, bu tür testleri geniş bir platform yelpazesinde otomatikleştirmek için sağlam, ölçeklenebilir bir çerçeve sunuyor.
ÜstelikLambdaTest gibi hizmetler, görsel regresyon testi için yapay zeka destekli bir test orkestrasyonu ve test yürütme çözümü sunarak ekiplerin kendi test altyapılarını kurup yönetme ihtiyacını ortadan kaldırıyor.Bu bulut yaklaşımı, çeşitli gerçek tarayıcılara ve cihazlara isteğe bağlı erişim sağlayarak birden fazla ortamda eş zamanlı test yapılmasına olanak tanır, test yürütme süresini azaltır ve web uygulaması görünümünde ve işlevselliğinde tutarlılık sağlar. LambdaTest ayrıca hızlı sorun tespiti ve çözümü için ayrıntılı test raporları ve popüler test çerçeveleriyle entegrasyon sunar.
Bu makalede, test stratejinizi bir sonraki seviyeye yükseltebilmeniz için Appium kullanarak VRT'yi kullanmaya başlamanın temellerini inceleyeceğiz.
Görsel Regresyon Testi Nedir?
Görsel regresyon testi, bir uygulamada yapılan değişikliklerin, uygulamanın kullanıcı arayüzünün (UI) görsel sunumu üzerinde olumsuz etkilere sahip olmadığından emin olmak için kullanılan bir doğrulama tekniğidir. Birincil hedefi, düzen ve görsel öğelerin önceden tanımlanmış beklentilere uygunluğunu doğrulamak ve böylece kusursuz bir görsel kullanıcı deneyimini garanti etmektir. Bu görsel kontroller; düğmelerin, menülerin, bileşenlerin, metnin ve daha fazlasının konumu, parlaklığı, kontrastı ve rengi gibi çeşitli özellikleri kapsar. Bu yönteme bazen görsel test veya kullanıcı arayüzü testi de denir.
Görsel Regresyon Testleri Nasıl Çalışır?
Temel olarak görsel regresyon testi, değişiklik öncesinde kullanıcı arayüzünün anlık görüntülerini yakalayarak ve bunları daha sonra alınan ekran görüntüleri ile karşılaştırarak çalışır. Daha sonra herhangi bir eşitsizlik bir test mühendisi tarafından incelenmek üzere vurgulanır. Pratikte görsel regresyon testini yürütmek için çeşitli teknikler vardır. En çok kullanılanlardan bazıları aşağıda sizin için listelenmiştir:
Manuel Görsel Test
Bu yöntem, özel araçlar kullanılmadan kullanıcı arayüzünün manuel olarak incelenmesini içerir. Tasarımcılar ve geliştiriciler, her sürüm sırasında sayfaları görsel olarak incelemeye ve görsel kusurları aktif olarak aramaya zaman ayırırlar. Bu yaklaşım, uygulamanın tamamına uygulandığında zahmetli ve insan hatasına açık olsa da, özellikle geliştirmenin ilk aşamalarında, geçici veya keşif amaçlı kullanıcı arayüzü testleri için faydalıdır.
Piksel Piksel Karşılaştırması
Bu teknik, iki ekran görüntüsünü piksel düzeyinde inceleyerek test mühendisini herhangi bir tutarsızlık konusunda uyarır. Piksel farkları olarak da bilinen piksel karşılaştırması, tüm olası sorunları tanımlayabilir ancak aynı zamanda insan gözünün algılayamayacağı ve kullanılabilirliği etkilemeyen pek çok önemsiz farklılığı da işaretleyebilir (örneğin, oluşturma varyasyonları, kenar yumuşatma veya dolgu/kenar boşluğu farklılıkları) ). Test mühendisi, her test çalışmasında bu "yanlış pozitifleri" titizlikle gözden geçirmelidir.
DOM Tabanlı Karşılaştırma
Bu karşılaştırma yöntemi, bir durum değişikliği öncesi ve sonrasında Belge Nesne Modelinin (DOM) analiz edilmesine ve farklılıkların belirlenmesine dayanır. DOM içindeki kodla ilgili değişiklikleri vurgulamada etkili olsa da gerçek bir görsel karşılaştırma sağlamaz. Kod değişmeden kaldığında ancak kullanıcı arayüzü geliştiğinde (örn. dinamik içerik veya gömülü içerik) veya kod değiştiğinde ancak kullanıcı arayüzü statik kaldığında sıklıkla yanlış negatifler veya pozitifler üretir. Sonuç olarak, test sonuçları tutarsız olabilir ve görsel kusurların gözden kaçırılmaması için dikkatli bir inceleme gerektirebilir.
Görsel Yapay Zeka Karşılaştırması
Visual AI kullanan görsel regresyon testi, kullanıcı arayüzünü insanlara benzer bir şekilde algılamak için bilgisayar görüşünü kullanır. İyi eğitilmiş bir yapay zeka, yalnızca bir insan gözlemcinin fark edeceği farklılıkları işaretleyerek test mühendislerine yardımcı olabilir ve piksel ve DOM karşılaştırma testlerinde yaygın olan "yanlış pozitif" sorunları ele alma gibi zahmetli bir görevi ortadan kaldırabilir. Ayrıca Visual AI, dinamik içeriği değerlendirebilir ve yalnızca beklenmedik alan veya bölgelerdeki sorunları tanımlayabilir.
Görsel Regresyon Testi Yapmanın Nedenleri
Bu bölümde uygulamanızda görsel regresyon testi gerçekleştirmenin en sağlam nedenleri açıklanmaktadır. Öyleyse okumaya devam edin….
Görsel Tutarlılığın Sağlanması
Görsel regresyon testi, mobil uygulamanızın kullanıcı arayüzünün ve görsel öğelerinin farklı sürümler, cihazlar ve platformlar arasında tutarlı kalmasını sağlamaya yardımcı olur. Bu tutarlılık, kusursuz bir kullanıcı deneyimi sağlamak açısından önemlidir.
Tasarım Değişikliklerini Doğrulama
Uygulamada tasarım değişiklikleri yapıldığında görsel regresyon testi, bu değişikliklerin doğru şekilde uygulanıp uygulanmadığını ve istenmeyen görsel sorunlara yol açıp açmadığını doğrulayabilir.
Daha Hızlı Geri Bildirim Döngüsü
Görsel regresyon testleri, geliştiricilere ve tasarımcılara hızlı geri bildirim sağlayarak sorunları geliştirme döngüsünün erken aşamalarında ele almalarına olanak tanır. Bu, kritik görsel kusurların üretime ulaşma olasılığını azaltır.
Geliştirilmiş Kullanıcı Deneyimi
Görsel hatalar ve tutarsızlıklar kullanıcı deneyimini olumsuz yönde etkileyebilir ve uygulamanın itibarını zedeleyebilir. Bu sorunları görsel regresyon testiyle tespit ederek kullanıcı memnuniyetini artırabilirsiniz.
Kullanıcı Arayüzü Kitaplıkları İçin Regresyon Testi
Uygulamanız üçüncü taraf kullanıcı arayüzü kitaplıkları veya çerçeveleri kullanıyorsa görsel regresyon testi, bu kitaplıklarda yapılan güncellemelerin istenmeyen görsel değişikliklere yol açmamasını sağlamaya yardımcı olur.
Appium Kullanarak Görsel Regresyon Testine Başlamak İçin Adımlar
Appium kullanılarak yapılan görsel regresyon testi, uygulamanın farklı sürümleri arasındaki istenmeyen görsel değişiklikleri tespit etmek için bir uygulamanın kullanıcı arayüzünün görsel öğelerinin karşılaştırılmasını içerir. Appium'u kullanarak görsel regresyon testine başlama adımları şunlardır:
1. Adım: Appium ve Test Ortamını Kurun
Öncelikle sisteminizde Appium'un kurulu ve kurulu olduğundan emin olun. Ayrıca tercih ettiğiniz programlama dili (örn. Java, Python) için Appium istemci kitaplığına da ihtiyacınız olacak. Ayrıca test ortamınız için gerekli tüm bağımlılıkları ve araçları yükleyin.
2. Adım: Test Görüntülerini Hazırlayın
Görsel regresyon testini gerçekleştirmeden önce, uygulamanızın ekranlarının beklenen görünümünü temsil eden bir dizi temel görsele ihtiyacınız vardır. Uygulamanızı çeşitli cihazlarda/emülatörlerde çalıştırarak ve her ekranın ekran görüntülerini alarak bu temel görüntüleri yakalayın. Bu görüntüleri projenizde belirlenmiş bir klasörde saklayın.
3. Adım: Test Komut Dosyalarını Uygulama
Ekran görüntüleri yakalama ve görsel karşılaştırmalar yapma sürecini otomatikleştirmek için Appium istemci kitaplığını kullanarak test komut dosyaları yazın. Test komut dosyalarınız aşağıdakileri yapmalıdır:
- Uygulamayı belirli bir cihazda/emülatörde başlatmak için Appium sürücüsünü başlatın.
- Kullanıcı arayüzü değişikliklerini tetikleyen eylemleri gerçekleştirerek uygulamanın ekranlarında gezinin.
- Appium'un ekran görüntüsü işlevini kullanarak ekran görüntüleri yakalayın.
- Yakalanan ekran görüntülerini karşılaştırma için ayrı bir klasöre kaydedin.
Aşağıda, Appium Java istemcisi kullanılarak kodun Java'da nasıl görünebileceğine dair bir örnek verilmiştir:
```java
io.appium.java_client.AppiumDriver'ı içe aktarın;
io.appium.java_client.MobileElement'i içe aktarın;
io.appium.java_client.android.AndroidDriver'ı içe aktarın;
org.openqa.selenium.remote.DesiredCapaability'leri içe aktarın;
Java.net.URL'yi içe aktarın;
genel sınıf VisualRegressionTest {
public static void main(String[] args) İstisna {'i atar
// Appium sürücüsü için istenen yetenekleri ayarlayın
İstenilen Yetenekler büyük sınırları = yeni İstenilen Yetenekler();
caps.setCapability("platformAdı", "Android");
caps.setCapability("cihazAdı", "emulator-5554");
caps.setCapability("appPackage", "your.app.package");
caps.setCapability("appActivity", "your.app.activity");
// Appium sürücüsünü başlatıyoruz
AppiumDriver<MobileElement> sürücüsü = yeni AndroidDriver<>(yeni URL("https://localhost:4723/wd/hub"), caps);
// Eylemleri gerçekleştirin ve ekran görüntüleri yakalayın
// ...
// Karşılaştırma için ekran görüntülerini kaydedin
// ..
//Sürücüyü kapat
sürücü.quit();
}
}
''''
Adım 4: Görsel Karşılaştırma Mantığını Uygulama
Görsel regresyon testi için, yakalanan ekran görüntülerini temel görüntülerle karşılaştıracak bir mekanizmaya ihtiyacınız vardır. Piksel piksel karşılaştırmalar yapmak ve görsel farklılıkları hesaplamak için "Resemble.js" veya "Pixelmatch" gibi görsel karşılaştırma kütüphanelerini kullanabilirsiniz.
Adım 5: İddia ve Raporlama
Test komut dosyalarınızda, görsel karşılaştırmanın sonuçlarına dayalı iddiaları uygulayın. Görsel farklılıklar belirli bir eşiği aşarsa testi başarısız olarak değerlendirin. Tespit edilen görsel farklılıklar da dahil olmak üzere test sonuçlarını detaylandıran raporlar oluşturun.
Adım 6: Sürekli Entegrasyon (CI)
Kod değişiklikleri veya yeni sürümler olduğunda otomatik olarak çalıştıklarından emin olmak için görsel regresyon testlerinizi CI/CD ardışık düzeninize entegre edin. Bu, görsel gerilemelerin geliştirme sürecinin erken aşamalarında yakalanmasına yardımcı olur.
Adım 7: Temel Görüntüleri Koruyun
Uygulamanız geliştikçe, temel görsellerinizi beklenen yeni görünüme uyacak şekilde güncellemeniz gerekecektir. Bu, meşru kullanıcı arayüzü değişikliklerinin gerilemelerle karıştırılmamasını sağlar.
Kullanıcılar LambdaTest'te Appium Kullanarak VRT'yi Nasıl Gerçekleştirebilir?
Kullanıcıların LambdaTest'te Appium'u kullanarak görsel regresyon testini nasıl gerçekleştirebileceği aşağıda açıklanmıştır:
LambdaTest Hesabını Kurun
Başlamak için, henüz bir hesabınız yoksa LambdaTest platformunda bir hesap oluşturun. Test altyapılarına erişmek için bu hesaba ihtiyacınız olacak. Ardından, yukarıda anlatıldığı gibi Appium'u ve tüm bağımlılıkları yüklediğinizden emin olun.
Test Komut Dosyaları Yazma
Mobil uygulamanızla etkileşim kurmak için Appium test komut dosyalarınızı geliştirin. Bu komut dosyaları, uygulamanızda gezinmenizi ve önemli öğelerin veya ekranların ekran görüntülerini yakalamanızı sağlayacak adımları içermelidir.
LambdaTest Yeteneklerini Yapılandırma
Appium komut dosyalarınızı LambdaTest'e özgü yetenekleri içerecek şekilde değiştirin. Bu, istenen platformun (iOS/Android), tarayıcı sürümünün, cihaz türünün ve LambdaTest kimlik bilgilerinin (kullanıcı adı ve erişim anahtarı) belirtilmesini içerir.
LambdaTest'te Testleri Çalıştırın
Appium test komut dosyalarınızı LambdaTest'in platformuna yükleyin. LambdaTest, Appium testlerinizi çalıştırabileceğiniz bir Selenyum ızgarası sağlar. Bu ızgara, test için çok çeşitli gerçek cihazlar ve tarayıcılar sunar.
Testleri Yürütün
Testlerinizi LambdaTest'in ızgarasında, web tabanlı arayüzlerinden tetikleyerek gerçekleştirin. LambdaTest, testlerinizi belirtilen mobil cihazlarda ve tarayıcılarda yürütecek ve test akışınızın çeşitli noktalarında ekran görüntüleri yakalayacaktır.
Görsel Karşılaştırma
Testin yürütülmesinden sonra LambdaTest, uygulamanın farklı durumlarının ekran görüntülerini oluşturur. Herhangi bir görsel tutarsızlığı belirlemek amacıyla bu ekran görüntülerini temel görüntülerle karşılaştırmak için yerleşik görsel karşılaştırma aracını kullanabilirsiniz.
İnceleme ve Analiz Etme
Görsel farklılıkları belirlemek için VRT sonuçlarını analiz edin. LambdaTest, tutarsızlıkların tespit edildiği alanları vurgulayarak görsel değişikliklere ilişkin bilgiler sağlar.
Otomatik Raporlama
LambdaTest, test sonuçlarını zaman içinde takip etmek için otomatik raporlama özellikleri sunarak eğilimleri tanımlamayı ve değişikliklerin uygulamanızın görsel görünümü üzerindeki etkisini değerlendirmeyi kolaylaştırır.
Appium Kullanarak Başarılı Görsel Regresyon Testi İçin En İyi Uygulamalar
Appium kullanarak başarılı görsel regresyon testi için izlenecek en iyi uygulamalardan bazıları şunlardır:
Güvenilir Bir Cihaz ve Platform Matrisi Seçin
Hedef kitleniz tarafından kullanılan en önemli kombinasyonları temsil eden bir dizi cihaz, işletim sistemi ve ekran çözünürlüğü seçin. Bu matris, uygulamanızın çeşitli yapılandırmalarda tutarlı görünmesini sağlamak için çok çeşitli cihazları kapsamalıdır.
Referans Görseller İçin Sürüm Kontrolü
Uygulamanızın farklı cihaz ve platformlarda beklenen görsel görünümünü temsil eden, sürüm kontrollü bir referans görselleri deposu bulundurun. Bu referans görüntüler, regresyon testleri sırasında karşılaştırma için temel görevi görecektir.
Kararlı ve Tutarlı Test Ortamı
Her test çalıştırması için test ortamının tutarlı olduğundan emin olun. Buna, farklı test çalıştırmalarında aynı işletim sistemi sürümlerinin, Appium sürümlerinin ve kitaplıkların kullanılması da dahildir. Testlerinizde hatalı pozitif sonuçlara yol açabilecek ortamda gereksiz değişiklikler yapmaktan kaçının.
Kullanıcı Arayüzü Değişikliklerini İşlevsel Değişikliklerden Ayırın
Görsel regresyon testlerinizi fonksiyonel testlerden ayırın. Bu, işlevsel sorunlar nedeniyle dikkatinizi dağıtmadan yalnızca görsel farklılıklara odaklanmanıza olanak tanır.
Beklenen Görsel Farklılığı Tolere Edin
Tüm görsel farklılıklar hata değildir. Genel kullanıcı deneyimini etkilemeyebilecek yazı tipi oluşturma değişiklikleri gibi küçük kullanıcı arayüzü değişikliklerini hesaba katmak amacıyla kabul edilebilir bir görsel farklılık için bir tolerans düzeyi ayarlayın.
Dinamik İçerik İşleme
Reklamlar, kullanıcı tarafından oluşturulan içerik ve gerçek zamanlı veriler gibi dinamik içerikleri zarif bir şekilde yönetin. Bu öğeleri karşılaştırmanın dışında bırakmanız veya referans görsellerinizi bu dinamik değişiklikleri hesaba katacak şekilde güncellemeniz gerekebilir.
Akıllı Bekleme Stratejileri
Ekran görüntüleri yakalamadan önce uygulamanın kullanıcı arayüzü öğelerinin tamamen yüklendiğinden emin olmak için akıllı bekleme stratejileri uygulayın. Bu, eksik veya kısmen yüklenmiş ekranların neden olduğu hatalı pozitif sonuçların önlenmesine yardımcı olur.
Paralel Yürütme
Mümkünse görsel regresyon testlerini birden fazla cihaz ve platformda paralel olarak çalıştırın. Bu, genel test süresini azaltır ve potansiyel görsel tutarsızlıklar hakkında daha hızlı geri bildirim sağlar.
Otomatik Raporlama ve Bildirimler
Görsel tutarsızlıklar tespit edildiğinde ekibi uyarmak için otomatik raporlama ve bildirimler ayarlayın. Bu, hızlı aksiyon alınmasını sağlar ve sorunları düzeltmek için harcanan süreyi en aza indirir.
Düzenli Test Bakımı
Uygulamanız geliştikçe referans görsellerinizi güncelleyin ve testlerinizi kasıtlı görsel değişikliklere uyum sağlayacak şekilde uyarlayın. İlgili kaldıklarından emin olmak için görsel regresyon testlerinizi düzenli olarak gözden geçirin ve sürdürün.
Bulguları İnceleyin ve Doğrulayın
Herhangi bir farkı gerçek bir sorun olarak değerlendirmeden önce, farklılıkların gerçek hatalar mı yoksa yalnızca dinamik içerik veya küçük görsel değişikliklerden kaynaklanan yanlış pozitifler mi olduğunu doğrulamak için ekran görüntülerini manuel olarak inceleyin.
Devamlı gelişme
Görsel regresyon testi stratejinizi sürekli olarak değerlendirin ve gerektiği şekilde uyarlayın. Test sürecinizin etkinliğini sağlamak için en yeni araçlar, kitaplıklar ve en iyi uygulamalarla güncel kalın.
Çözüm
İstenmeyen değişiklikleri tespit etmek, manuel QA çalışmalarını azaltmak veya sadece farklı cihazlar ve çözünürlükler arasında görsel tutarlılığı geliştirmek istiyorsanız VRT, test cephaneliğinizde vazgeçilmez bir araçtır. Her teknolojide olduğu gibi, nüanslarda uzmanlaşmak zaman alır, ancak zaman tasarrufu, azaltılmış hatalar ve daha kusursuz bir kullanıcı deneyimi açısından faydaları çok büyük olabilir. Peki neden bekleyelim? VRT ve Appium'u bugün kullanmaya başlayın ve mobil uygulama testinizi bir sonraki seviyeye taşıyın.