Test di regressione visiva
Cos'è il test di regressione visiva, come il confronto di screenshot individua i bug dell'interfaccia e insidie comuni.
Il test di regressione visiva è un metodo di test automatico che individua modifiche non intenzionali all'aspetto di un'interfaccia utente. Cattura screenshot di pagine o componenti, li confronta con immagini di riferimento approvate e segnala ogni differenza oltre una soglia definita, perché venga revisionata.
I test funzionali verificano che un pulsante funzioni. I test visivi verificano che appaia ancora corretto: posizione, colore, dimensione, font e spaziatura. Una modifica CSS in un file condiviso può spostare i layout di molte pagine, e i test visivi rendono visibili questi effetti collaterali prima del rilascio. I team li eseguono nella continuous integration, spesso con Playwright, plugin basati su Cypress o servizi dedicati di test visivo.
Come funziona il test di regressione visiva
- Renderizza ogni pagina o componente in un browser controllato a dimensioni di viewport fisse.
- Cattura gli screenshot e memorizzali come baseline dopo la revisione.
- A ogni modifica, cattura di nuovo nelle stesse condizioni.
- Confronta le nuove immagini con le baseline e produci immagini di differenza.
- Un revisore accetta le modifiche intenzionali, che diventano nuove baseline, oppure corregge i bug.
Dove si usa il test di regressione visiva
- Design system e librerie di componenti.
- Siti di marketing con molti template.
- Web app con aggiornamenti frequenti di CSS o delle dipendenze.
- Verifiche tra browser su Chromium, Firefox e WebKit.
Differenza di pixel e differenza percettiva
Una differenza di pixel confronta i valori di colore in ogni posizione e conta le discrepanze. È esatta, ma sensibile all'antialiasing e al rendering dei font. Una differenza percettiva, come un confronto basato su SSIM, misura le variazioni di struttura e di contrasto nel modo in cui le noterebbe uno spettatore, il che riduce i falsi allarmi. Molti strumenti combinano la differenza di pixel con una tolleranza e con regioni mascherate.
Errori comuni
- Eseguire le baseline su un sistema operativo e i confronti su un altro, il che cambia il rendering dei font.
- Lasciare date, annunci o animazioni nell'area catturata.
- Accettare le differenze senza guardarle, trasformando i bug in baseline.
- Testare una sola dimensione di viewport.
Ripeti gli stessi screenshot più volte?
Per i controlli visivi manuali senza una suite di test, Temposhot Website Capture cattura un elenco di URL a dimensioni di dispositivo fisse, e lo Compare Images evidenzia le differenze tra due catture. Vedi automazione degli screenshot di siti web.
Domande frequenti
Il test di regressione visiva sostituisce i test funzionali?
No. Verifica l'aspetto. I test funzionali continuano a verificare il comportamento.
Come riduco i falsi positivi?
Blocca i contenuti dinamici, usa lo stesso ambiente per ogni esecuzione e maschera le regioni che cambiano di proposito.
Fonti
Risorse correlate
- Confronta immagini: confronta due screenshot nel browser.
- Opzioni di Website Capture: impostazioni di dispositivo e attesa.
- Esecuzioni e risultati: verifica un'esecuzione di cattura.
Ripeti sempre gli stessi screenshot?
Temposhot cattura a intervalli di tempo una schermata, una finestra o un'area e esporta il set come PDF, immagini, ZIP o MP4. Gli strumenti gratuiti online gestiscono le singole immagini.
Risorse correlate
Termini correlati
- Confronto di screenshotCos'è il confronto di screenshot, come funziona il confronto visivo delle differenze e dove i team lo usano per il QA.
- PlaywrightCos'è Playwright, come cattura screenshot su più browser e come si confronta con Puppeteer per l'automazione.
- Browser headlessCos'è un browser headless, come si usa per gli screenshot automatici ed errori comuni da evitare.
- Screenshot prima e dopoCome funzionano le coppie di screenshot prima e dopo, dove si usano e come catturare confronti efficaci.
- Screenshot responsiveCosa sono gli screenshot responsive, le dimensioni del viewport più usate ed errori da evitare quando si cattura su più dispositivi.