Outils de test de régression visuelle : Percy, Applitools, BackstopJS et Diffy comparés

Outils de test de régression visuelle : la réponse courte

Les quatre font la même chose à la base : capturer une page, la comparer à une référence que quelqu'un a approuvée, et montrer ce qui a changé. Ils diffèrent par l'endroit où la capture est faite, ce qui déclenche une comparaison, et à qui ils s'adressent.

Percy et Applitools sont conçus pour les équipes de développement. Une ligne dans vos tests de bout en bout envoie la page vers leur cloud, où elle est rendue dans plusieurs navigateurs et largeurs, et un relecteur approuve ou rejette les changements avant que la pull request soit fusionnée. BackstopJS fait la même boucle sur votre propre machine ou serveur CI, gratuitement, configurée dans un fichier JSON. Diffy part d'une liste d'URL plutôt que de code, et s'adresse aux agences, à la QA et aux chefs de projet autant qu'aux développeurs.

Trois d'entre eux peuvent aussi surveiller la production. Le Website Scanner de Percy et Applitools Autonomous scannent un site à partir de son sitemap selon un calendrier, et Diffy capture la production aux jours et heures que vous choisissez. Donc « des captures programmées du site en ligne » ne distingue aucun d'entre eux. Ce qui diffère, c'est le reste : comment les comparaisons tolèrent le bruit, ce que vous payez par capture, et ce qui tourne à côté.

Comment fonctionne Percy

Percy, qui fait partie de BrowserStack, est piloté par un SDK dans vos tests. À chaque snapshot, il capture le DOM de la page et l'envoie à Percy, qui le rend en parallèle sur plusieurs navigateurs et largeurs. Les nouveaux projets utilisent Chrome, Firefox, Edge et Safari par défaut. Par défaut, Percy rend les snapshots avec JavaScript désactivé, parce que le DOM reçu contient déjà l'état de la page.

Chaque exécution de vos tests crée un build. Percy compare chaque capture à la référence approuvée, et les relecteurs approuvent des captures une par une, par groupe ou tout le build, ou demandent des changements avant la fusion. Les captures approuvées restent valables pour toute la durée de vie de la branche. Percy annonce plus de 50 intégrations avec des frameworks de test et des services CI.

Son Website Scanner sans code est un produit séparé : il lit votre sitemap XML et lance des scans horaires, quotidiens ou hebdomadaires de la production ou de la préproduction, avec des alertes, sans code ni installation.

Comment fonctionne Applitools

Applitools Eyes tourne lui aussi depuis vos tests, avec des SDK pour plus de 50 frameworks dont Playwright, Cypress, Selenium, Storybook et Appium. Son Ultrafast Grid prend le DOM, le CSS et les ressources de la page, et rend des checkpoints sur les navigateurs et appareils que vous choisissez : navigateurs de bureau, appareils Android émulés et simulateurs iOS exécutant Safari.

Ce qui le distingue, c'est sa façon de comparer. Plutôt que de compter les pixels, Eyes utilise ce qu'il appelle le Visual AI, avec des niveaux de correspondance que vous choisissez par page ou par zone. Strict signale ce qu'une personne remarquerait et ignore les différences de rendu. Layout vérifie seulement que les éléments gardent leur position, ce qui convient au contenu dynamique ou traduit. Dynamic accepte qu'une date, un nombre ou un e-mail change, tant qu'il garde son format. Exact est au pixel près, et Applitools lui-même ne le recommande pas pour un usage courant. Un seul clic peut accepter le même changement sur tous les viewports.

Applitools Autonomous est son produit sans code : il explore votre sitemap pour construire une suite de départ, peut tourner selon un calendrier pour repérer les changements venant de contenu tiers ou généré par les utilisateurs, et signale les erreurs HTTP, les délais dépassés et les pages apparues ou disparues.

Comment fonctionne BackstopJS

BackstopJS est un projet open source sous licence MIT. Vous l'installez avec npm, décrivez vos pages dans backstop.json (chaque scénario a un label et une URL, plus au moins un viewport), et le lancez sur votre propre machine ou serveur CI. Il pilote Chrome headless via Puppeteer par défaut, ou Chromium, Firefox ou WebKit via Playwright.

« backstop test » prend de nouvelles captures et les compare à vos images de référence ; « backstop approve » transforme les derniers résultats en nouvelles références. misMatchThreshold fixe le pourcentage de pixels autorisés à différer, 0,1 par défaut. Pour éviter les différences entre systèmes d'exploitation, il peut s'exécuter dans son propre conteneur Docker, et il peut écrire des rapports JUnit pour la CI.

