Görsel Gerileme Testi Kavramları

Görsel gerileme sınaması (VRT), oluşturulan ekran görüntülerini piksel piksel karşılaştırarak kod sürümleri arasındaki kasıtsız görsel değişiklikleri otomatik olarak algılar. Birim sınamalarının tamamen gözden kaçırdığı CSS gerilemelerini (yerleşim kaymaları, renk değişiklikleri ve bozulan boşluklar) yakalar.

VRT, bileşenlerin veya sayfaların temel ekran görüntülerini alır; ardından kod değişikliklerinden sonra yeni ekran görüntüleri alıp bunları karşılaştırır. Farklar bir fark görüntüsünde vurgulanır. Geliştiriciler farkları inceler ve kasıtlı değişiklikleri onaylar veya kasıtsız gerilemeleri düzeltir.

Piksel farkı alma, görüntüleri piksel piksel karşılaştırır; hassastır ancak kenar yumuşatma ve alt piksel oluşturma farklılıkları nedeniyle yanlış pozitiflere açıktır. Yapısal fark araçları (Applitools AI), tam pikseller yerine görsel amacı karşılaştırır ve yazı tipi oluşturmadaki değişikliklerden kaynaklanan yanlış pozitifleri azaltır.

Onaylanan ekran görüntüleri yeni temel görüntü hâline gelir. Temel görüntüleri sürüm denetiminde (büyük görüntüler için Git LFS) veya özel bir bulut hizmetinde saklayın. Her PR, temel görüntüye göre farkları gösterir ve sorumlular görsel değişiklikleri incelemenin bir parçası olarak onaylar veya reddeder.

Bileşen düzeyi VRT, tek tek kullanıcı arayüzü bileşenlerini yalıtılmış şekilde (Storybook aracılığıyla) sınar. Sayfa düzeyi VRT, gerçek bir tarayıcıda tüm sayfaları sınar. Bileşen sınamaları daha hızlı ve hedefe yöneliktir; sayfa sınamaları bileşenler arasındaki tümleştirme düzeyindeki yerleşim sorunlarını yakalar.

Tüm görsel durumları sınayın: varsayılan, üzerine gelme, odak, etkin, devre dışı, yükleniyor, hata, boş ve dolu. Üzerine gelme durumları JavaScript benzetimi gerektirir (Playwright'ta page.hover()). Eksik durum kapsamı, etkileşimli durumlardaki gerilemeler için kör noktalar oluşturur.

Ekran görüntülerini birden çok tarayıcıda (Chrome, Firefox, Safari) ve görünüm alanında (mobil, tablet, masaüstü) oluşturun. Tarayıcı oluşturma farklılıkları yanlış pozitiflere neden olabilir; tarayıcı başına temel görüntüler kullanın ve bilinen oluşturma farklılıklarına izin verecek fark eşiklerini yapılandırın.

Yazı tipi oluşturma, OS, tarayıcı ve GPU birleşimlerine göre küçük farklılıklar gösterir. Ortamdan kaynaklanan yanlış pozitifleri ortadan kaldırmak için tutarlı sürekli tümleştirme ortamları (Docker ve belirli bir Chrome sürümü) kullanın. Bulut VRT hizmetleri ortam tutarlılığını otomatik olarak sağlar.

Zaman damgaları, kullanıcı avatarları, reklamlar ve rastgele veriler gibi dinamik içerikler yanlış pozitiflere neden olur. Ekran görüntüsü yakalanmadan önce dinamik bölgeleri düz renkli bir kaplamayla maskeleyin. Çoğu VRT aracı, maskeleme için öğe seçicilerini destekler.

VRT'yi her PR'da sürekli tümleştirme ortamında çalıştırın. Onaylanmamış görsel farklar algılandığında derlemeyi başarısız kılın. Görsel farkları yalnızca mühendislik ekibine değil, tasarım incelemecilerine de yönlendirin; görsel değişiklikler mühendislik kadar tasarımın da konusudur.

VRT, görsel tutarlılığın ürün özelliği olduğu bileşen kitaplıklarında ve tasarım sistemlerinde en yüksek yatırım getirisine sahiptir. Sık değişen pazarlama sayfalarında temel görüntüleri sürdürmenin maliyeti, gerilemeleri yakalamanın değerini aşabilir.

Yazı tipi oluşturma farklılıkları görsel gerileme sınamalarında neden yanlış pozitifler üretir?

Görsel regresyon sınaması, farklı kod sürümlerindeki ekran görüntülerini karşılaştırarak CSS ve düzen gerilemelerini yakalar. Etkili VRT; tutarlı ortamlar, durum kapsamı, dinamik içeriği maskeleme ve farkları tasarım inceleyicilerine yönlendiren bir inceleme iş akışı gerektirir; bu da onu yalnızca otomatik bir kontrol kapısı değil, iş birliğine dayalı bir kalite aracı hâline getirir.