Test di regressione visiva

Test di regressione visiva con BackstopJS.

Chiunque lavori con il testing o lo sviluppo, ha sicuramente compreso l’importanza dei test au t eseguiti durante lo sviluppo. Indipendentemente dalla tua esperienza, questa percezione verrà da te nel tempo.
Questo articolo non è una panoramica dei test automatici. Si occupa di uno in particolare, relativamente noto come test di regressione visiva.
Il test di regressione visiva ha un approccio alternativo per testare le pagine web. Invece di assicurarsi che sia presente un elemento o un valore di testo, il test apre effettivamente la pagina e verifica se quel blocco specifico appare esattamente come desideri che appaia.
Per eseguire questo tipo di test, ci sono una serie di strumenti, ma oggi vi mostrerò un modo molto semplice e veloce per eseguire test visivi, utilizzando BackstopJS.

Che cos’è BackstopJS?

BackstopJS è un’applicazione per test di regressione visiva che coinvolge CasperJS , PhantomJS e ResembleJS in un progetto di test. Sono molto facili da installare e configurare per eseguire test su vari URL e schermi di dimensioni diverse.
BackstopJS acquisisce uno screenshot che verrà archiviato come immagine di base per riferimento futuro. Ogni volta che cambi qualcosa sul sito web ed esegui di nuovo BackstopJS, acquisisce un nuovo screenshot e lo confronta con l’immagine originale. Se non ci sono differenze tra le immagini, il test restituirà “superato” , ma se le immagini non corrispondono, il test restituirà “non riuscito” e verrà generata una nuova immagine, che mostra la differenza tra le due immagini.
Questo è uno strumento perfetto per testare le modifiche negli ambienti di omologazione e di produzione.
I test BackstopJS sono basati su diversi componenti chiave, ma per questo test useremo solo due:

BackstopJS e CasperJS

“Per eseguire i test sulla tua macchina, NodeJS deve essere installato.”
Installazione di BackstopJS

npm install Backstopjs –g
npm install Casperjs –g

“Raccomando l’installazione globale di BackstopJS e CaserJS sulla tua macchina, che renderà più facile eseguire i test.”

Creazione di un progetto di prova
Crea una cartella My_Projetct con alcuni contenuti di esempio che ho allegato a Codepen, esporta la pagina come .zip sul tuo computer e decomprimila.
Link_Codepen: https://codepen.io/Vilariano/pen/BweJJq

Quindi, per configurare Backstop nel tuo progetto, devi aprire la cartella del progetto nel prompt dei comandi ed eseguire il seguente comando:

Backstop init

Questo comando creerà una cartella chiamata backstop_data e genererà uno script backstop.json. Qui è dove inseriremo i comandi per i test.

Configurazione di package.json

Apri il file Backstop.json nel tuo editor preferito (nel mio caso, userò Sublime Text).
Per prima cosa iniziamo definendo le dimensioni delle nostre finestre di visualizzazione di prova, modificando Larghezza e Altezza.
Sostituisci le seguenti definizioni nel tuo file Backstop.json:

“viewports”: [
{
“label”: “Phone”,
“width”: 960,
“height”: 480
},
{
“label”: “Tablet_A”,
“width”: 660,
“height”: 480
},
{
“label”: “Tablet_B”,
“width”: 460,
“height”: 480
},
{
“label”: “Desktop”,
“width”: 1024,
” altezza “: 768
}
],

Quindi configureremo il nostro scenario di test. In questa parte, avremo bisogno di 5 definizioni per avviare i test, da cui sono:

“label”: “”, – Qui fornisco una descrizione per il mio test (nel mio caso, utilizzo il telefono, il tablet il desktop).
“url”: “”, – Qui definisci l ‘”url” di destinazione (come nostro test e posizione useremo index.html).
“referenceUrl”: “”, – Qui definisci l’ “url” riferimento (come nostro test e posizione useremo index.html).
“selettori”: [], – Qui devi fare la seguente definizione: “selettori”: [“html”] ,.
Quindi dici a Backstop che vuoi che faccia uno screenshot di tutti i ” Pagina HTML “. Puoi anche impostarlo per acquisire uno screenshot solo del piè di pagina o del menu. In questo caso, vogliamo che catturi l’intero schermo. Quindi il nostro scenario di test sarà simile a questo:
“scenarios”: [
{
“label”: “Phone, Tablet the Desktop”,
“cookiePath”: “backstop_data / engine_scripts / cookies.json “,
” url “:” index.html “,
” referenceUrl “:” index.html “,
” readyEvent “:” “,
” readySelector “:” “,
“Delay”: 0,
“hideSelectors”: [],
“removeSelectors”: [],
“hoverSelector”: “”,
“clickSelector”: “”,
“PostInteractionWait”: “”,
“selettori”: [“html”],
“selectorExpansion”: true,
“misMatchThreshold”: 0.1,
“requireSameDimensions”: true
}
],

Avvio dei test.

Per eseguire il test avrai solo bisogno di 2 comandi, vale a dire:
Riferimento backstop: questo comando acquisirà uno screenshot da utilizzare come riferimento per il confronto.
Test backstop – Questo comando esegue il test che abbiamo configurato in File Backstop.json.
Esecuzione del primo comando (riferimento Backstop):


Il risultato dovrebbe essere simile alle schermate sopra!
Successivamente eseguiremo il 2 ° comando (test Backstop). Questo comando eseguirà il test che hai configurato nel file Backstop.json, ovvero aprirà la pagina index.html nel browser, prenderà uno screenshot e lo confronterà con i file di riferimento che abbiamo preso durante l’esecuzione il comando di riferimento Backstop. Quando Backstop termina il test, genererà automaticamente e aprirà nel tuo browser un file chiamato BackstopJS report, per mostrare la differenza. Andiamo?


Rapporto BackstopJS:

Ok, il nostro test è passato magnificamente.
È stato superato perché non abbiamo apportato modifiche alla pagina, quindi c’era una differenza.
Allora facciamolo?
Quello che faremo è semplice.
Andiamo allinea il nome “Agnaldo Vilariano” in alto, allinea il nome “Sezione News” al centro e allinea il nome “Agnaldo Vilariano” a piè di pagina a destra.
Per farlo aggiungiamo:
un text-align: left; alla classe .top.
un text-align: center; all’interno dell’H2 che si trova all’interno dell’ID # row2.
a text-align: right; alla classe .footer.

Ora che abbiamo causato un errore, eseguiremo di nuovo il test?
Per farlo, basta eseguire di nuovo il comando Backstop test.


Questa volta il test è fallito!

Ciò è accaduto perché abbiamo apportato modifiche, ovvero abbiamo causato errori. E, quando ha effettuato il confronto con il file di riferimento, ha trovato i difetti che abbiamo causato, come mostrato nel Rapporto:

È tutto, ragazzi! Quello che abbiamo fatto è stato un riesame visivo , ovvero un test di regressione visiva.
Ci sono molti strumenti per eseguire questo tipo di test, ma io uso BackstopJS perché è molto semplice e che gli altri sul mercato, con esso non ho bisogno di molte integrazioni, esegui solo due installazioni e configura il mio file “.Json” in modo che risponde ai suoi test ed esegue un comando in CMD , semplice.
Non esitate a farmi domande. Lascia il tuo commento o scrivimi sui social media.

Le mie fonti di ricerca:

https://css-tricks.com/automating-css-regression-testing/
https://github.com/garris/BackstopJS
https://garris.github.io/BackstopJS/

Valeew!