Görsel regresyon testi, işlevsel doğrulamanın, sayfaların teknik olarak işlevsel kalmasına rağmen kullanıcı deneyimini kötüleştiren CSS regresyonlarını yakalayamaması nedeniyle, manuel QA ekran görüntülerinden otomatik piksel karşılaştırmalarına evrildi. Temel sorun, tarayıcı render motorlarının, naif fark algoritmalarında yanlış pozitif tetikleyen anti-aliasing, yazı tipleri ve görüntü sıkıştırmasında alt piksel varyasyonları üretmesinden kaynaklanmaktadır; dinamik içerik, reklamlardan veya zaman damgalarından gelen gürültü, gerçek düzen hatalarını gizlemektedir.
Etkili bir çözüm, ilk görüntü parmak izleme için algısal hashing kullanan ve anlamlı görsel farklılıkları nitelendirmek için yapısal benzerlik indeks ölçümünü takip eden hibrit bir mimariyi uygular ve sıkıştırma gürültüsünü yok sayar. Hattı görüntüleme matrisleri boyunca ekran görüntüleri yakalamak için konteynerleştirilmiş tarayıcı ızgaralarıyla entegre eder, ardından karşılaştırmadan önce veri-görsel-yoksayma nitelikleri ile işaretlenmiş bölgeleri hariç tutmak için DOM bilgilendirilmiş maskeleme uygular. Temel yönetim, tespit edilen farklılıkların tasarım paydaşlarına otomatik bildirimler tetiklemesini sağlamak için iki aşamalı onay sistemi gerektirir; onaylanan değişiklikler, depolama alanının artmasını önlemek için referans görüntülerini değişmez nesne depolamasında otomatik olarak güncelleyerek PR yorumları veya Slack aracılığıyla iletilir.
from PIL import Image import imagehash import numpy as np from skimage.metrics import structural_similarity as ssim class VisualValidator: def __init__(self, threshold=0.95): self.threshold = threshold def compare_with_masking(self, baseline_path, candidate_path, mask_regions=[]): """ Dinamik bölgeleri maskeleyerek görüntüleri SSIM ile karşılaştırır mask_regions: (x, y, genişlik, yükseklik) şeklinde tuple'lardan oluşan liste """ baseline = Image.open(baseline_path).convert('RGB') candidate = Image.open(candidate_path).convert('RGB') # İşleme için numpy dizilerine dönüştür base_array = np.array(baseline) cand_array = np.array(candidate) # Maskeleri uygula (dinamik bölgelerin üstünü siyah ile boyat) for x, y, w, h in mask_regions: base_array[y:y+h, x:x+w] = [0, 0, 0] cand_array[y:y+h, x:x+w] = [0, 0, 0] # Yapısal benzerlik indeksini hesapla score = ssim(base_array, cand_array, multichannel=True, channel_axis=2) return { 'is_different': score < self.threshold, 'similarity_score': score, 'diff_percentage': (1 - score) * 100 } # CI hattında kullanım validator = VisualRegistry(threshold=0.98) result = validator.compare_with_masking( 'baselines/checkout.png', 'current/checkout.png', mask_regions=[(100, 50, 200, 30)] # Zaman damgası alanını maskele ) if result['is_different']: print(f"Görsel regresyon tespit edildi: {result['diff_percentage']:.2f}% fark") # Dağıtımı engelle ve tasarımcılara bildir
Bir fintech şirketi, özellikle iOS Safari'de döviz dönüşüm güncellemeleri sırasında yanıt veren ızgara düzenlerinin bozulduğu tekrarlayan üretim olayları yaşadı; bu, tüm Selenium testleri geçmesine rağmen terkedilen satın alımlara yol açan yanlış hizalı işlem düğmelerine neden oldu. Otomasyon ekibi, başlangıçta açık kaynaklı kütüphaneler kullanarak standart piksel tabanlı ekran görüntüsü karşılaştırmaları uyguladı, ancak bu yaklaşım, sahneleme ortamının tarihlerinin Amerikan formatında render edilmesi ve üretimin Avrupa formatını göstermesi, ayrıca borsa ticker'larının her üç saniyede bir güncellenmesi nedeniyle günlük binlerce yanlış pozitif fark yaratarak felakete yol açtı.
Mühendislik liderliği, bu karmaşayı çözmek için üç farklı mimari stratejiyi kayda aldı. İlk öneri, her ortam ve saat dilimi için ayrı temel setleri tutmayı önerdi, bu teori olarak varyansları izole etmesine rağmen, terabaytlarca görüntü depolamayı ve kopya değiştiğinde manuel güncellemeler yapmayı gerektiriyordu. İkinci yaklaşım, tamamen görsel testlerin terk edilmesini ve getComputedStyle kullanarak hesaplanan stil doğrulamalarını önerdi; bu, güvenirlik sorunlarını ortadan kaldırdı, ancak şirketin günde yaklaşık elli bin dolarlık kaybettiği işlemlere neden olan Safari'ye özgü fleksiboks render hata olasılığını tamamen kaçırdı.
Ekip, nihayetinde DOM tabanlı eleman tespiti ile algısal diffing algoritmalarını birleştiren bir bilgisayarla görme hattı uyguladı. Bu çözüm, yapısal benzerlik puanlaması uygular ve dinamik içerik konteynerlerini tanımlamak ve maskelemek için CSS seçicileri kullanırken, düzen geometrilerini karşılaştırmak için pixel değerlerine özgü değerlendirmelerden uzaklaştı. Uygulama, yanlış pozitifleri iki hafta içinde yüzde doksan iki oranında azalttı, iOS Safari fleksiboks regresyonunu müşterilere ulaşmadan önce sonraki sürüm döngüsünde tespit etti ve görsel farkları pull request yorumlarına doğrudan eklemek için GitHub Actions iş akışlarıyla entegre oldu, bu sayede tasarımcılar niyetli değişiklikleri tek bir tıklamayla onaylayabildi.
İşletim sistemleri arasında anti-aliasing farklarını nasıl ele alırsınız, aynı tarayıcı metni, teknik olarak farklı görünebilen alt piksel varyasyonlarıyla render ettiğinde ancak insan gözlemcilerine aynı göründüğünde?
Adaylar sıklıkla piksel farkı eşiğini on veya yirmi yüzde artırmayı önermektedir; bu, meşru renk kaymalarını ve eksik kenarları tehlikeli bir şekilde maskeler. Sofistike yaklaşım, her iki görüntüyü karşılaştırmadan önce yüzde elli çözünürlükte aşağı ölçeklendirmeyi içerir; bu, matematiksel olarak alt piksel render varyasyonlarını azaltırken makro düzeydeki düzen kaymalarını korur veya alternatif olarak, yapısal konturları renk değerlerinden daha iyi karşılaştıran kenar algılama temsilcilerine dönüştürmektedir. Anti-aliasing'in alt piksel seviyesinde çalıştığını ve kullanıcıyı etkileyen hataların düzen düzeyinde gerçekleştiğini anlamak, junior uygulamaları üretim kalitesindeki sistemlerden ayırır.
Bir tasarımcı Alice, ana sayfa kahraman görüntüsünü güncellediğinde ve geliştirici Bob aynı sayfada bir altbilgi hizalama hatasını düzeltirken, temel görüntülerin dağıtılmış bir takım arasında senkronize kalmasını nasıl sağlırsınız?
Birçok otomasyon mühendisi, temel görüntüleri Git LFS'de ikili bloblar olarak depolamayı önermekte; bu, aynı anda görsel varlıkları birden fazla paydaş değiştirdiğinde birleştirme çakışması kabusları oluşturmakta. Sektör standardı çözüm, merkezi bir temel hizmeti uygulamaktadır; burada CI hattı, kodda referans depolamak yerine çalışma zamanında en son onaylı temeli alır. Bu, görsel varlıkları kaynak kontrolünden ayırır, eski temellerin otomatik çöp toplama işlemlerini kaydetmeye dayalı politikalar aracılığıyla sağlar ve hangi tasarımcının hangi görsel değişikliği ne zaman onayladığını gösteren denetim izleri sağlar.
Taşınabilir tasarımları doğrulamak için yirmi aygıt görünümü ve beş tarayıcı motoru arasında görsel testlerin aşılmaz bir engel haline gelmesini nasıl önlersiniz, bu da binlerce yüksek çözünürlüklü ekran görüntüsünü karşılaştırmayı gerektirir?
Yaygın bir yanlış anlama, görsel karşılaştırmaları sıralı olarak tek bir işçi düğümünde çalıştırmaktır; bu, geri bildirim döngülerini kırk dakikadan fazla uzatarak geliştirici verimliliğini yok eder. Üretim mimarileri, tüm temellerin hafif parmak izlerini oluşturmak için algısal hashing kullanır ve bu parmak izlerini sıralı bir şekilde karşılaştırarak, yalnızca kalan adaylar için pahalı piksel düzeyinde fark uygulamakla başlar. Ayrıca, her kapsayıcının belirli bir cihaz sınıfını yönetmesine olanak tanıyan, Kubernetes podları arasında görünüm bölümlendirmesi uygulamak, genel yürütme süresini saatlerce olmayan bir süreye, altı dakikadan daha kısa bir süreye getirir, kapsam derinliğini tehlikeye atmadan.