Visual Regression (Screenshot-Vergleich)

5 Min. Lesezeit

Ein klassischer HTTP-Monitor sagt "Server antwortet 200", aber er weiß nicht, dass die Haupt-CSS-Datei nicht geladen wurde und das Web kaputt angezeigt wird. Visual Regression macht einen Screenshot und vergleicht ihn mit einer Baseline - erkennt visuelle Änderungen, auch wenn der Server OK sagt.

So funktioniert es

1. Beim ersten Aktivieren der Visual Regression wird ein Baseline-Screenshot (Referenz) erstellt.
2. Bei jedem weiteren Check wird ein neuer Screenshot gemacht und pixelweise mit der Baseline verglichen.
3. Wenn der Unterschied den Schwellenwert (Standard 5%) überschreitet, wird der Monitor als changed markiert und Sie erhalten eine Benachrichtigung.
4. Im Monitor-Detail sehen Sie die Baseline und den aktuellen Screenshot nebeneinander + Diff-Overlay.

Wann es verwenden

• Nach Deployments - erkennt automatisch kaputte Schriften, CSS, Layout
• Für Marketing-Landingpages - damit Sie wissen, dass das GA-Tag seine Position nicht verloren hat
• Für E-Shops - Überprüfung, dass die "In den Warenkorb"-Schaltfläche noch sichtbar ist
• Für Status-Pages - damit Sie wissen, dass die eigene Status-Page gerendert wird

Einstellung

1. Wechseln Sie im Monitor-Detail zum Tab Visual Regression
2. Klicken Sie auf Enable - die Baseline wird erstellt (10-30 Sekunden)
3. Optional stellen Sie den Threshold ein (1-20%, Standard 5%)
4. Nach einem Deployment aktualisieren Sie die Baseline über Refresh baseline

Achtung vor False Positives

• Datum / Zeit auf der Seite - jeder Check rendert sie anders. Entweder ignorieren oder einen CSS-Selector-Mask einstellen.
• Werbung / Banner - rotieren zwischen Ladevorgängen. Maskieren Sie die Domain des Werbeanbieters.
• Animationen - erster Frame vs. nächster. Visual Regression wartet 2 s nach dem Load, damit sich die Animation stabilisiert.
• Cookie-Banner - immer auto-accepted, aber manchmal bleibt sichtbar. Fügen Sie eine CSS-Regel über User-Config hinzu.