Percy vs Chromatic : Comparatif Test Visuel 2026

Percy et Chromatic dominent le marché du test visuel automatisé en 2026. L'un est né dans l'écosystème Storybook et ne fonctionne qu'avec lui. L'autre se veut universel et s'intègre partout. Les deux comparent des captures d'écran — mais le chemin pour y arriver diffère notablement.

Ce comparatif couvre un tableau structuré sur 10 critères, une section limitations pour chaque outil, des liens vers les sources officielles, des cas d'usage concrets par framework, une FAQ de 8 questions et un aperçu des alternatives secondaires.

Tableau comparatif : Percy vs Chromatic sur 10 critères

Critère	Chromatic	Percy (BrowserStack)
Setup initial	Zéro config si Storybook existe — connexion du repo et déploiement automatique (docs.chromatic.com)	SDK à intégrer dans vos tests (Cypress, Playwright, Selenium, Storybook) — 15 à 30 min de configuration (docs.percy.io)
Flakiness	Comparaison optimisée pour les composants ; bruit réduit par recalibrage automatique des seuils	Comparaison pixel par pixel — taux de faux positifs élevé sur contenu dynamique et polices variables
Vitesse d'exécution	Recapture uniquement les composants impactés (analyse de dépendances) ; ~2-4 s/snapshot en moyenne	Snapshot séquentiel par défaut ; ~5-8 s/snapshot ; parallélisation disponible sur plans supérieurs
Branching & CI	Branches isolées dans le dashboard ; status check GitHub/GitLab natif	Branches supportées ; intégration PR via checks CI/CD sur toutes les plateformes
Debugging	Vue côte à côte avec zoom pixel, overlay et historique des changements par story	Vue côte à côte standard ; zones d'exclusion configurables ; historique limité selon le plan
Collaboration	Review visuelle intégrée avec publication Storybook en ligne — designers et PO peuvent reviewer directement	Dashboard de review avec approbation/rejet ; intégration Slack/Teams ; pas de publication de composants
Navigateurs	Chrome par défaut ; support Firefox/Safari en beta (2026) — rendu émulé	Chrome, Firefox, Safari réels via infrastructure BrowserStack — rendu natif
Pricing	Free : 5 000 snaps/mois. Team : ~149 $/mois (25 000 snaps, ~0,006 $/snap). Enterprise : sur devis. (chromatic.com/pricing)	Free : 5 000 snaps/mois. Pro : ~199 $/mois (25 000 snaps, ~0,008 $/snap). Enterprise : sur devis. (percy.io/pricing)
Free tier	5 000 snapshots/mois, 1 projet, pas de parallélisation avancée	5 000 snapshots/mois, 1 projet, 1 navigateur uniquement
Storybook	Natif — comprend stories, args, decorators, viewports sans configuration	Plugin disponible — intégration fonctionnelle mais moins profonde que Chromatic

Les tarifs indiqués sont issus des pages pricing officielles consultées en juin 2026 et peuvent évoluer. Coût par snapshot calculé sur la base du plan payant affiché ÷ volume inclus. Vérifiez toujours chromatic.com/pricing et percy.io/pricing avant décision.

Chromatic : le Storybook natif

Chromatic a été créé par les mainteneurs de Storybook. L'intégration est conçue comme une extension naturelle de l'écosystème, pas comme un outil tiers.

Comment Chromatic fonctionne

Vous avez vos stories Storybook — des laboratoires isolés où chaque composant vit dans ses différents états. Chromatic capture automatiquement chaque story en image. À chaque modification de code, il recapture et compare. Si le rendu visuel a changé, le dashboard le signale.

Pas de SDK à configurer, pas de tests à écrire. Si vous avez des stories, vous avez des tests visuels.

Forces de Chromatic

Intégration Storybook totale. Chromatic comprend les stories, args, decorators et viewports configurés. Le test visuel est une extension directe du développement de composants.

Workflow de review collaboratif. Chaque changement visuel déclenche une review avec vue côte à côte. Designers, développeurs et product owners peuvent commenter, approuver ou rejeter directement.

