Görsel regresyon testi nedir?
Görsel regresyon testi, bir arayüzün ekran görüntülerini daha önce onaylanmış referans görüntülerle karşılaştırarak beklenmeyen görsel değişiklikleri yakalayan test yöntemidir. Kayan bir düğme, taşan bir metin ya da bozulan mobil düzen gibi kod testlerinin kaçırdığı hataları bulur.
Nasıl çalışır?
Yöntem dört adımdan oluşur ve her değişiklikte tekrarlanır.
- Referans: onaylanmış durumdaki sayfaların ekran görüntüleri alınır.
- Karşılaştırma: değişiklikten sonra aynı sayfalar aynı boyutlarda yeniden çekilir ve piksel piksel kıyaslanır.
- Eşik: küçük farkların hata sayılmaması için değişen piksel oranına bir sınır konur.
- Onay: fark kasıtlıysa yeni görüntü referans olur, değilse hata düzeltilir.
Neden gerekli?
Birim testleri bir fonksiyonun doğru değeri döndürdüğünü söyler, sayfanın doğru göründüğünü söylemez. Bir CSS değişikliği başka bir sayfadaki düzeni bozabilir. Kodlama ajanları arayüzü değiştirdiğinde bu tür yan etkiler daha sık görülür, çünkü ajan çoğu zaman ekranı görmeden çalışır.
Sahte farkları azaltmak
Gürültülü bir test kısa sürede görmezden gelinir; ortamı sabitlemek bu yüzden önemlidir.
- Animasyonları ve geçişleri kapat.
- Tarih, saat ve rastgele içerik gibi değişen verileri sabitle.
- Yazı tiplerinin yüklenmesini bekle; görüntüleri hep aynı tarayıcı ve işletim sisteminde çek.
- Mobil, tablet ve masaüstü gibi birkaç ekran boyutunda test et.
Araçlar
Playwright’ın toHaveScreenshot karşılaştırması, BackstopJS gibi açık kaynak araçlar ve Percy ya da Chromatic gibi barındırılan servisler yaygın seçeneklerdir. Hepsi aynı fikre dayanır: referans görüntü, yeni görüntü ve farkların işaretlendiği bir fark görüntüsü.
AgentVera’da görsel karşılaştırma
AgentVera’nın Önizleme sekmesi, görsel karşılaştırmayı projenin ve her worktree’nin kendi dev sunucusu üzerinde yapar.
- Seçtiğin sayfaların tam sayfa görüntüleri Mobil (375×812), Tablet (768×1024) ve Masaüstü (1440×900) boyutlarında alınır; en fazla 6 boyut tanımlanabilir.
- Bir temel belirlersin; sonraki görüntüler piksel piksel kıyaslanır ve değişen pikseller kırmızıyla işaretlenir. Varsayılan eşik piksellerin %0,1’idir.
- Ajanla test et düğmesi, o worktree’de AgentVera tarayıcısıyla bir Claude ajanı açar; ajan her sayfayı her kırılma noktasında açıp taşma, bozuk düzen, konsol hatası ve çalışmayan bağlantı arar.
Sık sorulanlar
Görsel regresyon testi ile snapshot testi aynı şey mi?
Fikir benzer, kıyaslanan şey farklı. Snapshot testleri genelde bileşenin HTML ya da metin çıktısını kıyaslar; görsel regresyon testi ise gerçek ekran görüntüsünü.
Piksel karşılaştırması neden sahte hata verir?
Yazı tipi işleme, kenar yumuşatma, animasyonlar ve değişen içerik birkaç pikseli değiştirebilir. Eşik koymak ve ortamı sabitlemek bu gürültüyü azaltır.
Hangi sayfaları test etmeliyim?
En çok kullanılan ve en kırılgan sayfalarla başla: ana sayfa, giriş, ödeme ya da form akışları. Her sayfayı birkaç ekran boyutunda çek.