Regressione visuale (screenshot diff)

Un classico monitor HTTP dice "il server risponde 200 OK", ma non sa che il file CSS principale non si è caricato e il sito viene visualizzato rotto. Il controllo visivo (in inglese visual regression) acquisisce uno screenshot della pagina e lo confronta con uno screenshot di riferimento (baseline) - rileva i cambiamenti visivi anche quando il server dice che è tutto a posto.

Il controllo visivo è disponibile nei piani Pro e Business.

Come funziona

1. Alla prima attivazione del controllo visivo viene acquisito uno screenshot di riferimento (baseline) - il riferimento con cui si confronta in seguito.
2. A ogni controllo successivo acquisiamo un nuovo screenshot e lo confrontiamo con la baseline pixel per pixel.
3. Se la differenza supera la soglia impostata (5 % per impostazione predefinita), il monitor viene contrassegnato come cambiato e ricevi una notifica.
4. Nel dettaglio del monitor vedi la baseline e lo screenshot attuale uno accanto all'altro, con le aree differenti evidenziate.

Quando usarlo

• Dopo il rilascio di una nuova versione del sito - rileva automaticamente font, CSS o layout rotti
• Per le landing page di marketing - per sapere che il tag GA e gli altri elementi non si sono spostati
• Per gli e-shop - verificare che il pulsante "Aggiungi al carrello" sia ancora visibile
• Per le pagine di stato - per sapere che la tua pagina di stato viene visualizzata correttamente

Configurazione

1. Durante la creazione di un monitor seleziona il tipo Controllo visivo - il primo screenshot viene salvato automaticamente come baseline
2. Nel dettaglio del monitor, nella sezione Controllo visivo, vedi lo screenshot di riferimento, quello attuale e le differenze evidenziate
3. Il limite di cambiamento si imposta con il cursore Limite di cambiamento visivo (da 0,5 a 30 %, 5 % per impostazione predefinita)
4. Dopo ogni rilascio di una nuova versione, aggiorna la baseline con il pulsante Imposta l'attuale come riferimento

Attenzione ai falsi allarmi

• Data e ora sulla pagina - ogni controllo le visualizza in modo diverso. Dopo aver rilasciato un cambiamento del genere, aggiorna sempre la baseline.
• Pubblicità e banner - ruotano tra gli screenshot e spesso causano un falso allarme. Il controllo visivo funziona meglio sulle pagine senza pubblicità.
• Animazioni - il primo e lo screenshot successivo possono differire. Il controllo visivo attende 1,5 secondi dopo il caricamento affinché l'animazione si stabilizzi.