Skip to main content

Visuel regressionstest med screenshot-fangst

Udviklingsteams bruger Webshot til at fange den slags fejl, som enhedstests overser — ødelagte layouts, fallback-skrifttyper, manglende ikoner, ødelagte responsive tilstande. Tag et billede af staging, tag et billede af produktion, og sammenlign de to. Indsæt forskellen i en PR-kommentar som bevis på, at din ændring er sikker (eller som bevis på, at den nye fejl lige er opstået).

🖥️ Desktop helside (PNG, skarpe forskelle) 📱 Mobil helside ⚙️ Brug det gratis API i stedet

Alle knapper åbner billedtagningsformularen forudkonfigureret. Du kan ændre format og viewport, når siden er indlæst.

Hvorfor Webshot til dette

Pixel-præcise billeder

PNG-tilstand bevarer skarp tekst og kanter — ideelt til pixel-diffing-værktøjer (`pixelmatch`, ImageMagick `compare`), hvor støj fra JPG-komprimering ville skabe falske positiver.

Samme viewport hver gang

Webshot tager billeder med nøjagtig samme viewport, scroll-position og ventetid for skrifttypeindlæsning ved hver kørsel — diff-resultaterne er pålidelige.

API-venlig

Forbind det gratis Webshot API til din CI: tag billeder før og efter implementering, sammenlign med `pixelmatch`, og lad buildet fejle, hvis antallet af ændrede pixels overstiger en tærskelværdi.

Ingen headless-Chrome-boilerplate

Spring over Puppeteer-opsætning, installation af skrifttyper og sandbox-flags. Webshot har alt det kørende på vores infrastruktur. Din CI foretager blot et HTTP-kald.

Sådan tager du billeder til visuel regressionstest

  1. Vælg den eller de sider, du vil overvåge — forside, vigtige landingssider, betalingsflow, hvor som helst en regression ville gøre skade.
  2. Tag et billede af hver i PNG + desktop_full + mobile_full for at etablere en baseline for dit nuværende produktionsudseende.
  3. Efter din næste implementering, tag billeder af de samme URL’er igen. Sammenlign gammelt vs. nyt med `pixelmatch` eller ImageMagick — alt over 1% ændrede pixels fortjener en manuel gennemgang.
  4. Integrer det i CI: et pre-deploy hook tager billede af staging, et post-deploy hook tager billede af produktion, og buildet fejler, hvis forskellen overstiger din tærskelværdi.

Ofte stillede spørgsmål

Headless Chrome i CI betyder installation af Chromium, skrifttyper, sandbox kernel-flags, plus at holde det hele opdateret. Med Webshot springer du installationen helt over — din CI foretager et HTTP-kald til vores API og får en PNG-fil tilbage. Vi håndterer Chrome-opdateringer, skrifttype-caching og SSRF-beskyttelse.

Ja, når du bruger PNG + samme viewport + samme ventestrategi. Webshot fastlåser viewport-størrelsen og venter på fonts.ready + network-idle + eventuelle animationer, der er deklareret via `prefers-reduced-motion`-forespørgslen. Tilfældige animationer (lottie-loops, Date.now()-baggrunde) vil give forskellige resultater ved hver kørsel; frys dem i dit testmiljø.

Ikke i ét kald — du tager et billede af hver URL separat og sammenligner dem derefter med et separat bibliotek. Vi holder API’et fokuseret på billedtagning; diffing er et 30-linjers script. Se `/developers` for eksempelkode.

Ja. Webshot venter på network-idle (ingen anmodninger i 500ms) og fonts.ready, før billedet tages, så React-, Vue-, Svelte- og Next.js-apps alle gengives fuldt ud før screenshot. For sider, der aldrig når network-idle (long polling, websockets), kan du sende en `maxWait`-parameter via API’et.

Den gratis offentlige formular er begrænset til 5/15 min. pr. IP — for lavt til CI. Den gratis API-plan er mere generøs; se `/developers`. For regressionstest med høj volumen (50+ billeder pr. build) fjerner den kommercielle API-plan begrænsningerne pr. IP.

Webshot tager kun billeder — du skal selv levere diffing-laget. En to-linjers løsning: `npx pixelmatch baseline.png new.png diff.png`. Eller brug en administreret visuel-diff-tjeneste (Percy, Chromatic, BackstopJS) og giv dem Webshots PNG-filer.

Klar til at tage et billede?

Gratis, ingen tilmelding, intet vandmærke. Bare indsæt en URL.

📸 Åbn billedtagningsformularen

Andre anvendelsesmuligheder: Screenshots af Google Maps · Screenshots af WordPress · QA af landingssider · Screenshots til juridisk bevisførelse · Screenshots af sociale medier · Screenshots til udvikler-workflow · Se alle →

Share: 𝕏 Twitter Facebook LinkedIn