Skip to main content

Visual Regression Testing Gamit ang mga Screenshot Capture

Ginagamit ng mga dev team ang Webshot para mahuli ang mga bug na hindi nakikita ng mga unit test — mga sira sa layout, font fallbacks, nawawalang icon, at sirang responsive state. I-capture ang staging, i-capture ang production, at paghambingin ang dalawa. Ilagay ang diff sa isang PR comment bilang patunay na ligtas ang iyong pagbabago (o patunay na may bagong bug na lumitaw).

🖥️ Buong pahina sa Desktop (PNG, malinaw na diffs) 📱 Buong pahina sa Mobile ⚙️ Gamitin na lang ang libreng API

Bubuksan ng lahat ng button ang capture form na naka-pre-configure. Maaari mong baguhin ang format at viewport kapag nag-load na ang pahina.

Bakit Webshot para dito

Mga capture na tumpak sa bawat pixel

Pinapanatili ng PNG mode ang linaw ng teksto at mga gilid — perpekto para sa mga pixel-diffing tool (`pixelmatch`, ImageMagick `compare`) kung saan ang ingay mula sa JPG compression ay maaaring magdulot ng mga false positive.

Parehong viewport sa bawat pagkakataon

Nagka-capture ang Webshot sa eksaktong parehong viewport, posisyon ng scroll, at oras ng paghihintay sa pag-load ng font sa bawat run — kaya maaasahan ang mga resulta ng diff.

Madaling gamitin sa API

Ikonekta ang libreng Webshot API sa iyong CI: mag-capture bago mag-deploy at pagkatapos mag-deploy, i-diff gamit ang `pixelmatch`, at i-fail ang build kung ang mga nagbagong pixel ay lumampas sa threshold.

Walang boilerplate para sa headless Chrome

Laktawan ang pag-setup ng puppeteer, pag-install ng font, at mga sandbox flag. Tumatakbo na ang lahat ng iyan sa aming imprastraktura. Ang iyong CI ay gagawa na lang ng isang HTTP call.

Paano mag-capture para sa visual regression testing

  1. Piliin ang (mga) pahina na gusto mong subaybayan — homepage, mahahalagang landing page, proseso ng checkout, o kahit saan na makakasama ang isang regression.
  2. I-capture ang bawat isa sa PNG + desktop_full + mobile_full para maging baseline ng kasalukuyang itsura ng iyong production.
  3. Pagkatapos ng iyong susunod na deploy, i-capture muli ang parehong mga URL. Paghambingin ang luma at bago gamit ang `pixelmatch` o ImageMagick — anumang pagbabago na > 1% sa mga pixel ay nangangailangan ng pagsusuri ng tao.
  4. Isama ito sa CI: isang pre-deploy hook ang magka-capture sa staging, isang post-deploy hook ang magka-capture sa production, at magpe-fail ang build kung lumampas sa iyong threshold ang diff.

Mga madalas itanong

Ang paggamit ng headless Chrome sa CI ay nangangahulugang kailangan mong i-install ang Chromium, mga font, mga sandbox kernel-flag, at panatilihing updated ang lahat. Sa Webshot, hindi mo na kailangang mag-install — ang iyong CI ay gagawa lang ng HTTP call sa aming API at makakatanggap ng PNG. Kami na ang bahala sa mga update ng Chrome, font caching, at proteksyon laban sa SSRF.

Oo, kung gagamit ka ng PNG + parehong viewport + parehong wait strategy. Tinitiyak ng Webshot ang parehong laki ng viewport at naghihintay para sa fonts.ready + network-idle + anumang animation na idineklara sa pamamagitan ng `prefers-reduced-motion` query. Ang mga random na animation (lottie loops, Date.now() backgrounds) ay magkakaroon ng iba't ibang diff sa bawat run; i-freeze ang mga iyon sa iyong test environment.

Hindi sa isang tawag lang — kailangan mong i-capture ang bawat URL nang hiwalay, pagkatapos ay i-diff ang mga ito gamit ang isang hiwalay na library. Pinapanatili naming nakatuon ang API sa pag-capture; ang diffing ay isang 30-line na script lang. Tingnan ang /developers para sa halimbawang code.

Oo. Naghihintay ang Webshot para sa network-idle (walang request sa loob ng 500ms) at fonts.ready bago mag-capture, kaya't ang mga app na gawa sa React, Vue, Svelte, at Next.js ay ganap na nagre-render bago ang screenshot. Para sa mga site na hindi umaabot sa network-idle (long polling, websockets), maaari kang magpasa ng `maxWait` parameter sa pamamagitan ng API.

Ang libreng pampublikong form ay may limit na 5/15-min bawat IP — masyadong mababa para sa CI. Mas maluwag ang libreng API tier; tingnan ang /developers. Para sa high-volume na regression testing (50+ capture bawat build), tinatanggal ng commercial API plan ang mga cap sa bawat IP.

Ang Webshot mismo ay para lang sa pag-capture — ikaw ang magbibigay ng diffing layer. Solusyon na may dalawang linya: `npx pixelmatch baseline.png new.png diff.png`. O gumamit ng isang managed visual-diff service (Percy, Chromatic, BackstopJS) at iproseso sa kanila ang mga PNG mula sa Webshot.

Handa nang mag-capture?

Libre, walang signup, walang watermark. Mag-paste lang ng URL.

📸 Buksan ang capture form

Iba pang paraan ng paggamit: Mga Screenshot ng Google Maps · Mga Screenshot ng WordPress · QA ng Landing Page · Mga Screenshot para sa Legal na Ebidensya · Mga Screenshot ng Social Media · Mga Screenshot para sa Workflow ng Developer · Tingnan lahat →

Share: 𝕏 Twitter Facebook LinkedIn