Test di screenshot pixel perfect: perché fallisce e che cosa scopre i veri bug visivi
Il test di screenshot pixel perfect fallisce due volte: il rumore di rendering genera falsi allarmi e una soglia in percentuale nasconde bug reali.Ecco che cosa funziona.
Il test di screenshot pixel perfect confronta ogni pixel di uno screenshot con un'immagine di riferimento.Fallisce due volte: un rumore di rendering innocuo genera falsi allarmi, e una soglia in percentuale abbastanza permissiva da zittirli lascia passare una cifra sbagliata o un'icona mancante.
Che cos'è il test di screenshot pixel perfect?
Definizione
Il test di screenshot pixel perfect è un controllo visivo che confronta un nuovo screenshot con uno screenshot di riferimento, pixel per pixel.
- Ogni pixel il cui colore differisce conta come una differenza.
- Un test fallisce quando ci sono differenze, o più di quante una soglia ne permetta.
È la forma più semplice di test di regressione visiva, e quella da cui parte la maggior parte dei team.
L'idea è giusta: una persona giudica una schermata guardandola, quindi anche un test dovrebbe guardarla.Il problema è la misura.Una schermata non viene disegnata con gli stessi pixel su ogni macchina, e i bug che contano sono spesso grandi solo pochi pixel.
Niente è sbagliato
Qualcosa è sbagliato
Perché il confronto pixel per pixel genera falsi positivi
Un falso positivo è un test che fallisce mentre l'applicazione funziona.In un confronto pixel per pixel, nasce da tutto ciò che cambia dei pixel senza cambiare ciò che una persona vede.
| Fonte di rumore | Perché i pixel differiscono |
|---|---|
| Anti-aliasing | I bordi del testo e delle forme vengono smussati con colori intermedi, e la smussatura cambia da una macchina all'altra. |
| Smussatura dei caratteri | Su Windows, ClearType disegna il testo con leggere frange colorate che dipendono dallo schermo e dalle sue impostazioni. |
| La scheda grafica e il suo driver | Sfumature, ombre e angoli arrotondati possono uscire di una tonalità diversa su un'altra scheda. |
| Registrazione e compressione | Un'immagine di riferimento presa da un video conserva meno dettaglio di colore di quanto mostri lo schermo reale. |
| Uno spostamento di 1 pixel | Una finestra o un layout spostato di un pixel cambia ogni bordo dell'immagine. |
| Un cursore di testo che lampeggia | Il cursore è acceso in uno screenshot e spento nell'altro. |
| Uno stato di passaggio del mouse o di focus | Il puntatore resta su un pulsante in un'esecuzione e non nell'altra, quindi il pulsante è illuminato in una sola immagine. |
| Contenuto dinamico | Una data, un orologio, un contatore o un badge di notifica cambia ogni giorno. |
| Un altro ridimensionamento dello schermo | Un portatile al 150 % e un monitor al 100 % disegnano lo stesso pulsante con altri pixel. |
I test instabili hanno anche altre cause, come le attese e i tempi.Sono trattate in test instabili e falsi positivi.
Perché una soglia nei test di regressione visiva nasconde bug reali
La risposta abituale al rumore è una soglia: lasciar superare il confronto finché differisce meno di una certa quota dell'immagine, spesso l'1 o il 2 %.I falsi allarmi finiscono.I bug reali iniziano a passare.
I bug reali possono essere molto piccoli sullo schermo.
- Una cifra sbagliata in un prezzo o in un totale cambia qualche decina di pixel.
- Una maiuscola diventata minuscola ne cambia qualche decina in più.
- Una piccola icona mancante ne cambia qualche centinaio.
- Su un pannello o su un'intera schermata, ciascuno resta molto sotto l'1 %.
I bug che costano di più sono spesso i più piccoli sullo schermo: una cifra di una fattura, una parola di un'avvertenza legale.
Una quota dell'immagine è la misura sbagliata
Rumore e bug si somigliano quando li si conta su tutta l'immagine.Per una persona non si somigliano.
- Il rumore è ciò che nessuno vede: un bordo più morbido, una sfumatura più chiara, un cursore che ha lampeggiato.
- Un cambiamento vero è ciò che una persona legge o riconosce: una lettera, una cifra, un'icona, un colore.
Atteso
$12,480
Questa esecuzione
$12,430
Misurato come quota dell'immagine
Una cifra è una quota minima del pannello, molto al di sotto di una soglia del 2 %.
Supera: il bug sfugge
Visto con gli occhi di una persona
Una persona che legge il totale vede subito la cifra sbagliata, e così GUI Test Studio.
Fallisce: il bug viene scoperto
La domanda giusta non è quindi quanta parte dell'immagine sia cambiata.È la domanda che si fa una persona: chi guarda questo schermo vedrebbe una differenza?La risposta non dipende dalle dimensioni dell'immagine, quindi vale per una piccola icona e per un'intera finestra di dialogo.
I rimedi abituali ai test di screenshot instabili, e quanto costano
| Rimedio | Quanto costa |
|---|---|
| Alzare la soglia | Il rumore passa, e anche i piccoli bug. |
| Mascherare le parti che cambiano | Ogni data, orologio e badge viene mascherato a mano, e un bug sotto una maschera non viene mai visto. |
| Ripetere un test fallito | Un fallimento reale ottiene una seconda occasione di passare per caso, e ogni esecuzione dura di più. |
| Tenere un'immagine di riferimento per macchina | Ogni browser, sistema e ridimensionamento ha bisogno delle sue immagini, e ognuna va ripresa dopo ogni modifica. |
| Congelare l'ambiente | Un'unica immagine di macchina esegue ogni test, e un test che lì supera non dice nulla degli schermi dei vostri utenti. |
In un framework con codice come Playwright, toHaveScreenshot prende una soglia di colore per pixel e un numero o una quota massima di pixel diversi per l'intera immagine.Siete voi a scegliere quei numeri, scrivere le maschere e tenere un'immagine di riferimento per browser e piattaforma, in codice che mantenete voi.
Come GUI Test Studio confronta gli screenshot
GUI Test Studio crea test end-to-end di applicazioni web, applicazioni desktop Windows, telefoni Android e giochi a partire da una registrazione, senza codice.Ogni elemento su cui fate clic o in cui digitate riceve un'asserzione visiva, un controllo che conserva una piccola immagine dell'elemento, il suo obiettivo visivo.Vedete le asserzioni visive.
Trovare
La Fase di ricerca
Confrontare
La Fase di verifica
Secondo sguardo
Analisi intelligente con IA
Report
Il Report di affidabilità
Prima, trovare l'elemento
La Fase di ricerca trova l'elemento sullo schermo reale, ovunque si trovi ora.Il GTS Engine + AI chiede prima all'applicazione, tramite le sue informazioni di accessibilità o gli elementi propri della pagina, e trova l'elemento a vista quando l'applicazione non lo dice.Vedete come GUI Test Studio trova ogni elemento.
Il confronto avviene poi dove si trova l'elemento.Una finestra spostata, o un pulsante slittato di un pixel, non è affatto una differenza.
Poi, confrontarlo come lo guarda una persona
La Fase di verifica confronta l'elemento con il suo obiettivo visivo in modo percettivo, come fa l'occhio umano.Nota ciò che una persona noterebbe e ignora ciò che nessuno vede.
| Sullo schermo | Che cosa fa la Fase di verifica |
|---|---|
| Bordi smussati e smussatura dei caratteri | Ignorati: cambiano da una macchina all'altra, e nessuno li vede. |
| Registrazione e compressione | Ignorati: un'immagine presa da un video conserva un po' meno dettaglio di colore dello schermo reale, e una persona vede lo stesso schermo. |
| Uno spostamento di 1 pixel | Ignorato: l'elemento viene confrontato dove si trova ora. |
| Un cursore di testo che lampeggia | Ignorato, mentre una lettera cambiata accanto viene scoperta. |
| Una cifra sbagliata | Scoperto: è ciò che una persona legge per primo. |
| Una maiuscola diventata minuscola | Scoperto: una persona lo vede subito. |
| Un colore cambiato | Scoperto, appena una persona lo noterebbe: un'icona rossa diventata arancione fallisce. |
| Un'icona mancante | Scoperto: una persona vede il vuoto. |
Passaggi del mouse e date
In un test registrato, l'esecuzione rimette il puntatore del mouse dove si trovava quando è stata presa l'immagine.Un pulsante è illuminato nell'esecuzione esattamente quando lo era nella registrazione.
Un valore che cambia ogni giorno non va in un obiettivo visivo.Tenete l'obiettivo sull'elemento stesso, e controllate una data, un totale o un contatore con un'asserzione testuale dinamica, che controlla il suo formato qualunque sia il suo valore.Vedete i controlli del testo.
E quando una schermata appare diversa a ragione in modalità scura, in un'altra lingua o su un altro schermo, tenete una versione attesa per ambiente con un profilo di baseline: vedete testare la modalità scura, altre lingue, altri schermi.
Confronto di pixel contro GUI Test Studio, caso per caso
| La differenza | Un confronto di pixel con una soglia in percentuale | GUI Test Studio |
|---|---|---|
| Bordi smussati su un'altra macchina | Fallisce se rigoroso, supera se permissivo | Supera: nessuno lo vede |
| Frange colorate della smussatura dei caratteri | Fallisce se rigoroso | Supera: nessuno lo vede |
| L'elemento si è spostato di 1 pixel | Fallisce: ogni bordo differisce | Supera: l'elemento viene confrontato dove si trova |
| Un cursore di testo che lampeggia | Fallisce se rigoroso | Supera: un cursore che lampeggia viene ignorato |
| Un'evidenziazione al passaggio del mouse | Fallisce | Supera: il puntatore si trova dove era nella registrazione |
| La data di oggi | Fallisce ogni giorno | Non confrontata: un'asserzione testuale dinamica controlla il suo formato |
| Una cifra sbagliata | Supera una soglia dell'1 o del 2 % | Fallisce: una persona vede la cifra sbagliata |
| Una maiuscola diventata minuscola | Supera una soglia dell'1 o del 2 % | Fallisce: una persona vede la minuscola |
| Una piccola icona mancante | Supera su un'immagine grande | Fallisce: una persona vede che l'icona non c'è più |
Come scegliere la tolleranza di un confronto di immagini
In GUI Test Studio, la tolleranza di un controllo visivo è la sua Severità della verifica, scelta in parole semplici: più severa per i dettagli fini, più tollerante per le schermate piene.Non c'è nessuna percentuale da indovinare.
| Severità della verifica | Da usare per |
|---|---|
| Esatta | Immagini che devono restare esattamente come sono. |
| Rigorosa | Testo piccolo e dettagli fini dove ogni cambiamento conta. |
| Standard | I pulsanti, le etichette e le icone di tutti i giorni.Il valore predefinito. |
| Permissiva | Aree grandi e schermate piene, come un'intera pagina o una scena di gioco. |
- 1
Selezionare il controllo visivo
Aprite il test in GUI Test Studio e fate clic sull'asserzione visiva nella timeline.Le sue impostazioni compaiono nel pannello Proprietà.
- 2
Scegliere una Severità della verifica
Tenete Standard per i pulsanti, le etichette e le icone di tutti i giorni.Scegliete un livello più severo per il testo piccolo e i dettagli fini, uno più tollerante per le aree grandi e le schermate piene, ed Esatta solo per un'immagine che deve restare esattamente com'è.
- 3
Lasciare attivo Ignora i piccoli artefatti di rendering
È attivo per impostazione predefinita, quindi i bordi smussati che differiscono tra le macchine vengono ignorati.Disattivatelo solo quando sono proprio quei bordi ciò che testate.
- 4
Eseguire il test e leggere il report
Fate clic su Esegui test.Il Report di affidabilità evidenzia ciò che è cambiato e dice in una frase perché il controllo è fallito.
- 5
Aggiungere istruzioni per l'IA se una differenza è attesa
In Avanzate, scrivete poche parole come: ignora la dimensione del carattere.L'Analisi intelligente con IA le segue quando giudica quel controllo.
La maggior parte dei test non ha mai bisogno di altro.Le impostazioni esatte di ogni livello, e quelle avanzate per il raro controllo che ne ha bisogno, sono nelle pagine asserzioni visive e impostazioni di un controllo.
Test visivi con l'IA: un secondo sguardo in parole semplici
Un confronto visivo dice che qualcosa è cambiato e dove.Un secondo parere a parole vi aiuta a decidere che cosa farne.È il compito dell'Analisi intelligente con IA, che resta disattivata finché non la attivate.
Il puntatore del mouse e il cursore di testo che lampeggia non contano mai come differenza per l'IA.Un controllo superato non le viene mai inviato.
Funziona con un modello cloud e la vostra chiave, oppure con un modello di IA locale sul vostro computer: uno che forniamo noi, o uno vostro.Alcune differenze sono attese, e solo voi sapete quali: date a un controllo delle istruzioni per l'IA, come "ignora la dimensione del carattere" o "l'icona può essere di qualsiasi colore".Vedete l'Analisi intelligente con IA.
Leggere un fallimento visivo
Dopo un'esecuzione, il Report di affidabilità mostra ogni controllo fallito con l'immagine attesa, l'immagine trovata e ciò che è cambiato evidenziato sullo schermo.Il verdetto dice in una frase che cosa è cambiato e dove.
Quando il cambiamento è voluto, accettate il nuovo aspetto dal report, e da allora il test se lo aspetta.
Quali bug visivi sfuggono del tutto a un controllo con codice è il tema di i bug visivi che i test automatici non vedono.
Punti chiave
- 1Il test di screenshot pixel perfect fallisce due volte: il rumore di rendering fa fallire schermate corrette, e una soglia in percentuale lascia passare bug reali.
- 2Il rumore è ciò che nessuno vede, un cambiamento vero è ciò che una persona nota: una cifra, una lettera, un'icona, un colore.
- 3Una quota dell'immagine è la misura sbagliata. Chiedetevi invece che cosa vedrebbe una persona che guarda lo schermo.
- 4GUI Test Studio trova prima l'elemento, poi lo confronta come fa l'occhio umano, così lo smussamento, la compressione e un cursore che lampeggia non fanno mai fallire un test.
- 5L'Analisi intelligente con IA aggiunge un secondo sguardo in parole semplici, e la sua risposta è il verdetto finale quando la attivate.
Domande
Che cos'è il test pixel perfect?
Il test pixel perfect confronta uno screenshot di un'applicazione con uno screenshot di riferimento, pixel per pixel, e fallisce quando differiscono.Vede ogni cambiamento, anche quelli che nessuno può vedere.Per questo genera falsi allarmi su schermate corrette.
Perché i test di confronto di screenshot falliscono quando non è cambiato niente?
Perché la stessa schermata non viene disegnata ovunque con gli stessi pixel.I bordi smussati, la smussatura dei caratteri, la scheda grafica, il ridimensionamento dello schermo, un cursore di testo che lampeggia o un'evidenziazione al passaggio del mouse cambiano alcuni pixel senza cambiare nulla che una persona noterebbe.Un confronto pixel per pixel li conta tutti.
Qual è una buona soglia per i test di regressione visiva?
Nessuna percentuale va bene per ogni immagine.Una quota abbastanza piccola da scoprire una cifra sbagliata su un grande pannello fallisce su un rumore innocuo, e una abbastanza permissiva da ignorare il rumore lascia passare quella cifra.Fatevi invece la domanda che si fa una persona: chi guarda lo schermo vedrebbe una differenza?È così che confronta GUI Test Studio.
L'anti-aliasing causa falsi positivi nei test visivi?
Sì, è una delle cause più comuni.I bordi del testo e delle forme vengono smussati con colori intermedi, e la smussatura differisce tra macchine, schede grafiche e impostazioni.GUI Test Studio confronta come una persona guarda uno schermo, quindi la smussatura che nessuno vede viene ignorata.
Una soglia di differenza dei pixel può nascondere un bug reale?
Sì.Una cifra sbagliata, una maiuscola diventata minuscola o una piccola icona mancante cambia da qualche decina a qualche centinaio di pixel, una quota minima di un'immagine grande.Una soglia dell'1 o del 2 % li lascia passare tutti.
Come confronta gli screenshot GUI Test Studio?
In due fasi.La Fase di ricerca trova l'elemento sullo schermo, ovunque si sia spostato.La Fase di verifica lo confronta poi con ciò che vi aspettate, come fa l'occhio umano: scopre una cifra sbagliata, una parola cambiata, un'icona mancante o un altro colore, e ignora il rumore di rendering che nessuno vede.
I test visivi con l'IA sono migliori del confronto di pixel?
Funzionano meglio insieme.Un confronto visivo accurato è veloce e ripetibile, e decide da solo la maggior parte dei controlli.In GUI Test Studio, l'Analisi intelligente con IA dà un secondo sguardo solo a un controllo fallito, dice in parole semplici che cosa è cambiato e dà il verdetto finale quando la attivate.
Come gestire date e contatori nei test visivi?
Teneteli fuori dall'immagine che un'asserzione visiva confronta, e controllateli invece con un controllo del testo.Un'asserzione testuale dinamica controlla che un valore abbia il formato giusto, come una data o un importo, qualunque sia il suo valore oggi.
Playwright, ClearType e Windows sono marchi di Microsoft Corporation.
Continua a leggere
Tutti gli articoli
Test visivi
Test della modalità scura, altre lingue, altri schermi: un solo test per tutte le varianti
10 min di lettura
Test visivi
Bug visivi che i test automatici non colgono: testare ciò che vede l'utente
10 min di lettura
Automazione dei test
Test manuali e test automatizzati: perché i test manuali non bastano per i test end-to-end
15 min di lettura