Bir ödeme düğmesinin rengi yanlışa döndüğünde, yazılım testleriniz çoğunlukla yeşil kalır. Çünkü testler düğmenin var olduğunu doğrular, doğru göründüğünü değil. Ekranda olan şey metin değil, renk, konum, tipografi ve boşluktur — ve yazılımın bildiği tek şey DOM'dur.
Görsel regresyon testi, bu boşluğu kapatır: bir sayfanın ekran görüntüsünü referans bir görüntüyle karşılaştırır, farkı bulur ve fark olduğunu bildirir.
Bu yazıda görsel regresyon testinin ne yaptığını, hangi durumlarda gerçekten gerekli olduğunu, yaygın yöntemleri ve — en önemlisi — hangi durumlarda gerekmediğini anlatacağız. Çünkü bu araç her projeye konulacak bir şey değil ve yanlış yere konduğunda çok gündür gürültü üretir.
DOM testleri neden yetmiyor?
Yazılım testlerinin çoğu bir öğenin var olduğunu doğrular:
expect(page.locator('[data-testid="checkout-button"]')).toBeVisible()
Bu test geçerken gerçekte şunlar olmuş olabilir:
- Düğme ekranın dışına taşmış olabilir (taşma görünürlüğü bozmaz)
- Üstünde başka bir katman binmiş olabilir (tıklanamaz, ama "görünür")
- Arka plan rengi değişmiş, kontrast eşiğin altına düşmüş olabilir
- Font yüklenememiş, fallback ile render edilmiş olabilir
- Mobilde üst üste binmiş olabilir
Bunların hiçbiri DOM testini kırmaz. Görsel regresyon testi ise ekranın gerçekten nasıl göründüğünü karşılaştırdığı için hepsini yakalar.
Nasıl çalışır? Dört adım
1. Referans görüntü alınır. Sayfa, bilinen bir "doğru" sürümde kaydedilir. Bu referanstır.
2. Aynı sayfa yeniden çekilir. Aynı tarayıcı, aynı ekran boyutu, aynı bekleme koşullarıyla.
3. Piksel farkı hesaplanır. İki görüntü karşılaştırılır ve hangi piksellerin değiştiği, ne kadar değiştiği bulunur.
4. Eşik uygulanır. Küçük farklar yok sayılır, büyük olanlar hata olarak yükseltilir.
Asıl zorluk dördüncü adımda. Eşiğin çok gevşek olması gerçek hataları kaçırır, çok sıkı olması da her yeniden render'da kırık test üretir. Animasyon, saat, rastgele içerik ve yazı tipi yükleme gibi değişkenler bu yüzden maskelenir.
En yaygın yöntemler
Piksel farkı (pixel diff). İki görüntü piksel piksel karşılaştırılır. Basit, hızlı, ama küçük kaymalarda kırılgan. Sayfadaki bir şey bir piksel kaydığında test kırılır.
Perceptual hash (algısal karma). Görüntü, insan gözünün algısına yakın bir özet sayıya indirgenir ve iki sayı karşılaştırılır. Kaymaya çok daha toleranslı. Ayrıntı kaybı yüzünden küçük ama anlamlı değişiklikleri kaçırabilir.
Yapısal benzerlik (SSIM). Görüntülerin yapısal benzerliğini ölçer. Renk ve dokudan çok yerleşime bakar. Metin kayması yüzünden kırılan testlerde daha kararlıdır.
DOM + görsel birlikte. Birçok kurum ikisini birleştirir: DOM testi hızlı geri bildirim verir, görsel test derinlemesine doğrular. Maliyeti iki testin toplamıdır.
Nerede gerçekten gerekli?
Görsel regresyon testinin kazandığı yerler:
- Tasarım sistemi değişiklikleri. Bir bileşen güncellemesi 40 sayfayı etkileyebilir. Bu 40 sayfayı tek tek elle kontrol etmek pratikte yapılmaz.
- Yoğun kullanılan dönüşüm yolları. Ödeme adımları, kayıt, sepet. Buradaki bir kırılma doğrudan gelir kaybıdır.
- Tarayıcı/oturumlar arası tutarlılık. Aynı sayfanın farklı ekran boyutlarında nasıl göründüğü.
- Kurumsal içerik. Fiyat tabloları, açıklamalar, kampanya görselleri.
Görsel regresyon testinin gerekmediği yerler:
- Metin ve arka plan düz olan basit CRUD ekranları. Testin maliyeti, yakalayacağı hata oranından yüksek kalır.
- Sürekli değişen kişisel içerik. Zaman, sayaç, reklam gösterimi varsa her çalıştırmada kırılır ve ekip testi susturmayı öğrenir — bu, teste değil zarar verir.
- Yayın öncesi tek seferlik kontrol. Bunun için tarayıcıyı açmak daha hızlı.
Üretimdeki siteler için farklı bir kullanım
Buraya kadar anlatılanlar yayın öncesi testler: kodunuzun ne ürettiğini doğrulamak için.
Bir ajansın veya site sahibinin farklı bir ihtiyacı var: yayınlanmış siteyi dışarıdan izlemek. Kimse o siteyi test etmiyor, kod yazan da yok. Biri CSS'i değiştirdi ve bir öğeyi gizledi, sunucuda bir hata oluştu, bir form artık gönderilmiyor.
Bu, görsel regresyon testinin yaptığı işin dışarıdan yapılan hâli. Aynı karşılaştırma, ama referans görüntüyü siz tutuyorsunuz ve karşılaştırma kendiliğinden çalışıyor.
Ajanslar için pratik fark şu: 30 müşteri sitesini manuel olarak günde bir kontrol etmek mümkün değil. Otomatikleştirildiğinde ise "sitenizde bir şey değişti" bilgisi, müşteriniz size yazmadan gelir.
Yaygın tuzaklar
Eşiği çok sıkı ayarlamak. Testler kırılır, ekip gürültü olduğu için
görmezden gelmeye başlar. Kırık test, hiç test olmaktan kötüdür.
Maskelemeyi atlamaak. Saat, tarih, reklam alanı maskelenmezse her çalıştırma kırılır. Maske koymadan başlamak, sonradan maskelemekten daha zordur.
Test sayısını sınırsız büyütmek. Her sayfa için test yazmak yerine, kullanıcı yoluna göre seçmek gerekir.
Görüntü boyutunu sabitlememek. Test 1280px'te geçiyorsa 375px'te ne olduğunu bilmiyorsunuz demektir.
Özet
- Görsel regresyon testi, DOM'un göremediği boşluğu kapatır: gerçek görünüm.
- En büyük kazancı, tek kişinin elle kontrol edemeyeceği yayılma değişikliklerinde.
- Piksel farkı hızlı ama kırılgan; algısal karma ve SSIM daha dayanıklı.
- Olmayan yere konmuş test, hiç konmamış testten daha kötüdür: gürültü üretir ve ekibi körleştirir.
- Üretimdeki siteleri izlemek için aynı teknik, dışarıdan çalışan bir araçla yapılır.
Nasıl kurulacağına dair adımlar için teknik dokümanlarımıza bakabilir, hangi planın size uyduğunu görmek için fiyatlandırmaya göz atabilirsiniz.