Skip to main content

Ujian Regresi Visual dengan Tangkapan Skrin

Pasukan pembangun menggunakan Webshot untuk menangkap pepijat yang terlepas oleh ujian unit — reka letak rosak, fon sandaran, ikon hilang, keadaan responsif yang pecah. Tangkap laman staging, tangkap laman produksi, bandingkan kedua-duanya. Letakkan perbezaan dalam komen PR sebagai bukti perubahan anda selamat (atau bukti pepijat baharu baru sahaja muncul).

🖥️ Halaman penuh Desktop (PNG, perbezaan jelas) 📱 Halaman penuh Mudah Alih ⚙️ Gunakan API percuma

Semua butang membuka borang tangkapan yang telah diprakonfigurasi. Anda boleh menukar format dan viewport selepas halaman dimuatkan.

Mengapa Webshot untuk ini

Tangkapan tepat-piksel

Mod PNG mengekalkan teks dan bucu yang tajam — sesuai untuk alat perbandingan piksel (`pixelmatch`, ImageMagick `compare`) di mana hingar mampatan JPG akan menghasilkan positif palsu.

Viewport yang sama setiap kali

Webshot menangkap pada viewport, kedudukan skrol, dan masa menunggu muatan fon yang sama setiap kali — hasil perbandingan adalah boleh dipercayai.

Mesra API

Sambungkan API Webshot percuma ke CI anda: tangkap sebelum dan selepas pengerahan, bandingkan dengan `pixelmatch`, gagalkan binaan jika piksel-berubah > ambang.

Tiada templat boilerplate headless-Chrome

Langkau persediaan puppeteer, pemasangan fon, bendera sandbox. Webshot menjalankan semua itu pada infrastruktur kami. CI anda hanya perlu membuat panggilan HTTP.

Cara menangkap untuk ujian regresi visual

  1. Pilih halaman yang ingin anda pantau — laman utama, halaman pendaratan utama, aliran daftar keluar, di mana-mana sahaja regresi boleh menjejaskan.
  2. Tangkap setiap satu dalam format PNG + desktop_penuh + mudah alih_penuh untuk menetapkan garis dasar rupa produksi semasa anda.
  3. Selepas pengerahan seterusnya, tangkap URL yang sama sekali lagi. Bandingkan yang lama dengan yang baharu menggunakan `pixelmatch` atau ImageMagick — sebarang perubahan > 1% piksel patut disemak oleh manusia.
  4. Sambungkannya ke dalam CI: cangkuk pra-pengerahan menangkap laman staging, cangkuk pasca-pengerahan menangkap laman produksi, dan binaan akan gagal jika perbezaan melebihi ambang anda.

Soalan lazim

Headless Chrome dalam CI bermakna perlu memasang Chromium, fon, bendera kernel sandbox, serta sentiasa mengemas kininya. Dengan Webshot anda boleh langkau pemasangan sepenuhnya — CI anda hanya membuat panggilan HTTP ke API kami dan menerima fail PNG. Kami uruskan kemas kini Chrome, caching fon, dan perlindungan SSRF.

Ya, apabila anda menggunakan PNG + viewport yang sama + strategi menunggu yang sama. Webshot menetapkan saiz viewport dan menunggu fonts.ready + network-idle + sebarang animasi yang diisytiharkan melalui kueri `prefers-reduced-motion`. Animasi rawak (gelung lottie, latar belakang Date.now()) akan menghasilkan perbezaan setiap kali dijalankan; bekukan animasi tersebut dalam persekitaran ujian anda.

Tidak dalam satu panggilan — anda perlu menangkap setiap URL secara berasingan, kemudian bandingkannya dengan pustaka yang lain. Kami memastikan API tertumpu pada tangkapan; perbandingan hanyalah skrip 30 baris. Lihat `/developers` untuk contoh kod.

Ya. Webshot menunggu network-idle (tiada permintaan selama 500ms) dan fonts.ready sebelum menangkap, jadi aplikasi React, Vue, Svelte, dan Next.js semuanya dipaparkan sepenuhnya sebelum tangkapan skrin. Untuk laman yang tidak pernah mencapai network-idle (long polling, websockets), anda boleh menghantar parameter `maxWait` melalui API.

Borang awam percuma adalah 5/15-minit setiap IP — terlalu rendah untuk CI. Peringkat API percuma lebih murah hati; lihat `/developers`. Untuk ujian regresi volum tinggi (50+ tangkapan setiap binaan), pelan API komersial menyingkirkan had setiap IP.

Webshot sendiri hanya menangkap — anda sediakan lapisan perbandingan. Penyelesaian dua baris: `npx pixelmatch baseline.png new.png diff.png`. Atau gunakan perkhidmatan perbandingan visual terurus (Percy, Chromatic, BackstopJS) dan suapkan fail PNG dari Webshot ke dalamnya.

Sedia untuk menangkap?

Percuma, tiada pendaftaran, tiada tera air. Hanya tampal URL.

📸 Buka borang tangkapan

Kes penggunaan lain: Tangkapan Skrin Google Maps · Tangkapan Skrin WordPress · QA Halaman Pendaratan · Tangkapan Skrin Bukti Guaman · Tangkapan Skrin Media Sosial · Tangkapan Skrin Aliran Kerja Pembangun · Lihat semua →

Share: 𝕏 Twitter Facebook LinkedIn