Skip to main content

Test di regressione visiva con cattura di screenshot

I team di sviluppo usano Webshot per intercettare proprio i bug che gli unit test non vedono: layout che si rompono, font di fallback, icone mancanti, stati responsive difettosi. Cattura lo staging, cattura la produzione, confronta la coppia. Allega il diff a un commento nella PR come prova che la tua modifica è sicura (o che il nuovo bug è appena comparso).

🖥️ Desktop pagina intera (PNG, diff nitidi) 📱 Mobile pagina intera ⚙️ Usa invece l'API gratuita

Tutti i pulsanti aprono il form di cattura già preconfigurato. Potrai cambiare formato e viewport una volta caricata la pagina.

Perché scegliere Webshot

Catture precise al pixel

La modalità PNG mantiene testo e contorni perfettamente nitidi — l'ideale per gli strumenti di pixel-diffing (`pixelmatch`, `compare` di ImageMagick), dove il rumore di compressione JPG genererebbe falsi positivi.

Stesso viewport, ogni volta

Webshot cattura sempre con lo stesso identico viewport, la stessa posizione di scroll e lo stesso tempo di attesa per il caricamento dei font — i risultati dei diff sono affidabili.

Pensato per le API

Collega l'API gratuita di Webshot alla tua CI: cattura prima e dopo il deploy, confronta con `pixelmatch` e fai fallire la build se i pixel modificati superano la soglia.

Niente boilerplate di Headless Chrome

Dimentica setup di Puppeteer, installazione dei font e flag della sandbox. Webshot fa girare tutto sulla nostra infrastruttura. La tua CI deve solo fare una chiamata HTTP.

Come eseguire i test di regressione visiva

  1. Scegli la pagina o le pagine da monitorare: homepage, landing page chiave, flusso di checkout, ovunque una regressione farebbe danni.
  2. Cattura ciascuna in PNG + desktop_full + mobile_full per fissare come baseline l'aspetto attuale della produzione.
  3. Dopo il deploy successivo, cattura di nuovo gli stessi URL. Confronta vecchio e nuovo con `pixelmatch` o ImageMagick: qualsiasi variazione superiore all'1% dei pixel merita una revisione umana.
  4. Integralo nella CI: un hook pre-deploy cattura lo staging, un hook post-deploy cattura la produzione, e la build fallisce se il diff supera la soglia impostata.

Domande frequenti

Usare Headless Chrome nella CI significa installare Chromium, i font e i kernel-flag della sandbox, e poi tenere tutto aggiornato. Con Webshot salti del tutto l'installazione — la tua CI fa una chiamata HTTP alla nostra API e riceve indietro un PNG. Ad aggiornamenti di Chrome, cache dei font e protezione SSRF pensiamo noi.

Sì, a patto di usare PNG + stesso viewport + stessa strategia di attesa. Webshot fissa le dimensioni del viewport e attende fonts.ready + network-idle + le eventuali animazioni dichiarate tramite la query `prefers-reduced-motion`. Le animazioni casuali (loop Lottie, sfondi basati su Date.now()) producono un diff diverso a ogni esecuzione: congelale nel tuo ambiente di test.

Non in un'unica chiamata: catturi ogni URL separatamente e poi li confronti con una libreria a parte. Preferiamo tenere l'API concentrata sulla cattura; il diffing è uno script da 30 righe. Trovi il codice di esempio su `/developers`.

Sì. Prima di scattare, Webshot attende il network-idle (nessuna richiesta per 500ms) e fonts.ready, così le app React, Vue, Svelte e Next.js risultano completamente renderizzate al momento dello screenshot. Per i siti che non raggiungono mai il network-idle (long polling, websocket), puoi passare un parametro `maxWait` tramite l'API.

Il form pubblico gratuito consente 5 catture ogni 15 minuti per IP: troppo poche per la CI. Il piano API gratuito è più generoso; vedi `/developers`. Per i test di regressione ad alto volume (50+ catture per build), il piano API commerciale elimina i limiti per singolo IP.

Webshot si occupa solo della cattura — il livello di diffing lo aggiungi tu. Soluzione in due righe: `npx pixelmatch baseline.png new.png diff.png`. In alternativa, usa un servizio gestito di visual diff (Percy, Chromatic, BackstopJS) e dagli in pasto i PNG di Webshot.

Pronto a catturare?

Gratis, senza registrazione, senza watermark. Ti basta incollare un URL.

📸 Apri il form di cattura

Altri casi d'uso: Screenshot di Google Maps · Screenshot di WordPress · QA delle landing page · Screenshot come prova legale · Screenshot per i social media · Screenshot per il workflow di sviluppo · Vedi tutti →

Share: 𝕏 Twitter Facebook LinkedIn