Storybook Visual Regression Inspector
Loki-Baseline- und Latest-PNGs hochladen, visuelle Differenzen im Browser hervorheben und einen Heatmap-Report exportieren.
Wählen Sie die Loki-Baseline- und Latest-PNG-Dateien aus. Entpacken Sie den Report und wählen Sie passende Screenshots.
Highlight-Farbe
Überblick
Loki-Visual-Regression-Screenshots direkt im Browser prüfen. Diffs hervorheben, Kennzahlen betrachten und eine Heatmap exportieren – ganz ohne CLI.
So funktioniert's
- Loki-Lauf entpacken und zugehörige Baseline/Latest-PNGs hochladen.
- Diff-Schwelle und Highlight-Farbe anpassen, um Signal von Rauschen zu trennen.
- Heatmap prüfen, Kennzahlen kopieren und das annotierte PNG für Feedback-Threads herunterladen.
Anwendungsfälle
- Storybook-Visual-Regression-Diffs vor dem Merge von Pull Requests freigeben.
- Heatmaps mit Designer:innen teilen, um beabsichtigte UI-Änderungen zu bestätigen.
- Loki-Fehler schnell auf Rechnern ohne vollständige Toolchain prüfen.
Tipps & Wissen
- Baseline- und Latest-Screenshots mit identischer Viewport-Größe und Device-Pixel-Ratio erfassen.
- Dynamische Zeitstempel oder Daten in Stories stabilisieren, um Fehlalarme zu reduzieren.
- Weichen Abmessungen ab, Capture erneut ausführen, damit Screenshots vor der Freigabe deckungsgleich sind.