İçindekiler
- Hızlı Karşılaştırma
- BackstopJS: Görsel regresyon için pratik senaryo aracı
- Playwright: Testler ve görsel karşılaştırmayı tek yerde topla
- Percy: Snapshot yönetimi ve görsel inceleme iş akışı
- Applitools: AI destekli görsel test yaklaşımı
- Resemble.js: Esnek görsel fark kütüphanesi
- Pixelmatch: Hız ve doğruluk için küçük ama etkili kütüphane
- Hangisini Seçmelisin?
- Sıkça Sorulan Sorular
Visual regression ve görsel test, frontend projelerinde görünümün beklenmedik değişikliklere karşı korunmasını sağlar. Bu rehberde visual regression ve görsel test araçlarını, hangi işlerde öne çıktıklarını ve ücretsiz/ açık kaynak seçeneklerin artılarını eksilerini anlatarak front‑end QA sürecini hafifletmene yardımcı olacağım.
Kod tabanlı UI değişiklikleri, tarayıcı güncellemeleri veya responsive düzen farklılıkları görsel regresyona yol açabilir; bu yüzden görsel testler otomasyon hattına eklenmeli. Aşağıda hem self‑hosted hem de bulut entegrasyonlarına uygun, 2026'da hâlâ yaygın kullanılan ücretsiz araçları karşılaştırdım.
Hızlı Karşılaştırma
| Program | Platform | En iyi olduğu iş | Ücret |
|---|---|---|---|
| BackstopJS | Node (CLI), CI | Görüntü tabanlı regresyon testleri, senaryo yakalama | Ücretsiz (açık kaynak) |
| Playwright | Windows, macOS, Linux, CI | Entegre test + screenshot karşılaştırma | Ücretsiz (açık kaynak) |
| Percy | Web (CI entegrasyonu) | Otomatik snapshot yönetimi ve görsel dif analizi | Ücretsiz planda sınırlamalar var |
| Applitools | Web, SDK entegrasyonları | Akıllı görsel karşılaştırma (AI destekli) | Ücretsiz planda sınırlamalar var |
| Resemble.js | Node / Tarayıcı | Piksel ve fark analizi, kütüphane olarak kullanım | Ücretsiz (açık kaynak) |
| Pixelmatch | Node / Tarayıcı | Hızlı piksel karşılaştırma kütüphanesi | Ücretsiz (açık kaynak) |
BackstopJS: Görsel regresyon için pratik senaryo aracı
BackstopJS, web sayfalarının belirlenen görünüm noktalarını kayıt altına alıp karşılaştıran, senaryo tabanlı bir araçtır. Senaryolar, viewports, eşleştirme toleransları ve maskeler gibi ayarları JSON ile tanımlayarak CI hattına kolayca ekleyebilirsin; bu yönüyle görsel regresyon sürecini yapılandırılmış hâle getirir.
BackstopJS özellikle statik site ve component kütüphaneleri üzerinde senaryo tabanlı görsel kontrol yapmak için uygundur. Kayıt (reference) ekran görüntüleri ile yeni çalıştırma görüntülerini karşılaştırır; hatalı pikselleri raporlarda gösterir ve HTML raporu üretir.
Artıları
- JSON ile senaryo tanımlama ve CI entegrasyonu kolay
- Maskeler, eşleştirme eşikleri ve çeşitli viewports desteği var
- Tamamen açık kaynak, kendi altyapında çalıştırabilirsin
Eksileri
- Büyük projelerde yönetim ve paralelizasyon ek çaba gerektirebilir
- Karmaşık DOM animasyonları veya dinamik içeriklerde yanlış pozitifler görülebilir
Kimler için? Statik siteler, component kütüphaneleri veya kendi CI hattında tam kontrol isteyen ekipler için.
Playwright: Testler ve görsel karşılaştırmayı tek yerde topla
Playwright esasen uçtan uca test otomasyon çerçevesidir, ama screenshot / snapshot karşılaştırma yetenekleri sayesinde görsel test akışına da uygundur. Test senaryoları içinde çeşitli tarayıcıları kullanarak farklı durumların ekran görüntülerini alıp kaydedebilirsin.
Playwright, paralel test çalıştırma, headless mod ve CI entegrasyonlarıyla bilinir; bu da görsel regresyon testlerinin otomasyona dönmesini sağlar. Ayrıca DOM tabanlı helper'lar ile screenshot alırken belirli alanları izole etmek veya bekleme stratejileri uygulamak kolaydır.
Artıları
- Tek araçla entegrasyon: fonksiyonel ve görsel testleri aynı koda alabilirsin
- Resmi destekli tarayıcı motorları ve paralel çalışma olanağı
- Açık kaynak, geniş ekosistem
Eksileri
- Görsel fark yönetimi için ekstra kütüphaneler/raporlar eklemek gerekebilir
- Görüntü farklarını yönetmek BackstopJS veya Percy kadar otomatik değil
Kimler için? Hem E2E testleri hem görsel karşılaştırmaları tek çatı altında tutmak isteyen geliştirme ekipleri için.
Percy: Snapshot yönetimi ve görsel inceleme iş akışı
Percy, snapshot almayı, görsel farkları depolamayı ve değişiklikleri ekip içinde incelemeye açmayı kolaylaştıran bir hizmettir. CI ile entegrasyonda otomatik olarak snapshot alır ve değişiklikleri UI üzerinde görsel diff ve onay akışıyla sunar.
Percy, özellikle tasarım onayı süreçlerini test hattına entegre etmek isteyen ekipler için uygun; görsel difleri web arayüzünden onaylayıp geçersiz kılma mekanizmaları sunar. Ücretsiz kullanımda genellikle sınırlamalar olabilir, bu yüzden küçük projeler veya açık kaynak için tercih edilebilir.
Artıları
- Snapshot yönetimi ve görsel inceleme iş akışı güçlü
- CI entegrasyonları ve branch bazlı karşılaştırma kolay
- Tasarım onay süreçleriyle uyumlu görsel arayüz
Eksileri
- Ücretsiz planda sınırlamalar olabilir (kota, projeler)
- Tamamen kendi ortamında self‑hosted çalıştırmak mümkün değil
Kimler için? Tasarım onayı, PR inceleme süreçleri ve ekip içinde görsel onay akışı önemliyse.
Applitools: AI destekli görsel test yaklaşımı
Applitools, görsel karşılaştırmaları sadece piksel farkına değil, görsel öğe seviyesinde akıllı olarak analiz eden bir platformdur. Görsel öğe eşleme (visual AI) sayesinde küçük piksel değişikliklerini tolere eder, ancak gerçek tasarım farklarını yakalama konusunda güçlüdür.
Applitools, farklı SDK'larla (Selenium, Playwright, Cypress gibi) entegre olur ve görsel testleri merkezi bir bulut panosunda yönetmeyi sağlar. Ücretsiz planda sınırlamalar olabileceği için öncelikle ihtiyaçları değerlendirmen faydalı olacaktır.
Artıları
- Görsel AI ile daha az yanlış pozitif, daha akıllı eşleme
- Birkaç farklı test çerçevesine resmi SDK desteği
- Merkezi dashboard ile yönetim ve onay süreçleri
Eksileri
- Ücretsiz planda sınırlamalar olabilir; tam özellikli kullanım genellikle ücretli
- Tam self‑hosted alternatifinden farklı bir iş modeli var
Kimler için? Görsel öğe seviyesinde akıllı eşleme ve az yanlış pozitif isteyen orta/küçük ekipler için.
Resemble.js: Esnek görsel fark kütüphanesi
Resemble.js, iki görüntü arasındaki farkı hesaplayan, tarayıcı veya Node ortamında çalışabilen bir kütüphanedir. Görüntüleri piksel bazında karşılaştırır, diff görselleri ve fark metrikleri üretir; bu yüzden kendi test hattını kurmak isteyenler için yapı taşı olur.
Resemble.js, maskeler, alfa toleransı ve farklı benzerlik metrikleriyle özelleştirilebilir. UI üzerinde hafif bir fark raporlama ihtiyacın varsa veya kendi görsel karşılaştırma pipeline'ını inşa etmek istiyorsan uygun bir seçimdir.
Artıları
- Hafif ve esnek; Node veya tarayıcıda çalışır
- Diff görselleri ve çeşitli eşik ayarları sunar
- Açık kaynak, kolay entegre edilebilir
Eksileri
- Tek başına tam bir test/raporlama platformu sunmaz; ek entegrasyon gerekir
- Büyük ölçekli snapshot yönetimi için ek altyapı kurman gerekebilir
Kimler için? Kendi görsel karşılaştırma layer'ını inşa etmek isteyen geliştiriciler ve küçük otomasyon script'leri için.
Pixelmatch: Hız ve doğruluk için küçük ama etkili kütüphane
Pixelmatch, çok hafif ve hızlı çalışan bir piksel karşılaştırma kütüphanesidir. Genellikle screenshot araçları veya test runner'lar ile birlikte kullanılır; diff görüntüsü ve eşik değerleri üreterek hızlı sonuç verir.
Pixelmatch, performans gerektiren senaryolarda ve Node tabanlı pipeline'larda tercih edilir. Bir test runner ile birleştirildiğinde yüksek hızlı görsel regresyon hattı oluşturmak mümkündür.
Artıları
- Çok hızlı ve hafif, üretim hattına kolay entegre edilebilir
- Basit API, düşük bellek kullanımı
- Açık kaynak ve yaygın kullanım
Eksileri
- Yüksek seviyede yönetim, raporlama veya onay arayüzü sağlamaz
- Dinamik içerik veya animasyonları ele almak için ek mantık gerekebilir
Kimler için? Hız ve performans ön plandaysa ve kendi pipeline'ını kuracak ekipler için.
Hangisini Seçmelisin?
- Durum: Basit, config‑tabanlı görsel karşılaştırma ve self‑hosted süreç istiyorsun => BackstopJS
- Durum: E2E + görsel testleri tek bir araçta toplamak istiyorsun => Playwright
- Durum: PR/branch bazlı görsel onay iş akışı ve ekip incelemesi önemliyse => Percy
- Durum: Yanlış pozitifleri azaltmak ve görsel öğe düzeyinde analiz istiyorsan => Applitools
- Durum: Kendi diff motorunu ve pipeline'ını inşa etmek istiyorsun => Resemble.js veya Pixelmatch
- Durum: Performans kritik, hafif bir piksel karşılaştırma arıyorsan => Pixelmatch
Sıkça Sorulan Sorular
Visual regression ile piksel karşılaştırma arasındaki fark nedir?
Piksel karşılaştırma iki görüntüyü pikseller düzeyinde kıyaslarken visual regression testleri genellikle bu karşılaştırmayı test süreci, snapshot yönetimi ve CI entegrasyonu ile birleştirir; ayrıca görsel AI kullanan platformlar anlamlı değişiklikleri ayırt etmeye çalışır.
Hangi araçlar CI/CD ile kolay entegre olur?
BackstopJS, Playwright ve Pixelmatch gibi açık kaynak araçlar CI pipeline'larına doğrudan eklenebilir; Percy ve Applitools ise hosted servis oldukları için resmi entegrasyonlar ve dashboard imkânı sunar.
Dinamik içerik veya animasyonlarda yanlış pozitifleri nasıl azaltırım?
Ekran görüntüsünde değişiklik üreten dinamik bölgeleri maskelemek, belirli bekleme stratejileri kullanmak veya tolerans eşiklerini artırmak yanlış pozitifleri azaltır. AI destekli platformlar da bağlamsal farklılıkları daha iyi ayırabilir.
Self‑hosted mi, hosted mi tercih etmeliyim?
Küçük projeler veya açık kaynak projeleri için self‑hosted (BackstopJS + Pixelmatch/Resemble.js) maliyet ve kontrol avantajı sunar. Ekip içi onay akışları, saklama ve analiz kolaylığı istiyorsan hosted çözümler (Percy, Applitools) daha az operasyonel yük getirir; ücretsiz planda sınırlamalar olabileceğini unutma.
Görsel testler hangi sıklıkla çalıştırılmalı?
Genellikle PR seviyesinde veya ana entegrasyon pipeline'larında snapshot karşılaştırmaları yapılır. Kritik görsel değişiklikler için PR zamanı, düzenli regresyon kümesi için nightly job veya gün içerisindeki belirli tetikleyiciler tercih edilebilir.
Bu rehber, front‑end QA hattına görsel testleri eklemek isteyen öğrenci, serbest çalışan veya küçük ekipler için pratik bir başlangıç sunuyor. Hangi aracı seçeceğin proje ihtiyaçlarına, otomasyon seviyene ve ekip içi onay süreçlerine bağlıdır; küçük bir prototip kurup sonuçlara göre ilerlemek genellikle en risksiz yol olur.
