Hoe je geautomatiseerde visuele monitoring voor je website instelt in minder dan 5 minuten
Stop met het handmatig controleren van je website na elke update. Leer hoe je geautomatiseerde visuele monitoring instelt met cross-browser screenshots, pixelniveau diffs en directe meldingen — in slechts een paar minuten.
Hoe je geautomatiseerde visuele monitoring voor je website instelt in minder dan 5 minuten
Je hebt een plugin bijgewerkt, een pull request gemerged of een CSS-bestand aangepast. Alles zag er goed uit in je browser. Maar heb je Safari gecontroleerd? Heb je mobiel gecontroleerd? Heb je de andere 15 pagina's gecontroleerd die mogelijk geraakt zijn?
De meeste teams doen dat niet — omdat handmatig controleren te lang duurt en makkelijk wordt overgeslagen onder tijdsdruk.
Geautomatiseerde visuele monitoring lost dit op door screenshots van je website vast te leggen op verschillende browsers en apparaten volgens een schema, ze te vergelijken met bekende baselines en je te waarschuwen wanneer er iets verandert. En met de juiste tool is het instellen ervan een kwestie van minder dan vijf minuten.
Wat visuele monitoring precies doet
Visuele monitoring is een doorlopend, geautomatiseerd proces dat:
- Screenshots vastlegt van je geselecteerde pagina's in gekozen browsers en apparaatformaten
- Elke nieuwe screenshot vergelijkt met een opgeslagen baseline via pixelniveau diff-algoritmes
- Visuele verschillen markeert zodat je precies kunt zien wat er is veranderd
- Je waarschuwt via e-mail of Slack wanneer veranderingen worden gedetecteerd
- Automatisch herhaalt op een schema dat je zelf bepaalt — dagelijks, wekelijks of aangepast
Dit vangt de veranderingen op die door andere vormen van testing glippen: CSS-regressies, layoutverschuivingen door contentwijzigingen, bijeffecten van third-party scripts en verschillen in browserrendering.
Stap 1: Maak een account en je eerste project aan
Begin met registreren op ScanU.eu. Er is geen creditcard nodig voor de gratis tier, die 500 screenshots per maand bevat — genoeg om monitoring in te stellen voor je belangrijkste pagina's.
Na het inloggen maak je een nieuw project aan:
- Geef het een beschrijvende naam (bijv. "Bedrijfswebsite" of "Klant — Acme Store")
- Voer de basis-URL in van de site die je wilt monitoren
Dat is alles voor de projectsetup. Geen configuratiebestanden, geen lokale installaties, geen CLI-tools om te installeren.
Stap 2: Selecteer je pagina's
Kies welke pagina's je wilt monitoren. Je kunt URL's handmatig invoeren of gebruikmaken van ScanU's automatische pagina-ontdekking, die je sitemap uitleest om beschikbare pagina's te vinden.
Richt je op de pagina's die het meest belangrijk zijn:
- Homepage — je entrypunt met het meeste verkeer
- Belangrijke landingspagina's — waar conversie plaatsvindt
- Product- of dienstenpagina's — waar klanten beslissingen nemen
- Contact- of registratiepagina's — waar formulieren correct moeten worden weergegeven
- Navigatie-intensieve pagina's — waar menu's en layouts complex zijn
Begin met 5 tot 10 pagina's. Je kunt er later altijd meer toevoegen.
Stap 3: Kies browsers en apparaten
Selecteer in welke browsers en op welke apparaten je wilt testen. ScanU ondersteunt drie browser-engines:
- Chrome (Chromium) — de meest gebruikte desktop- en mobiele browser
- Firefox — belangrijk voor developer- en technisch publiek
- Safari (WebKit) — cruciaal voor iOS-gebruikers, waar alle browsers de WebKit-engine gebruiken
Kies voor apparaten uit de ingebouwde presets die aansluiten bij je doelgroep. Een praktische startset:
- Mobiel: iPhone 15, Samsung Galaxy S24 — dekt iOS en Android
- Tablet: iPad (10e generatie) — de meest voorkomende tablet
- Desktop: 1920x1080 — de standaard laptop- en monitorresolutie
Deze combinatie geeft je solide cross-browser, cross-device dekking zonder te veel credits te gebruiken. De gratis tier bevat 10 apparaatpresets; betaalde plannen bieden tot 100+.
Stap 4: Draai je eerste test en stel baselines vast
Klik op "Run Test" om je initiele screenshots vast te leggen. De cloudinfrastructuur van ScanU handelt alles af — browserrendering, pagina laden, screenshot vastleggen — op de achtergrond.
Binnen minuten toont je dashboard de vastgelegde screenshots voor elke pagina-, browser- en apparaatcombinatie. Deze eerste screenshots worden je baselines — het referentiepunt voor alle toekomstige vergelijkingen.
Controleer de baselines om er zeker van te zijn dat ze er correct uitzien. Als je site in een tijdelijke staat was (onderhoudsmodus, A/B-testvariant), wacht dan tot de site in normale staat is voordat je baselines vastlegt.
Stap 5: Stel geplande monitoring in
Stel nu geautomatiseerde monitoring in zodat je niet handmatig tests hoeft te draaien:
- Navigeer naar de Monitors-sectie van je project
- Maak een nieuwe monitor aan
- Stel het schema in — dagelijkse controles zijn een goede standaard voor actieve sites; wekelijks werkt voor stabielere sites
- Selecteer je tijdzone
- Activeer de monitor
Vanaf dit punt draait ScanU automatisch visuele tests volgens je ingestelde schema, vergelijkt de resultaten met je baselines en markeert eventuele visuele veranderingen.
Optioneel: Configureer notificaties
Om gewaarschuwd te worden wanneer visuele veranderingen worden gedetecteerd, stel je notificaties in:
- E-mailnotificaties zijn beschikbaar op alle betaalde plannen en sturen samenvattingen wanneer testruns verschillen detecteren
- Slack-integratie laat je meldingen routeren naar een specifiek kanaal, zodat je team visuele regressiemeldingen ziet naast hun normale workflow
Verbind voor Slack je workspace via de Integratie-instellingen en selecteer vervolgens welk kanaal meldingen moet ontvangen voor elk project.
Wat er gebeurt wanneer veranderingen worden gedetecteerd
Wanneer een geplande test visuele verschillen detecteert, zie je ze in je dashboard als gemarkeerde diffs. Voor elke gewijzigde pagina krijg je:
- De baseline-screenshot — hoe de pagina er eerder uitzag
- De huidige screenshot — hoe de pagina er nu uitziet
- De diff-overlay — een visuele markering van precies wat er is veranderd, met gewijzigde pixels in rood
- Een diffpercentage — hoeveel van de pagina is veranderd, nauwkeurig tot twee decimalen
Vanaf hier beslis je:
- Keur de wijziging goed als deze bewust was (bijv. je hebt een banner bijgewerkt). Dit creert een nieuwe baseline.
- Onderzoek de wijziging als deze onverwacht was. Controleer recente deployments, CMS-updates of third-party scriptwijzigingen.
- Fix de regressie als het een bug is en draai vervolgens een nieuwe test om de fix te bevestigen.
Praktische tips voor effectieve visuele monitoring
Stel je diffdrempel goed in. ScanU biedt de mogelijkheid om de diffdrempel per project in te stellen, van 0,1% tot 10%. Voor de meeste sites werkt de standaard van 1% goed. Lagere drempels vangen subtielere veranderingen op, maar kunnen renderingruis markeren. Hogere drempels richten zich alleen op significante layoutverschuivingen.
Begin klein en breid uit. Start met je vijf meest kritieke pagina's op twee of drie apparaten. Zodra je vertrouwd bent met de workflow, voeg je meer pagina's en apparaten toe om de dekking te vergroten.
Bekijk diffs tijdig. Geplande monitoring helpt alleen als iemand de resultaten bekijkt. Stel Slack- of e-mailnotificaties in om ervoor te zorgen dat meldingen iemand bereiken die erop kan acteren.
Stel baselines bewust vast. Wanneer je een geplande visuele wijziging doorvoert (redesign, nieuwe campagne, bijgewerkte branding), draai een test en keur de nieuwe baselines goed. Dit voorkomt fout-positieven bij volgende monitoringruns.
Coordineer met deployments. Draai een vergelijkingstest voor en na deployments om regressies direct op te vangen. Geplande monitoring is een vangnet, geen vervanging voor pre-deployment testing.
Wat dit kost
De gratis tier van ScanU geeft je 500 screenshots per maand, 1 project en 10 apparaatpresets. Dit is genoeg om een kleine site te monitoren op een paar belangrijke configuraties.
Voor uitgebreidere monitoring beginnen betaalde plannen bij €19/maand (Pro) met 3.000 screenshots, 5 projecten en 35+ apparaatpresets. Alle plannen bevatten Chrome, Firefox en Safari testing zonder per-browser toeslagen.
Alle data wordt gehost in Frankfurt, Duitsland, waardoor de dienst standaard GDPR-compliant is — een belangrijke overweging voor Europese teams en bedrijven die EU-klanten bedienen.
Begin nu met monitoren
Het instellen van visuele monitoring vereist geen DevOps-expertise, lokale infrastructuur of een dedicated QA-team. Met ScanU ga je van nul naar geautomatiseerde cross-browser monitoring in minder dan vijf minuten.
Maak je account aan, richt je eerste project in en draai je eerste test. Je hebt baseline-screenshots in meerdere browsers en op meerdere apparaten nog voordat je koffie koud is.