Vergelijk twee omgevingen snel op visuele fouten
Iedereen loopt wel eens tegen dit probleem aan, je hebt aanpassingen aan de testomgeving gedaan en je wilt graag controleren of er onverwachte wijzigingen zijn. Voor een website met minder dan 5 pagina’s is dit geen probleem. Zijn het meer pagina’s dan ben je er veel tijd aan kwijt. Wij hebben een oplossing.
Onze oplossing is BackstopJS. Dit is een tool die enorm handig is om twee omgevingen met elkaar te vergelijken door middel van automatisch gegenereerde screenshots.
Dit is niet alleen handig maar het bespaart ook enorm veel tijd. Je hoeft nu niet meer iedere pagina apart af te gaan. Naast tijd geeft het je ook meer inzicht in wat er visueel fout gaat.
Zoals je in de foto kunt zien, is het enorm gemakkelijk om twee omgevingen te vergelijken met BackstopJS. Maar hoe doen wij dit nou eigenlijk? En hoe doe je dit?
Om BackstopJS te kunnen gebruiken, installeer je NodeJS en NPM. Heb je dit nog niet? In dit artikel lees je hoe je dit programma installeert.
Heb je dit geïnstalleerd dan kunnen we BackstopJS binnenhalen met NPM.Ga naar de terminal en voer het volgende commando uit; npm install -g backstopjs
Dit commando zorgt ervoor dat BackstopJS globaal wordt geïnstalleerd. Maak een mapje aan waarin je kan gaan testen. Om BackstopJS te initialiseren, open je de map met de terminal en voer je het commando backstop init uit. Door dit commando uit te voeren, maakt Backstop de nodige bestanden aan.
Testen
Daarna kan je beginnen met testen. Open het bestand “backstop.json” en je ziet de standaard backstop.json file. Om verschillende pagina’s toe te voegen, kopieer je de inhoud van scenario's. In het voorbeeld zie je hoe dit moet.
Backstop
Staan alle URL’s in de backstop.json file dan kan je de test zelf uitvoeren. Om de test uit te voeren, opent je weer de terminal en voer het commando: backstop reference uit. Zodra je dit commando geeft, maakt Backstop screenshots van de reference url.
Is de reference klaar dan is het tijd om het commando backstop test uit te voeren.
Dit commando maakt screenshots van de url en vergelijkt ze daarna met de screenshots van de reference url. Hieronder staat een voorbeeld hoe het resultaat eruit komt te zien:
Zoals je ziet markeert BackstopJS dingen die anders zijn in het paars. Dit is enorm handig om snel te zien wat het verschil is tussen de twee screenshots.