Visual regression (confronto degli screenshot)

5 min di lettura

Il classico monitor HTTP dice "il server risponde 200", ma non sa che il file CSS principale non è stato caricato e il sito appare rotto. La visual regression fa uno screenshot e lo confronta con la baseline - rileva i cambiamenti visivi anche quando il server dice OK.

Come funziona

1. Al primo enable della visual regression viene scattato uno screenshot di baseline (riferimento).
2. A ogni check successivo viene scattato un nuovo screenshot e confrontato pixel per pixel con la baseline.
3. Se la differenza supera la soglia (default 5%), il monitor viene marcato come changed e ricevi un alert.
4. Nel dettaglio del monitor vedi la baseline e lo screenshot attuale affiancati + overlay del diff.

Quando usarla

• Dopo i deploy - rileva automaticamente font, CSS, layout rotti
• Per le landing page di marketing - per sapere che il tag GA non ha perso la posizione
• Per gli e-shop - controllo che il pulsante "Aggiungi al carrello" sia ancora visibile
• Per le status page - per sapere che la propria status page si renderizza

Configurazione

1. Nel dettaglio del monitor vai alla scheda Visual regression
2. Clicca Enable - viene scattata la baseline (10-30 secondi)
3. Opzionalmente imposta la threshold (1-20%, default 5%)
4. Dopo un deploy aggiorna la baseline con Refresh baseline

Attenzione ai falsi positivi

• Data / ora sulla pagina - ogni check le renderizza diversamente. Ignorale, oppure imposta una mask con selettore CSS.
• Pubblicità / banner - ruotano tra i caricamenti. Mask del dominio del provider pubblicitario.
• Animazioni - primo frame vs. successivi. La visual regression attende 2 s dopo il load per dare tempo all'animazione di stabilizzarsi.
• Cookie banner - sempre auto-accettato, ma a volte resta visibile. Aggiungi una regola CSS tramite user-config.