Met gebruikers op uiteenlopende devices, besturingssystemen, browsers en versies, kan visueel testen een enorme opgave zijn. Het automatiseren van deze testen kan uitkomst bieden, maar hoe gaat dit precies in zijn werk en wat zijn de voor- en nadelen ervan?
Wat is visueel testen?
Simpel gezegd is visueel testen het visueel vergelijken van de huidige situatie met een baseline (geaccepteerde situatie). Een baseline kan op verschillende manieren worden gedefinieerd, bijvoorbeeld door het beschrijven van elementen op de webpagina, of veel inzichtelijker en meer onderhoudsvriendelijk; met screenshots. Omdat het met geautomatiseerde functionele testen niet eenvoudig is om regressie in de layout te vinden - een element kan bijvoorbeeld wel aanwezig zijn maar opeens op een ongewenste plek staan - zijn visuele testen vaak noodzakelijk.
Wat zijn de voor- en nadelen van geautomatiseerd visueel testen?
Door visuele testen te automatiseren, is de drempel lager om deze regelmatig uit te voeren. Vaker testen zorgt samen met een grotere nauwkeurigheid immers voor een beter voorspelbare kwaliteit. Andere voordelen van geautomatiseerd visueel testen zijn: het is waanzinnig snel, flexibel en ‘pixel-perfect’. Kleven er ook nadelen aan? Ja, bij een onjuiste implementatie, bijvoorbeeld door een onhandige opzet van de baseline, is het onderhoudsgevoelig. Dit is echter goed op te lossen door het creëren/updaten van de baseline te automatiseren. Bijvoorbeeld met het maken een nieuwe screenshot binnen het testscript (waarbij middels een parameter kan worden aangegeven of er een nieuwe screenshot moet worden gemaakt). Een ander nadeel is dat alleen visueel testen oppervlakkig is. Er wordt geen functionaliteit getest. Geautomatiseerd visueel testen kan daarom gezien worden als aanvulling op geautomatiseerd functioneel testen.
Hoe pak je het aan?
Bij het invoeren van geautomatiseerd visueel testen moet, voordat er een keuze wordt gemaakt voor een tool, worden nagedacht over het testproces dat binnen het project past. Denk in deze fase ook aan het wel of niet opnemen van zowel de baseline screenshots als de diff (gedetecteerde afwijking) screenshots in het project, aangezien hier dan een flinke historie van wordt opgebouwd. Om het onderhoud op overhead te verminderen, worden de visuele testen bij voorkeur geïntegreerd in de geautomatiseerde functionele testen.
Er zijn veel tools die je kunnen helpen bij het geautomatiseerd visueel testen. Zo zijn er tools die onderscheid kunnen maken tussen verschillende browsers (een pagina kan er op verschillende browsers net iets anders uitzien), die werken op basis van screenshots en de gedetecteerde afwijkingen direct kunnen aangeven op een nieuw gegenereerd screenshot.
Wanneer de visuele testen correct zijn opgezet, worden ook kleine veranderingen gedetecteerd die anders waarschijnlijk onopgemerkt zouden blijven. Bij afwijkingen op de baseline moet worden vastgesteld of de afwijking wenselijk is. Zo ja, dan wordt de baseline geüpdatet naar de nieuwe situatie.
Best practices geautomatiseerd visueel testen
Vanuit mijn ervaringen met geautomatiseerd visueel testen, wil ik je de volgende best practices meegeven:
- Gebruik screenshots als baseline. Screenshots zijn onderhoudsvriendelijk en maken voor iedereen direct inzichtelijk welke afwijkingen er eventueel zijn;
- Voer de testen uit op verschillende besturingssystemen en browsers. Het komt vaak voor dat regressie in de layout browser-specifiek is;
- Probeer niet het wiel opnieuw uit te vinden, er is al een behoorlijk aanbod tools en add-ons om mee te experimenteren.
Conclusie
Door visuele testen te automatiseren kan veel tijdwinst worden behaald en wordt het risico op regressie verkleind. Daarnaast borg je, door je (web) applicaties geautomatiseerd visueel te testen, dat alle gebruikers de gewenste visuele ervaring hebben. En eigenlijk is dit het allerbelangrijkst, want zoals iedereen weet; je hebt maar één kans om een eerste indruk te maken. In mijn volgende blog ga ik dieper in op de technische implementatie van het automatiseren van visuele testen aan de hand van tools en voorbeeldcode.
