Visual regression (screenshot diff)

Een klassieke HTTP-monitor zegt "de server antwoordt 200 OK", maar weet niet dat het belangrijkste CSS-bestand niet is geladen en de site kapot wordt weergegeven. De visuele controle (Engels: visual regression) maakt een schermafbeelding van de pagina en vergelijkt die met een referentie-schermafbeelding (baseline) - ze detecteert visuele wijzigingen, zelfs wanneer de server zegt dat alles in orde is.

De visuele controle is beschikbaar in de Pro- en Business-abonnementen.

Hoe het werkt

1. Bij het voor het eerst inschakelen van de visuele controle wordt een basis-schermafbeelding (baseline) gemaakt - de referentie waarmee later wordt vergeleken.
2. Bij elke volgende controle maken we een nieuwe schermafbeelding en vergelijken die pixel voor pixel met de baseline.
3. Als het verschil de ingestelde drempel overschrijdt (standaard 5 %), wordt de monitor gemarkeerd als gewijzigd en ontvangt u een melding.
4. In het monitordetail ziet u de baseline en de huidige schermafbeelding naast elkaar, met de verschillende gebieden gemarkeerd.

Wanneer gebruiken

• Na het uitrollen van een nieuwe versie van de site - detecteert automatisch kapotte lettertypen, CSS of lay-out
• Voor marketing-landingspagina's - zodat u weet dat de GA-tag en andere elementen niet verschoven zijn
• Voor webshops - controleren of de knop "Toevoegen aan winkelwagen" nog zichtbaar is
• Voor statuspagina's - zodat u weet dat uw eigen statuspagina correct wordt weergegeven

Instellen

1. Kies bij het aanmaken van een monitor het type Visuele controle - de eerste schermafbeelding wordt automatisch opgeslagen als baseline
2. In het monitordetail ziet u in de sectie Visuele controle de referentie-schermafbeelding, de huidige schermafbeelding en de gemarkeerde verschillen
3. De wijzigingslimiet stelt u in met de schuifregelaar Limiet voor visuele wijziging (0,5 tot 30 %, standaard 5 %)
4. Werk na elke uitrol van een nieuwe versie de baseline bij met de knop Huidige als referentie instellen

Let op valse alarmen

• Datum en tijd op de pagina - elke controle geeft ze anders weer. Ververs na het uitrollen van zo'n wijziging altijd de baseline.
• Advertenties en banners - ze wisselen tussen schermafbeeldingen en veroorzaken vaak een vals alarm. De visuele controle werkt het best op pagina's zonder advertenties.
• Animaties - de eerste en de volgende schermafbeelding kunnen verschillen. De visuele controle wacht 1,5 seconde na het laden zodat de animatie tot rust komt.