Il n'y a ni tableau de bord hébergé, ni compte, ni planificateur. Pour surveiller la production, vous pointez des scénarios vers des URL en ligne et les lancez depuis votre propre tâche cron ou calendrier CI. La dernière version sur npm est la 6.3.25, de septembre 2024, et le dépôt recevait encore des commits en septembre 2026.

Comment fonctionne Diffy

Diffy fonctionne à partir d'URL, sans rien à installer sur le site. Il charge vos pages dans un vrai navigateur sur ses propres serveurs, à des points de rupture allant de 240 à 2000 pixels de large, et peut définir des cookies et des en-têtes ou se connecter, avec des préréglages pour Drupal, WordPress et Netlify.

Sa comparaison principale se fait environnement contre environnement : production contre préproduction ou dev, avec le domaine remplacé dans chaque URL à votre place. Il peut aussi comparer une page à son scan précédent, ou à une frame Figma. Un calendrier capture la production aux jours et heures que vous choisissez, avec des notifications par e-mail, Slack et webhook. Pro ajoute l'automatisation CI, avec des configurations documentées pour GitHub Actions et CircleCI.

Pour WordPress, Diffy propose une extension gratuite sur WordPress.org qui ajoute un lien « update now with Diffy visual testing » à côté de chaque mise à jour disponible : elle capture le site, lance la mise à jour, capture à nouveau et compare. Elle nécessite un compte Diffy, que l'extension peut créer.

Ce que détectent les outils de régression visuelle, et ce qui leur échappe

Ils détectent ce qui change à l'écran : un en-tête qui chevauche le contenu, une grille qui s'est effondrée, un bouton poussé hors de la page, une police qui n'a pas chargé, une section qui a disparu. Lancés en CI, Percy, Applitools et BackstopJS le détectent avant que le code soit fusionné, ce qui est le moment le moins coûteux pour corriger.

Ce qui se ressemble leur échappe. Un paiement qui s'affiche parfaitement mais n'accepte plus les paiements, un formulaire qui n'envoie rien, une page sortie de l'index de recherche, ou un site tombé à 3 h du matin passent tous une comparaison de captures, ou ne sont jamais regardés. Une revue de pull request ne voit aussi que ce qu'il y a dans la pull request. Une mise à jour automatique d'extension, un changement côté hébergement, une nouvelle bannière de cookies ou un script tiers qui a changé de lui-même atteignent la production sans passer par votre CI.

Le bruit est l'autre limite. Les carrousels, les publicités, les dates et les images en chargement différé changent entre deux captures. Chaque produit le gère à sa façon : Applitools avec des niveaux de correspondance, BackstopJS et Percy avec des seuils et des zones ignorées, Diffy et Relvato avec des masques. Attendez-vous à passer du temps à régler ça, quel que soit votre choix.

Tarifs en novembre 2026

Les produits comptent des choses différentes, donc comparez avec attention. Percy compte une capture comme une page dans un navigateur à une largeur : deux pages dans deux navigateurs à trois largeurs, ça fait douze. Applitools compte des checkpoints, pour une page ou un composant. Diffy compte des captures sans préciser comment les points de rupture les multiplient. Relvato compte des exécutions, et une exécution couvre chaque page, viewport et navigateur que vous avez configurés pour ce moniteur.

Percy : gratuit pour 5 000 captures par mois, avec un nombre illimité d'utilisateurs et de projets et un mois d'historique de build. Le plan Desktop coûte 199 $ par mois en paiement annuel ou 249 $ en mensuel pour 10 000 captures, et 0,036 $ pour chaque capture supplémentaire. Les vrais appareils mobiles démarrent à 599 $ par mois en paiement annuel. Le prix du Website Scanner n'est pas publié sur ces pages.

Applitools : pas d'offre gratuite, seulement un essai gratuit, que ses conditions limitent à 100 checkpoints par mois et par utilisateur. Starter coûte 667 $ par mois, payé annuellement, pour « 100,000 component checkpoints or 1,000 page checkpoints » avec un nombre illimité d'utilisateurs ; la page tarifaire ne précise pas sur quelle période. Professional et Enterprise sont sur devis.

BackstopJS : gratuit. Vous ne payez que la machine ou les minutes de CI sur lesquelles il tourne.

Diffy : gratuit pour 500 captures par mois, deux environnements et un mois de données. Pro coûte 67 $ par mois en paiement annuel ou 80 $ en mensuel pour 2 000 captures, jusqu'à 250 $ ou 300 $ pour 30 000, avec six mois de données.

