Visuelle Regression
Die visuelle Regressionsprüfung vergleicht Screenshots zwischen Scan-Läufen und erkennt unbeabsichtigte Layout-Änderungen automatisch.
Funktionsweise
Bei jedem Swarm-QA-Lauf erstellt der Smoke-Flow-Agent Screenshots aller geprüften Seiten. Diese werden als Baseline gespeichert. Bei nachfolgenden Läufen vergleicht xyva.ai die neuen Screenshots pixelgenau mit der Baseline.
Baseline-Screenshot → Neuer Screenshot → Pixelmatch → Diff-BildPixelmatch-Algorithmus
Der Vergleich basiert auf dem Pixelmatch-Algorithmus:
- Pixel-für-Pixel-Vergleich beider Screenshots
- Unterschiedliche Pixel werden im Diff-Bild rot markiert
- Ein Schwellenwert bestimmt, ab wie vielen abweichenden Pixeln ein Finding erzeugt wird
Schwellenwert-Konfiguration
Der Schwellenwert definiert die Toleranz für Abweichungen:
| Einstellung | Wert | Einsatz |
|---|---|---|
| Strikt | 0,1 % | Pixel-perfekte Designs, Branding-Seiten |
| Standard | 1,0 % | Allgemeine Webseiten |
| Tolerant | 5,0 % | Seiten mit dynamischen Inhalten (Ads, Feeds) |
Empfehlung
Beginnen Sie mit dem Standard-Schwellenwert. Passen Sie ihn nur an, wenn Sie zu viele falsch-positive Findings erhalten oder beabsichtigte Änderungen ignoriert werden sollen.
Diff-Viewer
Der Diff-Viewer bietet drei Darstellungsmodi:
- Overlay — Baseline und neuer Screenshot überlagert, Unterschiede hervorgehoben
- Seite-an-Seite — beide Screenshots nebeneinander
- Diff-Bild — nur die abweichenden Pixel auf schwarzem Hintergrund
Baseline-Management
- Die Baseline wird beim ersten Lauf automatisch erstellt
- Sie können die Baseline jederzeit manuell aktualisieren, wenn eine Änderung beabsichtigt war
- Pro URL und Viewport-Größe wird eine separate Baseline gespeichert
Dynamische Inhalte
Seiten mit häufig wechselnden Inhalten (Zeitstempel, Werbung, personalisierte Bereiche) erzeugen regelmäßig falsch-positive Findings. Schließen Sie diese Bereiche über CSS-Selektoren von der Prüfung aus.
Viewport-Varianten
Die visuelle Regression kann für mehrere Viewports konfiguriert werden:
- Desktop (1280 x 720)
- Tablet (768 x 1024)
- Mobil (375 x 812)