Skip to main content

Ekran Görüntüsü Yakalamaları ile Görsel Regresyon Testi

Geliştirici ekipleri, birim testlerinin gözden kaçırdığı türden hataları — düzen bozulmaları, font hataları, eksik ikonlar, bozuk responsive durumları — yakalamak için Webshot kullanır. Staging ortamının görüntüsünü alın, production ortamının görüntüsünü alın, ikisini karşılaştırın. Değişikliğinizin güvenli olduğunu (veya yeni bir hatanın ortaya çıktığını) kanıtlamak için karşılaştırma sonucunu bir PR yorumuna ekleyin.

🖥️ Masaüstü tam sayfa (PNG, net karşılaştırmalar) 📱 Mobil tam sayfa ⚙️ Bunun yerine ücretsiz API'yi kullanın

Tüm butonlar, ekran görüntüsü alma formunu önceden yapılandırılmış olarak açar. Sayfa yüklendikten sonra formatı ve viewport'u değiştirebilirsiniz.

Bunun için neden Webshot

Piksel hassasiyetinde görüntüler

PNG modu, net metinleri ve kenarları korur — JPG sıkıştırma gürültüsünün yanlış pozitifler yaratacağı piksel karşılaştırma araçları (`pixelmatch`, ImageMagick `compare`) için idealdir.

Her seferinde aynı viewport

Webshot, her çalıştırmada tam olarak aynı viewport, kaydırma konumu ve font yükleme bekleme süresinde görüntü alır — bu sayede karşılaştırma sonuçları güvenilirdir.

API dostu

Ücretsiz Webshot API'sini CI'ınıza bağlayın: dağıtım öncesi ve sonrası görüntü alın, `pixelmatch` ile karşılaştırın, değişen piksel sayısı eşiği aşarsa build'i başarısız kılın.

Headless-Chrome kurulum derdi yok

Puppeteer kurulumunu, font yüklemeyi, sandbox flag'lerini atlayın. Webshot tüm bunları kendi altyapımızda çalıştırır. CI'ınız sadece bir HTTP çağrısı yapar.

Görsel regresyon testi için nasıl ekran görüntüsü alınır

  1. İzlemek istediğiniz sayfaları seçin — ana sayfa, önemli açılış sayfaları, ödeme akışı, bir regresyonun zarar vereceği herhangi bir yer.
  2. Mevcut production görünümünüzü temel almak için her birini PNG + masaüstü tam sayfa + mobil tam sayfa olarak yakalayın.
  3. Bir sonraki dağıtımdan sonra, aynı URL'leri tekrar yakalayın. Eski ve yeniyi `pixelmatch` veya ImageMagick ile karşılaştırın — %1'den fazla piksel değişikliği insan tarafından incelenmeyi hak eder.
  4. Bunu CI'a bağlayın: dağıtım öncesi bir hook staging'i, dağıtım sonrası bir hook production'ı yakalar ve fark eşiğinizi aşarsa build başarısız olur.

Sıkça sorulan sorular

CI'da headless Chrome kullanmak, Chromium, fontlar ve sandbox kernel flag'lerini kurmayı ve hepsini güncel tutmayı gerektirir. Webshot ile kurulumu tamamen atlarsınız — CI'ınız API'mize bir HTTP çağrısı yapar ve bir PNG dosyası alır. Chrome güncellemeleri, font önbellekleme ve SSRF korumasıyla biz ilgileniriz.

Evet, PNG formatı, aynı viewport ve aynı bekleme stratejisini kullandığınızda kararlıdır. Webshot, viewport boyutunu sabitler ve `prefers-reduced-motion` sorgusuyla bildirilen animasyonların yanı sıra fonts.ready ve network-idle durumlarını bekler. Rastgele animasyonlar (lottie döngüleri, Date.now() arka planları) her çalıştırmada farklı sonuçlar verir; bunları test ortamınızda dondurun.

Tek bir çağrıda olmaz — her URL'yi ayrı ayrı yakalayıp farklı bir kütüphane ile karşılaştırmanız gerekir. API'yi ekran görüntüsü yakalamaya odaklı tutuyoruz; karşılaştırma işlemi 30 satırlık bir script'tir. Örnek kod için `/developers` sayfasına bakın.

Evet. Webshot, ekran görüntüsü almadan önce network-idle (500ms boyunca istek olmaması) ve fonts.ready durumlarını bekler, bu sayede React, Vue, Svelte ve Next.js uygulamaları ekran görüntüsü alınmadan önce tamamen render edilir. Hiçbir zaman network-idle durumuna ulaşmayan siteler için (long polling, websocket'ler), API aracılığıyla bir `maxWait` parametresi geçirebilirsiniz.

Ücretsiz genel form IP başına 15 dakikada 5 ekran görüntüsü ile sınırlıdır — bu CI için çok düşüktür. Ücretsiz API katmanı daha cömerttir; `/developers` sayfasına bakın. Yüksek hacimli regresyon testleri (build başına 50+ ekran görüntüsü) için, ticari API planı IP başına limitleri kaldırır.

Webshot'ın kendisi sadece ekran görüntüsü alır — karşılaştırma katmanını siz sağlarsınız. İki satırlık çözüm: `npx pixelmatch baseline.png new.png diff.png`. Veya yönetilen bir görsel karşılaştırma hizmeti (Percy, Chromatic, BackstopJS) kullanabilir ve Webshot’ın PNG'lerini bu hizmetlere besleyebilirsiniz.

Ekran görüntüsü almaya hazır mısınız?

Ücretsiz, kayıt yok, filigran yok. Sadece bir URL yapıştırın.

📸 Ekran görüntüsü alma formunu aç

Diğer kullanım alanları: Google Haritalar Ekran Görüntüleri · WordPress Ekran Görüntüleri · Açılış Sayfası QA · Yasal Kanıt Ekran Görüntüleri · Sosyal Medya Ekran Görüntüleri · Geliştirici İş Akışı Ekran Görüntüleri · Tümünü gör →

Share: 𝕏 Twitter Facebook LinkedIn