Visual regression (screenshot vergelijking)

5 min leestijd

Een klassieke HTTP monitor zegt "server reageert met 200", maar weet niet dat het hoofd CSS bestand niet geladen werd en de website kapot weergegeven wordt. Visual regression maakt een screenshot en vergelijkt deze met de baseline - detecteert visuele wijzigingen ook als de server OK zegt.

Hoe het werkt

1. Bij de eerste enable van visual regression wordt een baseline screenshot (referentie) gemaakt.
2. Bij elke volgende check wordt een nieuwe screenshot gemaakt en pixel-by-pixel vergeleken met de baseline.
3. Als het verschil de drempel overschrijdt (default 5%), wordt de monitor als changed gemarkeerd en u krijgt een melding.
4. In het detail van de monitor ziet u baseline en de actuele screenshot naast elkaar + diff overlay.

Wanneer dit te gebruiken

• Na deploys - detecteert automatisch kapotte fonts, CSS, layout
• Voor marketing landing pages - zodat u weet dat de GA tag zijn positie niet heeft verloren
• Voor webshops - controle dat de "In winkelwagen" knop nog zichtbaar is
• Voor status pages - zodat u weet dat de eigen status page wordt gerenderd

Instelling

1. Ga in het monitor detail naar het tabblad Visual regression
2. Klik op Enable - de baseline wordt gemaakt (10-30 seconden)
3. Stel optioneel een threshold in (1-20%, default 5%)
4. Update de baseline na een deploy via Refresh baseline

Let op false positives

• Datum / tijd op de pagina - elke check rendert ze anders. Negeer of stel een CSS selector mask in.
• Reclame / banners - roteren tussen ladingen. Mask het domein van de reclame provider.
• Animaties - eerste frame vs. volgende. Visual regression wacht 2 s na load om de animatie te laten stabiliseren.
• Cookie banner - altijd auto-accepted, maar soms blijft hij zichtbaar. Voeg een CSS rule toe via user-config.