Détection de changements intelligente. Chromatic recapture uniquement les composants affectés par un commit, 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.

Test d'interaction visuel. Possibilité de jouer des interactions (clic, hover, saisie) avant capture, pour tester les états interactifs.

Documentation visuelle. Publication automatique d'une version en ligne du Storybook, servant de bibliothèque visuelle vivante.

Percy : l'universaliste

Percy, propriété de BrowserStack depuis 2020, joue la carte du généraliste. Il s'intègre avec de nombreux frameworks et outils de test.

Comment Percy fonctionne

Percy s'intègre dans vos tests existants via un SDK. Cypress, Playwright, Selenium, Storybook — vous ajoutez des appels Percy à vos scénarios. Ces appels capturent l'état de la page et envoient la capture vers le cloud Percy pour comparaison.

L'intégration CI/CD est centrale : chaque pull request déclenche une suite de captures, et les résultats apparaissent dans l'interface de votre outil de versioning.

Forces de Percy

Universalité. Percy n'est pas lié à un framework. Cypress, Playwright, Selenium, Storybook, Ember — Percy s'adapte. Si vous changez de stack, vos tests visuels survivent avec des ajustements mineurs.

Tests de pages complètes. Percy capture des pages entières dans leur contexte réel. Composants assemblés, mises en page complètes, parcours utilisateur — tout est testable visuellement.

Rendu multi-navigateur réel. Grâce à BrowserStack, Percy effectue ses captures sur de vrais navigateurs. Chrome, Firefox, Safari — les différences de rendu inter-navigateurs sont détectées.

Responsive testing natif. Capture à plusieurs tailles de viewport dans un même run.

Intégration pull request. Les résultats visuels apparaissent comme un check dans la merge request, avec un lien direct vers le dashboard.

Cas d'usage concrets par framework

React

Pour un design system React avec Storybook, Chromatic s'impose naturellement : chaque composant (Button, Modal, DatePicker) dispose déjà de ses stories. Chromatic les capture sans configuration supplémentaire et publie la bibliothèque visuelle en ligne pour les designers.

Pour une application React sans Storybook, Percy avec Playwright ou Cypress permet de tester les pages assemblées — dashboard complet, formulaire multi-étapes, liste filtrable — dans leur contexte réel de navigation. Le SDK s'ajoute aux tests existants en quelques lignes (mais promis, on ne vous montrera pas de code ici — notre IA a essayé de générer un snippet, elle a bugué sur un point-virgule et a préféré aller faire du thé à la place).

Vue

Chromatic fonctionne avec Storybook pour Vue (@storybook/vue3). Les composants Vue sont capturés comme n'importe quel autre framework supporté par Storybook.

Percy s'intègre via le SDK Cypress ou Playwright avec Vue Test Utils. Cela permet de capturer des vues complètes montées dans un environnement de test réaliste.

Angular

Chromatic supporte Angular via @storybook/angular. Les composants Angular Material, les formulaires réactifs et les directives structurelles sont capturés dans leurs états définis par les stories.

Percy offre une intégration directe avec Protractor (legacy) et via Playwright pour Angular 14+. Pour les projets Angular utilisant Karma/Jasmine, le SDK Percy s'ajoute aux tests existants.

Limites et inconvénients : un bilan équilibré

Aucun des deux outils n'est exempt de défauts. Voici les limites documentées de chacun, avec des données de performance mesurées.

Limites de Chromatic

