Skip to main content

Pengujian Regresi Visual dengan Tangkapan Screenshot

Tim pengembang memakai Webshot untuk menangkap bug yang lolos dari unit test — layout yang berantakan, fallback font, ikon yang hilang, tampilan responsif yang rusak. Tangkap staging, tangkap produksi, bandingkan keduanya. Sematkan hasil diff-nya di komentar PR sebagai bukti bahwa perubahan Anda aman (atau bukti bahwa bug baru baru saja muncul).

🖥️ Desktop halaman penuh (PNG, diff tajam) 📱 Seluler halaman penuh ⚙️ Gunakan API gratis saja

Semua tombol membuka formulir tangkapan dengan konfigurasi siap pakai. Anda bisa mengubah format dan viewport setelah halaman termuat.

Kenapa Webshot untuk ini

Tangkapan presisi piksel

Mode PNG menjaga teks dan tepi tetap tajam — ideal untuk alat pixel-diffing (`pixelmatch`, ImageMagick `compare`) di mana noise kompresi JPG akan memicu positif palsu.

Viewport yang sama setiap kali

Webshot menangkap dengan viewport, posisi scroll, dan waktu tunggu pemuatan font yang persis sama pada setiap eksekusi — hasil diff pun tepercaya.

Ramah API

Sambungkan API Webshot gratis ke CI Anda: tangkap sebelum deploy dan sesudah deploy, bandingkan dengan `pixelmatch`, gagalkan build jika piksel yang berubah > ambang batas.

Tanpa boilerplate Chrome headless

Lewati setup puppeteer, instalasi font, dan flag sandbox. Webshot menjalankan semua itu di infrastruktur kami. CI Anda cukup melakukan panggilan HTTP.

Cara melakukan pengujian regresi visual

  1. Pilih halaman yang ingin Anda pantau — beranda, landing page utama, alur checkout, atau bagian mana pun yang akan terasa dampaknya bila terjadi regresi.
  2. Tangkap masing-masing sebagai PNG + desktop_full + mobile_full untuk menjadikan tampilan produksi Anda saat ini sebagai baseline.
  3. Setelah deploy berikutnya, tangkap URL yang sama sekali lagi. Bandingkan lama vs baru dengan `pixelmatch` atau ImageMagick — apa pun yang > 1% piksel berubah layak ditinjau manusia.
  4. Sambungkan ke CI: hook pra-deploy menangkap staging, hook pasca-deploy menangkap produksi, dan build gagal bila diff melampaui ambang batas Anda.

Pertanyaan yang sering diajukan

Menjalankan Chrome headless di CI berarti Anda harus memasang Chromium, font, dan flag kernel untuk sandbox, lalu terus memperbaruinya. Dengan Webshot, Anda melewatkan seluruh proses instalasi itu — CI Anda cukup melakukan panggilan HTTP ke API kami dan langsung menerima PNG. Kami yang mengurus pembaruan Chrome, caching font, dan proteksi SSRF.

Ya, selama Anda memakai PNG + viewport yang sama + strategi tunggu yang sama. Webshot mengunci ukuran viewport dan menunggu fonts.ready + network-idle + animasi apa pun yang dideklarasikan lewat query `prefers-reduced-motion`. Animasi acak (loop lottie, latar berbasis Date.now()) akan menghasilkan diff berbeda setiap kali dijalankan; bekukan hal-hal itu di lingkungan pengujian Anda.

Tidak dalam satu panggilan — Anda menangkap tiap URL secara terpisah, lalu membandingkannya dengan library tersendiri. Kami sengaja menjaga API tetap fokus pada penangkapan; proses diffing hanyalah skrip 30 baris. Lihat `/developers` untuk contoh kodenya.

Ya. Webshot menunggu network-idle (tidak ada request selama 500ms) dan fonts.ready sebelum menangkap, sehingga aplikasi React, Vue, Svelte, dan Next.js sudah ter-render penuh sebelum tangkapan diambil. Untuk situs yang tidak pernah mencapai network-idle (long polling, websocket), Anda bisa memberikan parameter `maxWait` lewat API.

Formulir publik gratis dibatasi 5 per 15 menit per IP — terlalu sedikit untuk CI. Tingkat API gratis jauh lebih longgar; lihat `/developers`. Untuk pengujian regresi volume tinggi (50+ tangkapan per build), paket API komersial menghapus batasan per-IP.

Webshot sendiri hanya menangkap — lapisan diffing-nya Anda yang sediakan. Solusi dua baris: `npx pixelmatch baseline.png new.png diff.png`. Atau gunakan layanan visual-diff terkelola (Percy, Chromatic, BackstopJS) dan masukkan PNG dari Webshot ke dalamnya.

Siap menangkap?

Gratis, tanpa pendaftaran, tanpa watermark. Cukup tempel sebuah URL.

📸 Buka formulir tangkapan

Kasus penggunaan lainnya: Screenshot Google Maps · Screenshot WordPress · QA Landing Page · Screenshot Bukti Hukum · Screenshot Media Sosial · Screenshot Alur Kerja Pengembang · Lihat semua →

Share: 𝕏 Twitter Facebook LinkedIn