Skip to main content

Visuelle Regressionstests mit Screenshot-Aufnahmen

Entwicklerteams nutzen Webshot, um genau die Bugs zu finden, die Unit-Tests übersehen — kaputte Layouts, Schriftart-Fallbacks, fehlende Icons, defekte responsive Zustände. Erfasse Staging, erfasse Produktion, vergleiche das Paar. Häng den Diff als Beweis in einen PR-Kommentar, dass deine Änderung sicher ist (oder als Beweis, dass der neue Bug gerade aufgetaucht ist).

🖥️ Desktop ganze Seite (PNG, scharfe Diffs) 📱 Mobil ganze Seite ⚙️ Stattdessen die kostenlose API nutzen

Alle Buttons öffnen das Aufnahmeformular vorkonfiguriert. Format und Viewport kannst du ändern, sobald die Seite geladen ist.

Warum Webshot dafür

Pixelgenaue Aufnahmen

Der PNG-Modus bewahrt gestochen scharfen Text und Kanten — ideal für Pixel-Diffing-Tools (`pixelmatch`, ImageMagick `compare`), bei denen JPG-Komprimierungsrauschen falsche Treffer erzeugen würde.

Jedes Mal derselbe Viewport

Webshot nimmt bei jedem Lauf mit exakt demselben Viewport, derselben Scroll-Position und derselben Schriftart-Ladewartezeit auf — die Diff-Ergebnisse sind zuverlässig.

API-freundlich

Binde die kostenlose Webshot-API in dein CI ein: vor dem Deploy und nach dem Deploy aufnehmen, mit `pixelmatch` vergleichen, den Build abbrechen, wenn geänderte Pixel > Schwellenwert.

Kein Headless-Chrome-Boilerplate

Spar dir Puppeteer-Setup, Schriftart-Installation und Sandbox-Flags. Webshot hat das alles auf unserer Infrastruktur laufen. Dein CI macht nur einen HTTP-Aufruf.

So führst du visuelle Regressionstests durch

  1. Wähle die Seite(n), die du überwachen willst — Startseite, wichtige Landingpages, Checkout-Flow, überall dort, wo eine Regression wehtun würde.
  2. Erfasse jede davon als PNG + desktop_full + mobile_full, um deinen aktuellen Produktions-Look als Baseline festzuhalten.
  3. Erfasse nach deinem nächsten Deploy dieselben URLs erneut. Vergleiche alt vs. neu mit `pixelmatch` oder ImageMagick — alles über 1 % geänderte Pixel verdient eine menschliche Prüfung.
  4. Binde es ins CI ein: Ein Pre-Deploy-Hook erfasst Staging, ein Post-Deploy-Hook erfasst Produktion, und der Build schlägt fehl, wenn der Diff deinen Schwellenwert überschreitet.

Häufig gestellte Fragen

Headless Chrome im CI bedeutet, Chromium, Schriftarten und die Sandbox-Kernel-Flags zu installieren und das Ganze obendrein aktuell zu halten. Mit Webshot überspringst du die Installation komplett — dein CI macht einen HTTP-Aufruf an unsere API und bekommt ein PNG zurück. Wir kümmern uns um Chrome-Updates, Font-Caching und SSRF-Schutz.

Ja, wenn du PNG + denselben Viewport + dieselbe Wartestrategie verwendest. Webshot fixiert die Viewport-Größe und wartet auf fonts.ready + Network-Idle + alle Animationen, die über die `prefers-reduced-motion`-Query deklariert sind. Zufällige Animationen (Lottie-Schleifen, Date.now()-Hintergründe) ergeben bei jedem Lauf einen anderen Diff; friere diese in deiner Testumgebung ein.

Nicht in einem Aufruf — du erfasst jede URL separat und vergleichst sie dann mit einer eigenen Bibliothek. Wir halten die API bewusst auf das Erfassen fokussiert; das Diffing ist ein 30-Zeilen-Skript. Siehe `/developers` für Beispielcode.

Ja. Webshot wartet auf Network-Idle (keine Requests für 500ms) und fonts.ready, bevor es aufnimmt, sodass React-, Vue-, Svelte- und Next.js-Apps vollständig gerendert sind, bevor der Screenshot entsteht. Für Seiten, die nie Network-Idle erreichen (Long Polling, Websockets), kannst du über die API einen `maxWait`-Parameter übergeben.

Das kostenlose öffentliche Formular erlaubt 5 pro 15 Minuten pro IP — zu wenig für CI. Die kostenlose API-Stufe ist großzügiger; siehe `/developers`. Für umfangreiche Regressionstests (50+ Aufnahmen pro Build) hebt der kommerzielle API-Plan die Pro-IP-Limits auf.

Webshot selbst erfasst nur — die Diffing-Ebene stellst du bereit. Zwei-Zeilen-Lösung: `npx pixelmatch baseline.png new.png diff.png`. Oder nutze einen verwalteten Visual-Diff-Dienst (Percy, Chromatic, BackstopJS) und speise Webshots PNGs hinein.

Bereit zum Erfassen?

Kostenlos, ohne Anmeldung, ohne Wasserzeichen. Einfach eine URL einfügen.

📸 Aufnahmeformular öffnen

Weitere Anwendungsfälle: Google Maps Screenshots · WordPress Screenshots · Landingpage-QA · Juristische Beweis-Screenshots · Social-Media-Screenshots · Alle ansehen →

Share: 𝕏 Twitter Facebook LinkedIn