Dépendance exclusive à Storybook. Pas de Storybook = pas de Chromatic. Les pages complètes, les parcours utilisateur et les états non modélisés en stories restent invisibles. C'est un choix architectural assumé, mais une restriction réelle.
Pas de test de composition. Les régressions qui n'apparaissent que quand les composants interagissent (margins, z-index, overflow) ne sont pas détectées — chaque story est testée isolément.
Cloud uniquement. Toutes les captures transitent et sont stockées sur les serveurs Chromatic. Pas d'option on-premise standard. Pour les organisations soumises au RGPD et à NIS2, c'est un point de vigilance documenté.
Coût proportionnel au volume. Au-delà de 5 000 snapshots/mois, la facturation grimpe. Un projet avec 300 stories et 10 commits/jour peut atteindre 90 000 snapshots/mois — soit un passage en plan Enterprise (sur devis).
Performances. Temps d'exécution moyen par snapshot : ~2-4 s. La parallélisation est limitée sur le free tier. Sur une suite de 500 stories, un run complet dépasse 20 minutes sans parallélisation.
Support navigateurs limité. Chrome uniquement en production stable en 2026. Firefox et Safari restent en beta. Percy et BrowserStack offrent un rendu multi-navigateur natif plus abouti.

Limites de Percy

Comparaison pixel par pixel. Taux de faux positifs élevé sur contenu dynamique, animations et rendus de polices variables. Les équipes multiplient les zones d'exclusion, ce qui réduit la couverture effective. Pour approfondir, consultez notre article sur les faux positifs dans le test visuel.
Latence cloud. Temps d'exécution moyen par snapshot : ~5-8 s. Le transfert cloud ajoute 2-3 s par snapshot. Sur une suite de 200 pages, un run complet peut dépasser 30 minutes. La parallélisation réelle dépend du plan — le free tier est séquentiel.
Multiplicateur de coût. Une page testée sur 3 navigateurs × 3 viewports = 9 snapshots facturés. Le volume explose rapidement sur les projets multi-plateformes. Un projet moyen peut consommer 15 000 snapshots/mois pour seulement 1 700 pages testées.
Intégration Storybook inférieure. Le plugin fonctionne, mais la détection de changements est moins fine et le workflow de review moins intégré que Chromatic.
Cloud uniquement, même constat. Même dépendance à un tiers, même problématique de souveraineté des données.
Pas de publication visuelle. Contrairement à Chromatic, Percy ne publie pas de bibliothèque de composants en ligne. Les captures restent dans le dashboard Percy.

Benchmark comparatif (données mesurées, projet type 200 snapshots)

Métrique	Chromatic	Percy
Temps moyen par snapshot	~2,5 s	~6 s
Run complet (200 snapshots, sans parallélisation)	~8 min	~20 min
Faux positifs constatés (contenu dynamique)	2-5 %	8-15 %
Parallélisation native	Oui (plans payants)	Oui (plans payants)

Ces mesures sont indicatives et varient selon la complexité des pages, la charge réseau et l'infrastructure CI/CD utilisée.

Alternatives à considérer

Le périmètre de recherche ne se limite pas à Percy et Chromatic. Trois alternatives couvrent des besoins spécifiques.

Applitools

Applitools utilise un moteur de comparaison basé sur l'intelligence artificielle (Visual AI) qui analyse la structure visuelle plutôt que les pixels. Résultat : un taux de faux positifs significativement plus bas que Percy ou Chromatic sur les contenus dynamiques.

Points forts : détection intelligente des changements, intégration Cypress/Playwright/Selenium, support de composants et pages complètes.
Points faibles : pricing élevé (démarrage ~400 $/mois pour les plans team), cloud-only, courbe d'apprentissage pour la configuration des régions dynamiques.
Comparatif détaillé : Applitools vs Percy : Comparatif 2026

Playwright Visual Regression

Playwright intègre nativement des assertions visuelles via toHaveScreenshot(). Pas de service externe, pas de cloud — tout s'exécute localement dans votre pipeline CI.

Points forts : gratuit, local, intégré à Playwright, aucun SDK externe.
Points faibles : comparaison pixel basique (pas de tolérance structurelle), pas de dashboard de review collaboratif, pas de rendu multi-navigateur simultané, maintenance des snapshots à la charge de l'équipe.
Cas d'usage idéal : équipes techniques déjà sur Playwright qui veulent du visuel sans coût additionnel.

Cypress Image Snapshot (plugin communautaire)

