Dernière mise à jour 08-14-2026
Catégorie:
Reviews:
Join thousands of AI enthusiasts in the World of AI!
VizDiff
VizDiff télécharge les builds Storybook depuis GitLab CI, génère une capture d'écran pour chaque story, et bloque les merges lorsque les pixels des composants changent.
Les outils génériques de capture d'écran comparent des pages entières. VizDiff est conçu autour des stories Storybook, de sorte que les différences au niveau des composants apparaissent dans les demandes de merge GitLab avec des vues Ancien, Nouveau, Diff et côte à côte. La première exécution sur une branche marque chaque story comme Nouvelle ; les commits suivants sur la même demande de merge n'affichent que les stories réellement modifiées.
Les équipes frontend utilisant déjà Storybook dans GitLab tirent le meilleur parti de ce workflow automatisé. Designers et ingénieurs partagent des bases de référence, parcourent les captures d'écran en attente avec des raccourcis clavier, et valident ou refusent un build sans quitter l'interface de revue. Les configurations GitHub sont prises en charge via un guide d'installation distinct pour les équipes sur cette plateforme.
Téléversements des builds Storybook via npx @vizdiff/cli dans les pipelines GitLab CI
Publie les statuts de commit vizdiff/visual-tests sur les commits de merge request
Les vues de comparaison incluent Old, New, Diff, et 2-Up par story
La première exécution de branche établit les références ; les commits ultérieurs ne montrent que les stories modifiées
Connexion SSO Microsoft Entra pour les déploiements gérés par l'organisation
Guides d'installation GitHub et GitLab avec exemples YAML CI à copier-coller
Conçu spécifiquement pour les stories Storybook plutôt que pour des captures de page entière qui manquent les régressions de composants.
Les statuts de commit GitLab bloquent les merges jusqu'à ce que les changements visuels soient explicitement approuvés.
Le CLI s'intègre aux jobs CI existants build-storybook avec une étape supplémentaire.
Diff, 2-Up, et navigation au clavier accélèrent la revue de dizaines de captures d'écran de stories.
Les déploiements auto-hébergés permettent aux équipes de garder les données de capture d'écran dans leur propre infrastructure.
Nécessite Storybook dans votre dépôt et un accès Maintainer pour ajouter des variables GitLab CI.
Pas de page de tarification publique, le coût dépend du déploiement VizDiff de votre organisation.
Une faible autorité de domaine suggère un produit récent ou de niche avec une couverture limitée par des tiers.
Que teste VizDiff ?
VizDiff capture des captures d'écran des stories de composants Storybook à chaque build CI. Il les compare aux bases de référence approuvées et met en évidence les différences au niveau des pixels pour que les équipes détectent les régressions visuelles avant la fusion.
Quels hébergeurs Git VizDiff supporte-t-il ?
VizDiff s'intègre nativement aux merge requests GitLab, incluant les statuts de commit et les liens de revue. Un guide d'installation séparé couvre les workflows de pull request pour les équipes utilisant GitHub.
Comment connecter VizDiff à GitLab CI ?
Ajoutez une variable CI/CD VIZDIFF_PROJECT_TOKEN dans GitLab, générez Storybook dans storybook-static, puis exécutez npx @vizdiff/cli upload dans votre pipeline. VizDiff lit automatiquement les variables CI prédéfinies de GitLab.
Que se passe-t-il lors de la première exécution de VizDiff ?
Lors de la première exécution de VizDiff pour une branche, chaque capture Storybook apparaît comme Nouvelle car aucune base de référence n'existe encore. Poussez un autre commit sur la même merge request et VizDiff signale uniquement les stories où l'interface a réellement changé.
Comment approuver les changements visuels dans VizDiff ?
Ouvrez la page de revue VizDiff depuis le lien de statut de commit GitLab, inspectez chaque capture, puis approuvez ou refusez le build. VizDiff met à jour immédiatement le statut du commit en succès ou échec après votre décision.
VizDiff nécessite-t-il une autorisation GitLab personnelle ?
Non. VizDiff utilise un jeton de service de déploiement configuré par votre administrateur pour lire les métadonnées du projet et publier les statuts de commit. Les développeurs s'authentifient auprès de VizDiff via le fournisseur SSO de leur organisation.