Yazar, Astro ile oluşturduğu ve mdx ile içerik ürettiği statik web sitesinde yaptığı stil değişikliklerinin, özellikle karmaşık CSS yapısı nedeniyle, eski sayfalarda beklenmedik görsel bozulmalara yol açmasından endişe duyuyor. Bu tür değişiklikler sonrasında eski notları manuel olarak kontrol etme ihtiyacı, hem zaman alıcı hem de hata potansiyeli taşıyor. Bu sorunu çözmek için, Playwright kullanarak görsel regresyon testi (visual regression testing) uygulamaya karar vermiş.
Görsel regresyon testleri, temel olarak web sayfalarının otomatik ekran görüntülerini alır ve bunları daha önce "altın" kabul edilen referans görüntülerle karşılaştırır. Eğer yeni ekran görüntüsü, belirlenen bir eşikten fazla sapma gösterirse, test başarısız sayılır. Bu durumda ya uygulamadaki hata düzeltilir ya da yapılan değişikliğin geçerli olduğu kabul edilerek referans görüntü güncellenir. Bu yöntem, özellikle görsel tutarlılığın kritik olduğu statik web sitelerinde, yapılan kod değişikliklerinin istenmeyen yan etkilere yol açmadığına dair büyük bir güven sağlıyor. Ayrıca, alınan ekran görüntüleri Git deposuna kaydedildiği için, her commit anındaki sitenin görsel bir geçmişi de otomatik olarak tutulmuş oluyor.
Teknik uygulamada, yazar Playwright'ı mevcut web sitesi deposuna entegre etmiş. Test edilecek sayfaların URL'lerini bir dizi içinde tanımlayarak, her bir sayfa için otomatik bir test süreci başlatmış. Bu süreçte Playwright, belirtilen URL'ye gidiyor, sayfanın tamamen yüklenmesini bekliyor ve tüm sayfa içeriğini kapsayacak şekilde kaydırma yaparak tam ekran görüntüleri alıyor. Bu sayede, sitenin herhangi bir yerindeki görsel değişiklikler anında tespit edilebiliyor ve geliştirme sürecinde güvenle ilerlenebiliyor.
Bu yöntem, statik web sitelerinde yapılan kod değişikliklerinin görsel bütünlüğü bozmadığından emin olmak için otomatik ve güvenilir bir yol sunar.