Visual regression (ekran görüntüsü karşılaştırma)

5 dk okuma

Klasik HTTP monitörü "sunucu 200 yanıtlıyor" der, ancak ana CSS dosyasının yüklenmediğini ve web'in bozuk göründüğünü bilmez. Visual regression bir ekran görüntüsü alır ve baseline ile karşılaştırır - sunucu OK dese bile görsel değişiklikleri tespit eder.

Nasıl çalışır

1. Visual regression ilk kez etkinleştirildiğinde baseline ekran görüntüsü alınır (referans).
2. Sonraki her kontrolde yeni bir ekran görüntüsü alınır ve baseline ile piksel piksel karşılaştırılır.
3. Fark eşiği aşarsa (varsayılan %5), monitör changed olarak işaretlenir ve uyarı alırsınız.
4. Monitör detayında baseline ve mevcut ekran görüntüsünü yan yana + diff overlay görürsünüz.

Ne zaman kullanılır

• Deploy sonrası - bozuk fontlar, CSS, layout otomatik tespit eder
• Pazarlama landing page'leri için - GA tag'inin pozisyonunu kaybetmediğini bilmek için
• E-shop'lar için - "Sepete ekle" düğmesinin hala görünür olduğunun kontrolü
• Status sayfaları için - kendi status page'inizin render edildiğini bilmek için

Ayarlar

1. Monitör detayında Visual regression sekmesine gidin
2. Enable'a tıklayın - baseline alınır (10-30 saniye)
3. İsteğe bağlı olarak threshold'u ayarlayın (1-20%, varsayılan %5)
4. Deploy'dan sonra baseline'ı Refresh baseline ile güncelleyin

Yanlış pozitiflere dikkat

• Sayfadaki tarih / saat - her kontrol bunları farklı render eder. Ya görmezden gelin ya da CSS selector mask ayarlayın.
• Reklamlar / bannerlar - yüklemeler arasında döner. Reklam sağlayıcısının alan adını mask edin.
• Animasyonlar - ilk frame vs sonraki. Visual regression animasyonun sabitlenmesi için yüklemeden 2 sn sonra bekler.
• Cookie banner - her zaman otomatik kabul edilir, ancak bazen görünür kalır. user-config üzerinden CSS kuralı ekleyin.