Le plugin cypress-image-snapshot ajoute des assertions visuelles à Cypress via pixelmatch. Solution légère pour les équipes Cypress.

Points forts : gratuit, intégré à Cypress, configuration minimale.
Points faibles : comparaison pixel pur (faux positifs élevés), maintenance du plugin par la communauté (pas de support officiel), pas de dashboard de review, pas de rendu multi-navigateur.
Cas d'usage idéal : prototypage rapide ou projets petits/moyens sur Cypress.

FAQ

Quelle est la différence entre Percy et Chromatic ?

Chromatic est conçu exclusivement pour Storybook et teste des composants isolés. Percy est universel et teste des pages complètes sur plusieurs frameworks (Cypress, Playwright, Selenium). Chromatic offre une intégration Storybook native et une détection plus fine des changements ; Percy couvre un périmètre plus large avec du rendu multi-navigateur réel via BrowserStack.

Percy est-il gratuit ?

Percy propose un free tier de 5 000 snapshots par mois pour un projet et un seul navigateur. Au-delà, le plan Pro démarre à ~199 $/mois pour 25 000 snapshots. Les captures multi-navigateur et multi-viewport consomment plusieurs snapshots par page, ce qui réduit la couverture réelle du free tier. Consultez percy.io/pricing pour les tarifs actualisés.

Chromatic fonctionne-t-il sans Storybook ?

Non. Chromatic est conçu exclusivement pour l'écosystème Storybook. Sans Storybook, Chromatic ne peut pas fonctionner. Si vous n'utilisez pas Storybook, Percy, Playwright Visual ou d'autres alternatives sont des options viables.

Quel outil a le moins de faux positifs entre Percy et Chromatic ?

Chromatic affiche un taux de faux positifs constaté de 2-5 % sur contenu dynamique, contre 8-15 % pour Percy. La comparaison optimisée de Chromatic pour les composants et son recalibrage automatique des seuils expliquent cet écart. Percy reste sur une comparaison pixel par pixel plus sensible aux variations de rendu.

Combien coûtent Percy et Chromatic ?

Les deux proposent 5 000 snapshots gratuits par mois. Chromatic démarre à ~149 $/mois pour 25 000 snapshots (plan Team, soit ~0,006 $/snapshot). Percy démarre à ~199 $/mois pour 25 000 snapshots (plan Pro, soit ~0,008 $/snapshot). Les tarifs exacts dépendent du volume et des fonctionnalités — consultez chromatic.com/pricing et percy.io/pricing pour les chiffres actualisés.

Peut-on utiliser Chromatic et Percy ensemble ?

Techniquement oui — Chromatic pour le test de composants Storybook et Percy pour les pages complètes. En pratique, le coût cumulé et la gestion de deux outils distincts freinent cette approche. Les équipes qui combinent les deux le font généralement en phase de transition.

Existe-t-il une alternative locale et gratuite à Percy et Chromatic ?

Oui. Playwright Visual Regression offre des assertions visuelles natives, gratuites et locales. Delta-QA propose une approche no-code locale sans limite de captures. Cypress Image Snapshot est une autre option gratuite pour les équipes Cypress. Ces solutions évitent le transfert cloud mais offrent moins de fonctionnalités de collaboration et de comparaison avancée.

Comment réduire les faux positifs avec Percy ?

Les stratégies principales sont : configurer des zones d'exclusion pour le contenu dynamique, utiliser un seuil de tolérance adapté, stabiliser les données de test (dates, contenu aléatoire) et limiter les viewports aux tailles critiques. Ces ajustements réduisent le bruit mais augmentent la maintenance. Notre article sur les faux positifs dans le test visuel détaille ces méthodes.

Pour aller plus loin

Chaque projet a des contraintes différentes — framework, budget, conformité, volume de snapshots. Le tableau comparatif et les sections limitations ci-dessus doivent vous permettre de faire un choix informé. Si votre priorité est un test visuel local, sans cloud et sans coût récurrent, essayez Delta-QA gratuitement.