Playwright Visual Comparisons kullanarak daha güvenli bir geliştirme ortamını verimli şekilde oluşturmak

Arka plan ve sorunun fark edilmesi

• Frontend testleri, UI değişiklikleri ve öngörülemeyen kullanıcı girdileri nedeniyle birçok zorluk içerir.
• İnsanların doğrudan doğrulama yaptığı testlerin sınırları olduğundan, otomatik testlerin devreye alınması değerlendirildi.
• Mevcut kayıt tabanlı E2E testleri (TestProject, Playwright) yüksek bakım maliyetine sahipti ve UI değişikliklerine karşı kırılgandı.

Playwright Visual Comparisons'ın devreye alınması

• UI değişimlerini algılayan görsel regresyon testi yaklaşımı uygulandı.
• Referans ekran görüntüleri kaydedilip kod değişikliğinden sonra karşılaştırılarak değişiklikler tespit edildi.
• Görseller 2-up, Swipe, Highlight ve Onion Skin yöntemleriyle karşılaştırılabiliyor.

Devreye alma sürecinde yaşanan başlıca sorunlar ve çözümleri

1. Çok küçük farklar (%0,01) nedeniyle sahte başarısızlıklar oluşması
   Sorun: Test çalışma ortamına (OS, tarayıcı, ekran ayarları vb.) bağlı olarak font render farkları oluşuyordu.
   Çözüm: Tüm testler Docker container kullanılarak aynı ortamda çalıştırıldı.

2. Ekran görüntüsünün veri yüklemesi tamamlandıktan sonra alınması gerekliliği
   Sorun: Sayfa tamamen yüklenmeden ekran görüntüsü alınırsa, yükleme UI'ının görüntüye dahil olduğu durumlar oluşuyordu.
   Çözüm: getByText + toBeVisible kullanan bir utility fonksiyonuyla belirli bir metin görünene kadar beklendi.

3. Animasyonlu öğeler nedeniyle ekran görüntüsü farkları oluşması
   Sorun: CSS animasyonları, Canvas, SVG ve WebGL öğeleri her seferinde farklı bir anda yakalanıyor ve bu da flaky testlere yol açıyordu.
   Çözüm: Animasyonları devre dışı bırakmak için çeşitli işlemler uygulandı ve test çalıştırma verimliliği ek olarak iyileştirildi.

4. Üçüncü taraf eklentiler (iframe vb.) nedeniyle gereksiz değişiklik algılanması
   Sorun: Müşteri geri bildirimi, anket ve chatbot gibi üçüncü taraf eklentiler iframe üzerinden yüklenerek görsel değişim oluşturuyordu.
   Çözüm: Ekran görüntüsü oluşturulurken ortak CSS işlenerek iframe'ler ve belirli eklenti öğeleri görünmez hale getirildi.

5. Kaydırmalı sayfalarda alt kısımdaki öğelerin doğrulanamaması
   Sorun: toHaveScreenshot varsayılan olarak yalnızca o anda görünen ekranı yakaladığından, scroll ile ilgili ek işlem gerekiyordu.
   Çözüm: fullPage: true seçeneği uygulanarak tüm sayfanın ekran görüntüsünün alınması sağlandı.

Sonuç

• Görsel regresyon testleri sayesinde UI değişikliklerinin tespiti etkili biçimde otomatikleştirildi.
• Kusursuz bir çözüm olmasa da geliştirme üretkenliğini ve test kararlılığını birlikte artırdı.
• Sürekli iyileştirme ve test ortamının optimize edilmesi gerekiyor.