Confronto tra screenshot

Il confronto tra screenshot consiste nell'affiancare o sovrapporre due o più immagini per individuare differenze visive tra versioni, stati o ambienti.

Related workflow terms: Screenshot prima e dopo, Test di regressione visiva.

Confronto manuale e automatico

Il metodo più semplice è manuale: apri due immagini una accanto all'altra e cerchi le differenze. Funziona per controlli rapidi, come confrontare un modello grafico con la pagina reale oppure esaminare l'interfaccia prima e dopo una modifica.

Su larga scala, il confronto manuale non basta. L'occhio fatica a individuare piccole variazioni di spaziatura, colore o rendering dei font, soprattutto su molte pagine. Ripetere il controllo per ogni pull request o distribuzione non è sostenibile.

Il confronto automatico usa il software per rilevare le differenze. Lo strumento acquisisce uno screenshot di riferimento, ne crea uno nuovo dopo la modifica e li confronta a livello di pixel. Un'immagine diff evidenzia le variazioni, di solito con un colore in contrasto, rendendo visibile anche uno spostamento di un solo pixel.

Dove si usa il confronto tra screenshot

Serve ovunque sia importante mantenere la coerenza visiva:

• Controllo qualità e test — verifica che le modifiche al codice non abbiano introdotto regressioni grafiche in pagine, componenti o breakpoint.
• Revisioni di design — confronta l'interfaccia realizzata con il progetto approvato per individuare scostamenti.
• Test tra browser — controlla che la stessa pagina appaia in modo coerente su Chrome, Firefox, Safari ed Edge.
• Verifiche responsive — confronta una pagina a diverse larghezze del viewport per verificare il comportamento del layout.
• Controllo delle distribuzioni — acquisisce immagini prima e dopo un rilascio per confermare che l'aspetto non sia stato compromesso.

In tutti questi casi, il confronto porta alla luce differenze che potrebbero sfuggire a una revisione manuale.

Come funziona il diff visivo

La maggior parte degli strumenti segue un processo simile:

1. Acquisisce il riferimento — uno screenshot dello stato corretto, creato con una precisa dimensione del viewport e una configurazione nota.
2. Acquisisce la nuova versione — uno screenshot dello stato corrente con gli stessi parametri.
3. Allinea le immagini — verifica che abbiano le stesse dimensioni. Alcuni strumenti compensano piccoli spostamenti, altri richiedono una corrispondenza esatta.
4. Confronta i pixel — calcola la differenza tra i pixel corrispondenti. Gli algoritmi più comuni includono confronto diretto, diff percettivo, che pesa le variazioni secondo la sensibilità visiva umana, e indice di somiglianza strutturale (SSIM).
5. Genera l'immagine diff — evidenzia i pixel cambiati con un colore in contrasto, così le differenze si notano subito.

Di solito puoi regolare la soglia di sensibilità. Una soglia rigorosa rileva ogni variazione subpixel ed è utile per sistemi grafici precisi; una più tollerante ignora piccole differenze di rendering, utile nelle pagine ricche di contenuti dove l'antialiasing può cambiare.

Un buon processo registra insieme alle immagini la modalità di acquisizione: URL, viewport, browser, combinazione di colori e data. Senza questo contesto, il diff è più difficile da interpretare e riprodurre in seguito.

Errori comuni

• Confrontare viewport diversi. Se il riferimento è largo 1440px e il nuovo screenshot 1280px, il diff segnala tutte le variazioni dovute alla larghezza. Usa sempre le stesse dimensioni.
• Usare JPEG. La compressione con perdita genera artefatti leggermente diversi a ogni acquisizione. Due immagini della stessa pagina possono quindi produrre falsi positivi. Usa PNG.
• Ignorare i contenuti dinamici. Orari, annunci, animazioni e dati personali cambiano tra un'acquisizione e l'altra. Maschera o escludi le aree dinamiche note.
• Impostare una soglia troppo permissiva. Una soglia larga può nascondere regressioni reali considerandole rumore. Parti da un confronto rigoroso e riduci la sensibilità soltanto nelle aree variabili note.