Dinamik İçeriklere Sahip (Kullanıcı Verisi Çeken) Sayfalarda Görsel Test Nasıl Yapılır?

Görsel testler (Visual Regression Testing), statik bir "Hakkımızda" sayfası için mükemmel çalışır. Ancak gerçek dünya uygulamaları statik değildir. Bir e-ticaret sepetinde anlık değişen fiyatlar, bir SaaS panosunda (dashboard) saniye saniye güncellenen grafikler, rastgele yüklenen reklam banner'ları veya kullanıcı profil avatarları vardır.

Bu tür "dinamik" içerikleri geleneksel piksel piksel karşılaştırma yöntemiyle test etmeye kalktığınızda, testleriniz %100 oranında başarısız olur (yanlış pozitif). Çünkü sayfada görsel bir hata yoktur, sadece veriler (tarih, saat, fiyat) değişmiştir.

Bu yazıda, modern takımların dinamik sayfalarda görsel testleri "Maskeleme (Masking)" ve "Tolerans (Tolerance)" kullanarak nasıl stabilize ettiklerini inceleyeceğiz.

1. Dinamik İçerik Sorunu ve "Yanlış Pozitif" (False Positive) Cehennemi

Geliştirici takımınız CI/CD üzerinden her koda (PR) commit attığında bir görsel test çalıştığını hayal edin. Sitenizin sağ üst köşesinde Son Güncelleme: 14:35 yazıyor. Test sunucusu bu sayfanın ekran görüntüsünü alır ve Baseline (önceki onaylı sürüm) ile karşılaştırır.

Baseline'da saat 11:20 yazıyordu. İşte size bir "False Positive" (Yanlış Hata). Tasarımda veya CSS'te hiçbir kayma olmamasına rağmen test hata verir. Eğer ekibiniz her gün bu "sahte" hataları manuel olarak onaylamak zorunda kalırsa, "Alarm Yorgunluğu" (Alert Fatigue) başlar ve kimse testlere güvenmez.

2. Çözüm 1: Sensitif Alanları Maskelemek (Masking / Ignoring)

Dinamik kısımların testi bozmasını engellemenin en profesyonel yolu, bu belirli elementleri (DOM nodelarını) algoritmanın dışına çıkarmaktır. "Maskeleme", test aracına "Bu elementi gördüğünde üzerini siyah bir kutuyla ört ve piksel farkı arama" demek anlamına gelir.

Nasıl Yapılır?

• Statik Sınıf Atama: Geliştiriciler, test sırasında göz ardı edilecek dinamik verilere özel CSS sınıfları (örneğin .ignore-visual-test) ekleyebilir.
• Akıllı DOM Maskelemesi: Crawlens gibi modern SaaS ürünlerinde kod yazmanıza gerek kalmaz. Doğrudan Crawlens panosunda, test edilen sayfanın ekran görüntüsü üzerinde bir kutu çizer ve "Bu tarih/fiyat alanını yoksay" diyebilirsiniz. Algoritma bir sonraki çalışmada bu alanı maskeler.

3. Çözüm 2: Piksel Toleransı (Tolerance) ve Anti-Aliasing

Bazen tüm dinamik alanı maskelemek istemezsiniz. Örneğin bir butonun renginin değişmediğinden emin olmak istersiniz, ancak butonun içindeki "Sepette 3 Ürün" texti sürekli "Sepette 4 Ürün" olarak değişebilir.

Çözüm "Tolerans" seviyeleridir. Crawlens'in Akıllı Gruplama (Smart Grouping) algoritmaları, piksel eşleştirme tolerans seviyelerini (örneğin %5 farka kadar izin ver) yapılandırmanıza izin verir. Ayrıca, cihazlar arası "Anti-Aliasing" (yazı tipi yumuşatma pikselleri) kaynaklı mikroskobik renk farklılıklarını Yapay Zeka (AI) yardımıyla tamamen ignore ederek devasa zaman kazandırır.

Sonuç

Uygulamanız ne kadar dinamik ve karmaşık olursa olsun, manuel QA süreçlerine mahkum değilsiniz. Doğru Maskeleme stratejileri ve Crawlens gibi hata ayıklamaya odaklanmış ileri düzey araçlarla, ekranda akan borsa verilerini bile hatasız bir şekilde sürekli görsel teste tabi tutabilirsiniz. Kodunuzu canlıya güvenle alın (Ship Confidently)!