Chromatic vs Percy : Quel Outil de Test Visuel Choisir en 2026 ?
Test visuel de composants (Component Visual Testing) : « Méthode de vérification automatisée qui consiste à capturer le rendu visuel de composants d'interface isolés dans leurs différents états, puis à comparer ces captures à des références pour détecter toute modification non intentionnelle de leur apparence. »
Chromatic et Percy. Deux outils de test visuel, deux philosophies, deux publics. L'un est né dans l'écosystème Storybook et ne jure que par lui. L'autre se veut universel et s'intègre partout. Les deux finissent par faire la même chose — comparer des captures d'écran — mais le chemin pour y arriver est radicalement différent.
Si vous avez cherché « chromatic vs percy », c'est probablement que vous utilisez Storybook et que vous hésitez entre la solution maison et l'outsider polyvalent. Cet article va vous aider à trancher. Et peut-être à envisager une option que ni l'un ni l'autre ne vous propose.
Chromatic : le Storybook natif
Chromatic a été créé par les mainteneurs de Storybook eux-mêmes. Ce n'est pas un détail anodin — c'est le fondement de toute sa proposition de valeur. Quand les gens qui construisent Storybook construisent aussi l'outil de test visuel pour Storybook, l'intégration est, sans surprise, impeccable.
Comment Chromatic fonctionne
Le principe est d'une simplicité désarmante. Vous avez vos stories Storybook — ces petits laboratoires isolés où chaque composant vit dans ses différents états. Chromatic capture automatiquement chacune de ces stories en image. À chaque modification de code, il recapture et compare. Si quelque chose a changé visuellement, il vous le montre.
Pas de SDK à configurer, pas de tests à écrire. Si vous avez des stories, vous avez des tests visuels. C'est aussi direct que ça. Comme si vos composants passaient un check-up visuel à chaque visite chez le médecin, sans que vous ayez à prendre rendez-vous.
Les forces de Chromatic
L'intégration Storybook est totale. Chromatic comprend vos stories, vos args, vos decorators, vos viewports configurés. Il ne traite pas Storybook comme un outil tiers — il le traite comme son propre langage natif. Le résultat est une expérience fluide où le test visuel est une extension naturelle de votre travail de développement de composants.
Le workflow de review est excellent. Chaque changement visuel déclenche une review dans le dashboard Chromatic, avec une vue côte à côte de l'ancien et du nouveau rendu. Les designers, développeurs et product owners peuvent commenter, approuver ou rejeter directement. C'est une expérience collaborative qui rapproche les disciplines.
La détection de changements est intelligente. Chromatic ne recapture que les composants affectés par un changement de code, grâce à l'analyse des dépendances. Sur un projet avec 500 stories, si votre commit ne touche qu'un composant, seules ses stories sont retestées. C'est efficace et économe en ressources — enfin, en captures facturées.
Le test d'interaction visuel. Chromatic permet de jouer des interactions (clic, hover, saisie) avant de capturer, ce qui vous permet de tester les états interactifs de vos composants, pas seulement leur état initial.
La documentation visuelle. Chromatic publie automatiquement une version en ligne de votre Storybook, créant une bibliothèque visuelle vivante de vos composants. C'est utile pour les reviews de design et l'onboarding de nouveaux développeurs.
Les faiblesses de Chromatic
Storybook ou rien. C'est le deal. Si vous n'utilisez pas Storybook, Chromatic ne vous sert strictement à rien. Et même si vous l'utilisez, Chromatic ne teste que ce qui est dans Storybook. Vos pages complètes, vos parcours utilisateur, vos états qui ne sont pas modélisés en stories ? Invisibles pour Chromatic.
C'est une limitation fondamentale. Storybook est un outil de développement de composants, pas une reproduction fidèle de votre application. Le composant de navigation peut être parfait en isolation et complètement cassé dans le contexte de la page réelle — Chromatic ne le verra pas.
Le coût monte vite. Chromatic propose un free tier avec un nombre limité de captures (« snapshots ») par mois. Au-delà, la facturation est proportionnelle au volume. Pour un projet avec beaucoup de stories et des captures fréquentes, la facture peut atteindre des montants significatifs. Le pricing exact dépend de votre volume et de votre plan, mais les retours des équipes suggèrent que la surprise peut être désagréable.
Cloud uniquement. Toutes vos captures sont envoyées et stockées sur les serveurs de Chromatic. Pas d'option on-premise standard, pas de mode local. Si la souveraineté des données est un sujet chez vous, c'est un point d'attention.
Pas de test de pages complètes. Chromatic teste des composants isolés, pas des pages assemblées. Or les régressions visuelles les plus vicieuses sont souvent celles qui apparaissent quand les composants interagissent : un margin qui pousse un autre élément, un z-index qui masque un bouton, un overflow qui crée un scroll horizontal. Ce sont des bugs de composition, et Chromatic, par design, ne les détecte pas.
Percy : l'universaliste
Percy, propriété de BrowserStack depuis 2020, joue dans un registre différent. Là où Chromatic est spécialiste, Percy est généraliste. Il s'intègre avec de nombreux frameworks et outils, pas seulement Storybook.
Comment Percy fonctionne
Percy s'intègre dans vos tests existants via un SDK. Que vous utilisiez Cypress, Playwright, Selenium, Storybook ou un autre outil, vous ajoutez des appels Percy à vos scénarios. Ces appels capturent l'état de la page à un moment donné et envoient la capture vers le cloud Percy pour comparaison.
L'intégration CI/CD est au cœur du workflow : chaque pull request déclenche une suite de captures visuelles, et les résultats apparaissent directement dans l'interface de votre outil de versioning.
Les forces de Percy
L'universalité. Percy n'est pas lié à un framework. Cypress, Playwright, Selenium, Storybook, Ember, React — Percy s'adapte. Si vous changez de stack technique, vos tests visuels Percy survivent (avec des ajustements). C'est un avantage stratégique pour les organisations qui ne veulent pas parier leur qualité visuelle sur un seul écosystème.
Les tests de pages complètes. Contrairement à Chromatic, Percy peut capturer des pages entières dans leur contexte réel. Vos composants assemblés, vos mises en page complètes, vos parcours utilisateur — tout est testable visuellement. C'est souvent là que les bugs les plus importants se cachent, dans les interstices entre les composants.
Le rendu multi-navigateur réel. Grâce à BrowserStack, Percy effectue ses captures sur de vrais navigateurs, pas de l'émulation. Chrome, Firefox, Safari — vous voyez exactement ce que vos utilisateurs verront. Les différences de rendu inter-navigateurs sont détectées, pas simulées.
L'intégration pull request. Le workflow de Percy est centré sur les pull requests. Les résultats visuels apparaissent comme un check dans votre merge request, avec un lien direct vers le dashboard de comparaison. Le cycle feedback est court : vous poussez du code, Percy vous montre les conséquences visuelles, vous approuvez ou corrigez.
Le responsive testing. Percy permet de capturer chaque page à plusieurs tailles de viewport, détectant les régressions spécifiques au responsive. Un bug qui n'apparaît qu'en mobile est attrapé aussi facilement qu'un bug desktop.
Les faiblesses de Percy
La comparaison pixel par pixel. C'est la même faiblesse que dans le comparatif avec Applitools. Percy utilise une comparaison basée sur les pixels, pas sur la structure. Le résultat est un taux de faux positifs plus élevé, surtout pour les projets avec du contenu dynamique, des animations, ou des rendus de polices variables d'un environnement à l'autre.
Les équipes finissent par ajouter des zones d'exclusion partout, ce qui revient à mettre des pansements sur un problème architectural. On obtient un outil censé tout voir qui a de plus en plus de zones aveugles — l'ironie n'échappe à personne.
L'intégration Storybook inférieure à Chromatic. Percy propose un plugin Storybook, mais l'expérience n'est pas aussi fluide que Chromatic. La détection de changements est moins fine, la capture est moins optimisée, et le workflow de review est moins intégré à l'écosystème Storybook. Si Storybook est votre monde, Chromatic fait mieux.
Le coût. Comme Chromatic, Percy facture à l'usage. Le free tier est limité, et les tarifs montent avec le volume de captures. Les captures multi-navigateur et multi-viewport multiplient rapidement le compteur. Une page testée sur 3 navigateurs et 3 tailles de viewport, c'est 9 captures pour une seule page.
La latence cloud. Envoyer des captures vers le cloud, les traiter, et rapatrier les résultats prend du temps. Sur des suites de tests volumineuses, la boucle de feedback peut atteindre plusieurs minutes — une éternité dans un workflow de développement moderne.
Comparaison directe : 6 dimensions clés
1. Périmètre de test
Chromatic teste des composants isolés via Storybook. Percy teste des pages complètes et des composants. Si votre besoin se limite aux composants Storybook, Chromatic est plus efficient. Si vous avez besoin de tester des pages assemblées, Percy est votre seule option entre les deux.
Avantage : Percy pour la couverture, Chromatic pour la profondeur composant.
2. Facilité d'adoption
Si vous avez déjà Storybook, Chromatic s'active en quelques minutes — pas de SDK, pas de tests à écrire. Percy demande d'intégrer un SDK et d'ajouter des appels de capture dans vos tests existants. C'est plus de travail initial, mais c'est aussi plus flexible.
Avantage : Chromatic si Storybook existe, Percy sinon.
3. Qualité de la détection
Chromatic utilise une comparaison intelligente optimisée pour les composants Storybook, avec une bonne gestion du bruit. Percy utilise une comparaison pixel par pixel plus sujette aux faux positifs. Ni l'un ni l'autre n'atteint le niveau de sophistication IA d'Applitools.
Avantage : Chromatic, modérément.
4. Workflow collaboratif
Les deux proposent des dashboards de review avec approbation/rejet. Chromatic intègre mieux le workflow de design review avec sa publication Storybook en ligne. Percy intègre mieux le workflow de développement avec ses checks de pull request.
Avantage : dépend de votre culture — design-driven (Chromatic) ou code-driven (Percy).
5. Rendu multi-navigateur
Percy utilise de vrais navigateurs via BrowserStack. Chromatic utilise Chrome par défaut, avec un support multi-navigateur plus récent et moins étendu. Pour la couverture cross-browser, Percy a un avantage structurel grâce à l'infrastructure BrowserStack.
Avantage : Percy, nettement.
6. Coût total
Les deux facturent à l'usage avec des paliers. Chromatic peut être plus économique si vous n'avez pas beaucoup de stories (puisqu'il ne capture que celles qui changent). Percy peut coûter plus cher avec les multiplicateurs navigateur/viewport. Dans les deux cas, le coût réel dépend de votre volume et de votre fréquence de test.
Avantage : variable — faites vos calculs avec vos vrais volumes.
Le point aveugle commun : cloud-only et payant
Voilà l'essentiel que ce comparatif doit mettre en lumière : Chromatic et Percy partagent les mêmes limitations structurelles.
Tous deux sont cloud-only. Vos captures d'écran — des images de votre application, potentiellement avec des données sensibles — quittent votre infrastructure pour être traitées par un tiers. En 2026, avec le RGPD, la directive NIS2, et une sensibilisation croissante à la souveraineté numérique, c'est une contrainte que de plus en plus d'organisations trouvent difficile à accepter.
Tous deux deviennent payants au-delà du free tier. Et le passage du gratuit au payant peut être abrupt. Le free tier est un produit d'appel — suffisant pour tomber amoureux de l'outil, insuffisant pour l'utiliser en production. Le modèle à l'usage signifie que votre investissement dans la qualité visuelle est directement limité par votre budget. Tester plus = payer plus. C'est logique du point de vue du fournisseur, mais questionnable du point de vue de la qualité.
Tous deux nécessitent des compétences techniques. Chromatic est plus accessible si vous avez déjà Storybook, mais Storybook lui-même est un outil de développeur. Percy nécessite l'intégration d'un SDK. Dans les deux cas, le QA non-technique, le designer ou le product owner dépend des développeurs pour créer et maintenir les tests.
Tous deux sont des dépendances externes. Votre capacité à tester visuellement dépend de la disponibilité d'un service tiers. Une panne chez Chromatic ou Percy, et vos pipelines CI/CD tournent à vide sur la partie visuelle. C'est le compromis classique du SaaS, mais c'est un compromis quand même.
Ces limitations ne sont pas des bugs — ce sont des choix de business model. Des choix parfaitement valides pour les fournisseurs, mais qui ne sont pas nécessairement alignés avec les intérêts de toutes les équipes.
Delta-QA : l'alternative locale et gratuite
Et si le test visuel pouvait être local, gratuit et accessible à tous ?
C'est la proposition de Delta-QA. Pas une version low-cost de Chromatic ou Percy, mais une approche fondamentalement différente :
Local par défaut. Vos captures d'écran ne quittent jamais votre machine. La comparaison s'exécute localement. Pas de cloud, pas de transfert de données, pas de dépendance externe. Votre conformité RGPD vous remercie, et votre équipe sécurité aussi.
Gratuit, sans astérisque. Pas de free tier avec un compteur qui tourne. Pas de palier « enterprise » pour débloquer des fonctionnalités. Delta-QA est gratuit, point. Vous testez 10 pages ou 10 000, le prix est le même : zéro. La qualité visuelle de votre application ne devrait pas être rationnée par un budget.
No-code, vraiment. Pas de Storybook requis, pas de SDK à intégrer, pas de tests à écrire. Vous pointez Delta-QA vers vos pages, il capture et compare. Un QA junior, un designer vérifiant ses maquettes, un product owner validant un sprint — tout le monde peut l'utiliser dès le premier jour. C'est la démocratisation du test visuel, pas sa réservation aux happy few qui maîtrisent JavaScript.
Pages complètes et composants. Contrairement à Chromatic (composants only) et comme Percy (mais sans la complexité), Delta-QA teste vos pages dans leur contexte réel. Les bugs de composition, les problèmes de responsive, les régressions de mise en page — tout est visible.
Complémentaire, pas concurrent. Si vous utilisez déjà Chromatic pour vos composants Storybook, Delta-QA peut compléter votre couverture en testant les pages assemblées. Si vous utilisez Percy, Delta-QA peut servir de filet de sécurité local pour les tests rapides sans attendre le cloud. Ce n'est pas un jeu à somme nulle.
Le test visuel est trop important pour être limité par un budget, une stack technique, ou un niveau de compétence. Chaque équipe qui produit une interface utilisateur mérite de pouvoir vérifier que cette interface ne régresse pas — simplement, localement, et sans contrainte.
Essayer Delta-QA Gratuitement →
FAQ
Chromatic fonctionne-t-il sans Storybook ?
Non. Chromatic est conçu exclusivement pour Storybook et ne fonctionne pas sans lui. Si vous n'utilisez pas Storybook pour développer vos composants, Chromatic n'est pas une option. Percy ou Delta-QA sont des alternatives qui fonctionnent indépendamment de Storybook.
Percy est-il meilleur que Chromatic pour le test visuel ?
Cela dépend de votre contexte. Si vous utilisez Storybook et que votre priorité est le test de composants, Chromatic offre une expérience supérieure avec moins de configuration. Si vous avez besoin de tester des pages complètes sur plusieurs navigateurs, Percy est plus adapté. Les deux ont des forces complémentaires.
Combien coûtent Chromatic et Percy ?
Les deux proposent un free tier limité en nombre de captures mensuelles. Au-delà, la facturation est à l'usage. Les tarifs exacts dépendent du volume et du plan choisi — contactez leurs équipes commerciales pour des devis précis. Le coût peut monter rapidement pour les projets avec beaucoup de composants ou de pages, surtout avec le multiplier multi-navigateur de Percy.
Peut-on utiliser Chromatic et Percy ensemble ?
Techniquement oui. Vous pourriez utiliser Chromatic pour le test visuel de composants via Storybook et Percy pour le test visuel de pages complètes. En pratique, peu d'équipes font ce choix en raison du coût cumulé et de la complexité de gestion de deux outils de test visuel distincts.
Chromatic détecte-t-il les bugs de mise en page entre composants ?
Non. Chromatic teste les composants en isolation dans Storybook. Les problèmes qui n'apparaissent que lorsque les composants sont assemblés dans une page réelle (conflits de CSS, problèmes de z-index, débordements) ne sont pas détectés. Pour cela, il faut un outil qui teste des pages complètes, comme Percy ou Delta-QA.
Existe-t-il une alternative gratuite et locale à Chromatic et Percy ?
Oui. Delta-QA est un outil de test visuel no-code qui s'exécute localement sur votre machine. Il est gratuit sans limite de captures, ne nécessite pas de compétences en développement, et ne transfère aucune donnée vers un cloud tiers. C'est une alternative pour les équipes qui cherchent un test visuel accessible, souverain et sans coût récurrent.
Comment migrer de Chromatic ou Percy vers Delta-QA ?
La migration est simple puisque Delta-QA ne dépend pas de vos tests existants. Vous pouvez commencer à utiliser Delta-QA en parallèle sans toucher à votre configuration Chromatic ou Percy. Pointez Delta-QA vers vos pages, créez vos premières références visuelles, et évaluez les résultats. Une fois satisfait, vous pouvez réduire ou arrêter votre utilisation des outils cloud.
Votre test visuel mérite mieux qu'un compteur de captures. Essayez l'alternative locale.