Relvato : le moniteur de régression visuelle est inclus dans toutes les offres. Free couvre un site et 100 exécutions par mois ; Pro coûte 29 $ par mois (24 $ en paiement annuel) pour un site ; Business 79 $ pour cinq sites ; Agency 199 $ pour 25. Chaque offre inclut aussi tous les autres moniteurs, donc le prix ne concerne pas que la régression visuelle.

Lequel choisir

Choisissez Percy si votre équipe livre par pull requests, veut un rendu multi-navigateur sans faire tourner les navigateurs elle-même, et un palier gratuit généreux pour démarrer. Choisissez Applitools si les faux positifs liés au contenu dynamique vous coûtent du temps, que vous testez des composants et de nombreux appareils, et que le budget le permet ; ses niveaux de correspondance sont ici le moyen le plus flexible de tolérer le bruit. Choisissez BackstopJS si vous voulez du gratuit, open source et auto-hébergé, sans qu'aucune capture ne quitte vos serveurs, et que gérer vous-même la config et les références ne vous dérange pas. Choisissez Diffy si vous gérez des sites sans suite de tests, voulez comparer la production avec la préproduction, ou voulez comparer des captures avant et après les mises à jour WordPress depuis wp-admin.

Ne choisissez pas Relvato pour tester avant la fusion. Il ne prend pas de snapshots dans votre suite de tests, ne teste pas de composants Storybook, et ne vérifie pas le build de preview d'une pull request : il vérifie le site en ligne. Si vous avez besoin d'une porte en CI, choisissez un des quatre.

Comment ils fonctionnent ensemble

Un outil de CI et un moniteur de production répondent à des questions différentes. Percy, Applitools ou BackstopJS vous disent que ce changement peut être fusionné sans risque. Un moniteur vous dit que le site en ligne a toujours la bonne apparence et fonctionne toujours bien, quelle qu'en soit la cause : un déploiement, une mise à jour d'extension, un changement d'hébergement ou un script tiers.

Une configuration courante consiste à utiliser un outil visuel en CI pour les pull requests, et des moniteurs sur la production pour tout ce qui ne passe jamais par la CI. Si vous utilisez déjà les scans programmés de production de Diffy ou Percy, Relvato ajoute ce qu'ils ne couvrent pas : des moniteurs d'uptime, de paiement, de connexion, de formulaires, de SEO et de sécurité sur le même site, relancés après chaque mise à jour ou déploiement.

Comment Relvato s'y prend

Le moniteur de régression visuelle de Relvato capture les pages que vous choisissez dans un vrai navigateur, sur ordinateur (1280 pixels de large) et mobile (390 pixels), dans Chromium, Firefox ou WebKit, le moteur de Safari. Avant chaque capture de page entière, il arrête les animations, attend les polices et les images en chargement différé, masque les widgets de cookies et de chat, et recouvre les zones que vous avez masquées. Il compare ensuite la capture pixel par pixel à la référence que vous avez approuvée, à la sensibilité que vous avez réglée. Un moniteur couvre jusqu'à 40 combinaisons de page, de viewport et de navigateur.

Pour réduire le bruit, une capture qui échoue est reprise après que la page a eu le temps de se stabiliser, et la plus proche des deux est retenue. Un changement qui échoue encore passe par une relecture par IA de la zone concernée : un verdict confiant « no visible change » ou « content only » est affiché pour relecture plutôt que de déclencher une alerte, tandis que les gros changements et les erreurs sur la page font toujours échouer l'exécution. Quand un changement est voulu, vous approuvez la nouvelle référence en un clic (gérer les références). À côté, le moniteur de dérive de structure compare la façon dont la page est construite, ce qui détecte une section manquante qu'une capture peut masquer ; notre guide explique la différence.

Il n'a besoin d'aucune extension ni d'aucun script : il fonctionne depuis l'extérieur, sur n'importe quel site. Avec l'offre Free, vous cliquez sur « Run », ou il tourne selon son calendrier hebdomadaire une fois que vous avez prouvé que vous possédez le site. Pro ajoute des exécutions quotidiennes, et des relances après chaque mise à jour WordPress (via l'extension gratuite Relvato) et après chaque déploiement, par exemple depuis GitHub. Business tourne toutes les heures. La même exécution se trouve à côté de vos moniteurs d'uptime, de paiement et de SEO, pour qu'une page cassée et un paiement cassé apparaissent au même endroit.