Görsel Test - UI Testing Inspector

Her kod güncellemesinden sonra “Önce-Sonra” görüntülerini tek tek kontrol etmekten yoruldunuz mu?
UI Testing Inspector, tamamen yerel çalışan görsel diff aracı; piksel-pikselle karşılaştırma ve DOM/CSS analizini aynı raporda sunar.
Neden kullanmalısınız?
⚡ %100 Yerel & Özel – ekran görüntüleri ve diff verileri yalnızca bilgisayarınızda; bulut yok, veri paylaşımı yok
⚡ Anında Geri Bildirim – temel çizgiyi (baseline) alın, kodu değiştirin, “Compare” deyin; farkları anında görün
⚡ Piksel-Mükemmel Algılama – insan gözünün kaçırabileceği en ufak değişiklikleri bile yakalar
Öne Çıkan Özellikler
🔸 Tek Tıkla Baseline – istediğiniz sayfanın “önce” hâlini tek tıkla kaydeder
🔸 Pixel-Perfect Diff  – Before / After / Diff görüntüleri tek raporda
🔸 Inspect Element   – hangi DOM / CSS özelliği değişti, satır satır listeler
🔸 Viewport ↔ Full-page Yakalama
🔸 Rapor Geçmişi (14-15 önceki rapor)
🔸 Açık / Koyu Tema desteği
Detaylı Raporun İçindekiler
✔️ Özet: yüzde fark + eklenen/kaldırılan/değişen öğe sayıları
✔️ Yan Yana Görünüm: Before / After / Diff karşılaştırması
✔️ DOM & CSS Değişiklik Listesi: renk, font-boyut, margin vb. kod düzeyi farklar
Neleri Yakalarsınız
➤ Düzen kaymaları, hizalama hataları
➤ Renk ve stil değişiklikleri
➤ Eksik ya da taşınmış öğeler
➤ Yazı tipi / metin / görsel farkları
Nasıl Çalışır
1️⃣ Sayfayı açın, “Set Baseline” tıklayın
2️⃣ Kod / içerik / CSS’i dilediğinizce değiştirin
3️⃣ “Compare with Baseline” tıklayın, ayrıntılı diff raporu açılır
4️⃣ Yan Yana görünüm + Değişiklik Listesi ile hataları analiz edin
5️⃣ Yeni tasarım tamamsa “Set Baseline” ile referansı güncelleyin
Pro İpuçları ✨
Sayfa tam yüklenmeden baseline almayın
Kapsamlı testte Full-page Capture kullanın
Her seferinde aynı pencere boyutunda çekim yapın
İçerik sabitken baseline alın
Daha net sonuç için tek değişikliği test edin
Büyük refactor öncesi önemli baseline’ları kaydedin
Kullanım Senaryoları ✅
Görsel Regresyon Testi • UI/Tasarım Doğrulaması • CSS Refactoring • Front-end Test Work-flow’ları
Kimler İçin? ➡️ Front-end Geliştiricileri, QA Mühendisleri, UI/UX Tasarımcıları, Freelancer’lar ve Küçük Ekipler
Neden Öne Çıkıyor 🖼️ Manuel ekran görüntüsü kalabalığına son 📝 Öğrenme eğrisi = 0
SSS
❓ Değişiklikleri nasıl algılar?
💬 Çift yöntem – piksel-pikselle görsel karşılaştırma + yapısal DOM/CSS taraması.
❓ Verilerim güvende mi?
💬 Evet; tüm işlem ve saklama %100 yerelde, tarayıcınızda olur.
❓ Localhost’ta çalışır mı?
💬 Kesinlikle; yerel geliştirme sırasında da sorunsuzdur.
❓ Dinamik içerik?
💬 Statik durumları karşılaştırmak için tasarlandı; en iyi sonuç için animasyonlar bittiğinde çekim yapın.
ülerinizi yakalayın.