Visual regression (screenshot karşılaştırma)

Klasik bir HTTP izleyicisi "sunucu 200 OK yanıt veriyor" der, ancak ana CSS dosyasının yüklenemediğini ve sitenin bozuk göründüğünü bilmez. Görsel kontrol (İngilizce visual regression) sayfanın bir ekran görüntüsünü alır ve bunu bir referans ekran görüntüsüyle (baseline) karşılaştırır - sunucu her şeyin yolunda olduğunu söylese bile görsel değişiklikleri yakalar.

Görsel kontrol Pro ve Business planlarında kullanılabilir.

Nasıl çalışır

1. Görsel kontrolü ilk kez etkinleştirdiğinizde bir referans ekran görüntüsü (baseline) alınır - daha sonra karşılaştırma yapılan referans budur.
2. Sonraki her kontrolde yeni bir ekran görüntüsü alır ve bunu baseline ile piksel piksel karşılaştırırız.
3. Fark, ayarlanan eşiği (varsayılan olarak 5 %) aşarsa, izleyici değişti olarak işaretlenir ve bir uyarı alırsınız.
4. İzleyici detayında baseline ile güncel ekran görüntüsünü yan yana ve farklı olan yerlerin vurgulanmış halini görürsünüz.

Ne zaman kullanılır

• Sitenin yeni bir sürümünü yayına aldıktan sonra - bozuk yazı tiplerini, CSS'i veya düzeni otomatik olarak yakalar
• Pazarlama açılış sayfaları için - GA etiketinin ve diğer öğelerin yerinden oynamadığını bilmek için
• E-ticaret siteleri için - "Sepete ekle" butonunun hâlâ görünür olduğunu kontrol etmek için
• Durum sayfaları için - kendi durum sayfanızın doğru görüntülendiğini bilmek için

Kurulum

1. Bir izleyici oluştururken Görsel kontrol türünü seçin - ilk ekran görüntüsü otomatik olarak baseline olarak kaydedilir
2. İzleyici detayında Görsel kontrol bölümünde referans ekran görüntüsünü, güncel ekran görüntüsünü ve vurgulanan farkları görürsünüz
3. Değişiklik sınırını Görsel değişiklik sınırı kaydırıcıyla ayarlarsınız (0,5 ile 30 % arası, varsayılan 5 %)
4. Her yeni sürüm yayına alımından sonra baseline'ı Günceli referans olarak ayarla butonuyla güncelleyin

Yanlış alarmlara dikkat

• Sayfadaki tarih ve saat - her kontrol bunları farklı şekilde gösterir. Böyle bir değişikliği yayına aldıktan sonra her zaman baseline'ı yenileyin.
• Reklamlar ve bannerlar - ekran görüntüleri arasında döner ve genellikle yanlış alarma yol açar. Görsel kontrol reklamsız sayfalarda en iyi şekilde çalışır.
• Animasyonlar - ilk ve sonraki ekran görüntüsü farklı olabilir. Görsel kontrol, animasyonun oturması için yüklemeden sonra 1,5 saniye bekler.