Testing: Visuele regressie tests

[Yolijn]

Visuele regressie tests

Wat is het

Visuele regressie tests zijn tests die valideren dat een wijziging in de code (componenten bibliotheek in dit geval) niet onbedoeld leiden tot visuele wijzigingen

In de praktijk is het veel te arbeidsintensief, omdat je dan per wijziging de oude en de nieuwe versie van alle componenten naast elkaar moet houden en dan de verschillen moet zoeken. Vooral voor een componenten bibliotheek met tientallen componenten is dat haast niet te doen.

Daarom heb je tools zoals de eerder handmatige screenshots met Cypress of betaalde systemen zoals Percy of Chromatic

Waarom is het belangrijk

Deze visuele tests voorkomen regressies in het component waar aan gewerkt is, in een van de andere componenten of in samenhang met andere componenten bijvoorbeeld in een template voor de header. Dit zorgt er ook voor dat componenten in producten die ze gebruiken zonder problemen kunnen worden geüpdate en het vertrouwen in de componenten bibliotheek blijft bestaan.

Kunnen vertrouwen op visuele regressietests maakt het ook veel makkelijker om een fix of feature te accepteren van developers (van leveranciers) die niet goed bekend zijn met de rest van de code.

Welke oplossingen zijn er

Je kunt zelf een systeem bouwen om visuele regressietests te doen. Gemeente Den Haag had zelf zo'n systeem waar snapshots werden gemaakt en bewaard in GitLab en elke nieuwe versie daar tegen werd gecheckt. Zo'n systeem stabiel krijgen en houden is alleen een heleboel werk en daarmee moeilijk en duur om te onderhouden.

Het doel om incidentele bijdragen van externe developers makkelijker te maken was bovendien niet gehaald, omdat deze setup voor nieuwe developers juist extra complex bleek. Zij konden niet simpel de twee screenshots zien en het verschil begrijpen, maar moesten eerst de opzet van de custom snapshots begrijpen.

Met het weggaan van de developer die hier aan had gewerkt was ook nog de kennis van het custom systeem weg en dus zijn deze testen uitgezet.

Je kunt ook een van de bestaande services gebruiken die je kunt koppelen aan GitHub acties. Deze systemen zijn bijvoorbeeld de voor gemeente Utrecht ingezette Percy https://percy.io en Chromatic https://www.chromatic.com die RVO gebruikt om Storybook stories aan Figma te koppelen.

Een voordeel van de betaalde services gebruiken is dat het onderhoud en het stabiel houden van de snapshot logica door hen beheerd en door honderden klanten getest wordt. Je hebt dus behalve voor het opzetten geen kosten voor het onderhouden van je regressietest systeem. Naar mate er meer bijdragen getest worden, lopen de kosten wel op.

Wat zijn de kosten van een visuele regressietest service

Bij de gemeente Utrecht verbruiken we tussen de 6000 en 60.000 snapshots per maand. De 65.000 snapshots was een uitschieter omdat we de hele componenten setup in Storybook hebben omgeschreven. We hebben daar ook voor iedere story de screenshots aan staan, dat kan in theorie minder.

In de thema-storybook van NL Design System waar we alle componenten x alle bekende thema's tonen hebben we een oplossing bedacht waar we per thema 1 story tonen waar alle componenten in staan. Mocht je templates maken in Storybook zou je dus bijvoorbeeld ook kunnen kiezen om die templates te testen en één story te maken per component met alle variaties. Daarmee kun je het aantal screenshots en het aantal tests waarschijnlijk acceptabel houden. We hebben alleen nog niet gekozen welke test tool we daar voor gaan inzetten.

Zowel Percy als Chromatic bieden 5000 snapshots per maand gratis aan. Voor elke snapshot die je daar boven gaat betaal je dan extra. Bij Percy zijn de extra screenshots ongeveer twee keer zo duur als bij Chromatic.

De goedkoopste van de twee opties is Chromatic, daar kun je 35k screenshots voor $149 per maand en $0,005 per extra screenshot betalen. Daarmee kom je voor $350 per maand aan 75k screenshots.

Als je geen variabele kosten wil hebben, maar dan dus ook geen goedkopere maanden, kun je ook voor het standaard abonnement gaan, daarmee krijg je 80k screenshots voor $350

Percy is duurder. Daar krijg je 25k screenshots voor $199 per maand en kost een extra screenshot $0.012. Voor een maand met 75k screenshots betaal je dan $679. Een standaard maandelijks abonnement waar 75000+ screenshots in zitten is bij hen 100.000 screenshots voor $799 per maand.

Ik zou dus voorstellen om Chromatic gratis te proberen en dan te kiezen uit het variable óf standaard plan.

[Yolijn]

Chromatic werkt en zit nu standaard in nl-design-system organisatie. Voor de documentatie website in Docusaurus hebben we nu als experiment ook Argos.