Skip to main content

Visuele Regressietesten Met Screenshot Vastleggingen

Ontwikkelteams gebruiken Webshot om precies die bugs op te sporen die unittests missen — kapotte layouts, verkeerde font-fallbacks, ontbrekende iconen, defecte responsive weergaven. Leg staging vast, leg productie vast en vergelijk het tweetal. Zet de diff als bewijs in een PR-reactie dat je wijziging veilig is (of als bewijs dat de nieuwe bug net is ontstaan).

🖥️ Desktop volledige pagina (PNG, scherpe diffs) 📱 Mobiel volledige pagina ⚙️ Gebruik in plaats daarvan de gratis API

Alle knoppen openen het opnameformulier al voorgeconfigureerd. Formaat en viewport kun je aanpassen zodra de pagina is geladen.

Waarom Webshot hiervoor

Pixelnauwkeurige opnames

De PNG-modus behoudt haarscherpe tekst en randen — ideaal voor pixel-diffing-tools (`pixelmatch`, ImageMagick `compare`), waar ruis door JPG-compressie valse positieven zou opleveren.

Elke keer dezelfde viewport

Webshot legt bij elke run vast met exact dezelfde viewport, scrollpositie en wachttijd voor het laden van lettertypen — de diff-resultaten zijn betrouwbaar.

API-vriendelijk

Koppel de gratis Webshot-API aan je CI: leg vóór en ná het deployen vast, vergelijk met `pixelmatch` en laat de build falen als het aantal gewijzigde pixels > drempelwaarde is.

Geen headless-Chrome-boilerplate

Sla de Puppeteer-setup, font-installatie en sandbox-flags over. Bij Webshot draait dat allemaal op onze infrastructuur. Jouw CI doet alleen een HTTP-aanroep.

Zo voer je visuele regressietests uit

  1. Kies de pagina('s) die je wilt bewaken — homepage, belangrijke landingspagina's, checkout-flow, overal waar een regressie pijn zou doen.
  2. Leg elke pagina vast als PNG + desktop_full + mobile_full om je huidige productie-look als baseline vast te leggen.
  3. Leg na je volgende deploy dezelfde URL's opnieuw vast. Vergelijk oud met nieuw met `pixelmatch` of ImageMagick — alles boven 1% gewijzigde pixels verdient een menselijke controle.
  4. Bouw het in in je CI: een pre-deploy-hook legt staging vast, een post-deploy-hook legt productie vast, en de build faalt als de diff je drempelwaarde overschrijdt.

Veelgestelde vragen

Headless Chrome in je CI betekent Chromium, lettertypen en de sandbox-kernelflags installeren en dat alles ook nog eens up-to-date houden. Met Webshot sla je die installatie helemaal over — je CI doet een HTTP-aanroep naar onze API en krijgt een PNG terug. Wij regelen de Chrome-updates, font-caching en SSRF-bescherming.

Ja, mits je PNG + dezelfde viewport + dezelfde wachtstrategie gebruikt. Webshot zet de viewport-grootte vast en wacht op fonts.ready + network-idle + alle animaties die via de `prefers-reduced-motion`-query zijn gedeclareerd. Willekeurige animaties (lottie-loops, Date.now()-achtergronden) geven bij elke run een andere diff; bevries die in je testomgeving.

Niet in één aanroep — je legt elke URL apart vast en vergelijkt ze daarna met een aparte library. We houden de API bewust gericht op het vastleggen; het diffen is een scriptje van 30 regels. Zie `/developers` voor voorbeeldcode.

Ja. Webshot wacht op network-idle (geen requests gedurende 500ms) en fonts.ready voordat het vastlegt, zodat React-, Vue-, Svelte- en Next.js-apps volledig gerenderd zijn voordat de screenshot wordt gemaakt. Voor sites die nooit network-idle bereiken (long polling, websockets) kun je via de API een `maxWait`-parameter meegeven.

Het gratis openbare formulier staat 5 per 15 minuten per IP toe — te weinig voor CI. De gratis API-laag is ruimer; zie `/developers`. Voor grootschalige regressietests (50+ opnames per build) heft het commerciële API-plan de limieten per IP op.

Webshot zelf legt alleen vast — de diff-laag lever je zelf. Oplossing in twee regels: `npx pixelmatch baseline.png new.png diff.png`. Of gebruik een beheerde visual-diff-dienst (Percy, Chromatic, BackstopJS) en voer de PNG's van Webshot daarin.

Klaar om vast te leggen?

Gratis, geen registratie, geen watermerk. Plak gewoon een URL.

📸 Open het opnameformulier

Andere toepassingen: Google Maps-screenshots · WordPress-screenshots · Landingspagina-QA · Juridische bewijs-screenshots · Social-media-screenshots · Screenshots voor ontwikkelaars · Bekijk alle →

Share: 𝕏 Twitter Facebook LinkedIn