Inspecteur de régression visuelle Storybook
Téléversez les PNG baseline et latest de Loki, mettez en évidence les différences visuelles dans le navigateur et exportez un rapport en heatmap.
Sélectionnez les fichiers PNG baseline et latest générés par Loki. Décompressez votre rapport et choisissez des captures correspondantes.
Couleur de surbrillance
Aperçu
Inspectez les captures de régression visuelle Loki directement dans le navigateur. Mettez en évidence les différences, consultez les métriques et exportez une heatmap — sans CLI.
Utilisation
- Décompressez votre exécution Loki et téléversez les PNG baseline/latest correspondants.
- Ajustez le seuil de diff et la couleur de surbrillance pour séparer le signal du bruit.
- Analysez la heatmap, copiez les métriques résumées et téléchargez le PNG annoté pour vos boucles de feedback.
Cas d'usage
- Valider les diffs de régression visuelle Storybook avant de fusionner une pull request.
- Partager les heatmaps avec les designers pour confirmer les changements d’UI intentionnels.
- Auditer rapidement les échecs Loki sur des postes dépourvus de la toolchain complète.
Conseils & connaissances
- Capturez baseline et latest avec la même taille de viewport et le même device pixel ratio.
- Stabilisez timestamps ou données dynamiques dans vos stories afin de réduire les faux positifs.
- Si les dimensions divergent, relancez la capture pour réaligner les captures avant validation.