Test de régression visuelle : processus automatisé de détection des changements non intentionnels dans l'apparence d'une interface utilisateur, par comparaison entre un état de référence (baseline) et un état actuel, permettant d'identifier les régressions de mise en page, de couleurs, de typographie ou d'espacement avant qu'elles n'atteignent la production.
BackstopJS est l'un de ces outils que tout le monde dans le monde du test visuel a croisé au moins une fois. Open source, gratuit, basé sur Puppeteer — il coche beaucoup de cases sur le papier. Et pendant longtemps, il a été la réponse par défaut à la question « comment faire du test visuel sans budget ? ».
Mais voici ce que personne ne vous dit dans le README de BackstopJS : gratuit ne veut pas dire sans coût. Le coût, il est dans les heures passées à écrire des fichiers de configuration JSON, dans les sessions de débogage CLI quand un test échoue sans explication claire, dans les dizaines de faux positifs générés par la comparaison pixel-à-pixel, et dans la barrière d'entrée qui exclut toute personne qui ne vit pas dans un terminal.
Delta-QA prend le problème par l'autre bout. Pas de code, pas de JSON, pas de CLI. Et surtout, une IA déterministe — pas un LLM — calibrée sur la perception humaine : elle ne signale que ce qu'un œil humain remarquerait et ignore le bruit de rendu, ce qui change fondamentalement la nature des résultats que vous obtenez.
Ce comparatif ne va pas vous dire que l'un est meilleur que l'autre dans l'absolu. Il va vous dire lequel correspond à votre réalité.
BackstopJS est gratuit, mais il faut coder le JSON, gérer le CLI et trier les faux positifs. Delta-QA fait du test visuel sans aucune config, en local et gratuitement, en ne signalant que ce qu'un œil humain remarquerait. Essayer Delta-QA gratuitement →
Ce qu'est BackstopJS — et ce qu'il exige de vous
BackstopJS est un outil de test de régression visuelle open source créé par Garris Shipon. Il utilise Puppeteer (ou Playwright, selon la configuration) pour naviguer sur vos pages, capturer des screenshots, et les comparer pixel par pixel avec des images de référence.
L'idée est élégante. L'exécution l'est moins.
La configuration JSON : le premier mur
Pour utiliser BackstopJS, vous devez écrire un fichier de configuration JSON qui décrit chaque scénario de test. Chaque page à tester est un objet dans un tableau, avec une URL, un label, des viewports, des sélecteurs, des actions de navigation — le tout dans une syntaxe JSON stricte où une virgule en trop fait tout planter.
Pour un site de 50 pages, ce fichier de configuration devient un document de plusieurs centaines de lignes. Il faut le maintenir manuellement à chaque ajout ou suppression de page. Il faut synchroniser les sélecteurs CSS quand le front-end évolue. Il faut gérer les cas où une page nécessite une authentification, un scroll, ou une interaction spécifique avant la capture.
Ce n'est pas un reproche — c'est la nature même de l'outil. BackstopJS est un outil technique conçu pour des profils techniques. Si vous êtes un développeur front-end à l'aise avec Node.js, npm et les fichiers de configuration, c'est parfaitement gérable. Si vous êtes un QA manuel, un product owner, ou un designer, ce fichier JSON est un mur.
La CLI : indispensable et excluante
BackstopJS fonctionne entièrement en ligne de commande. Vous initialisez un projet avec une commande, vous capturez les références avec une autre, vous lancez les tests avec une troisième, vous approuvez les nouvelles baselines avec une quatrième.
C'est un workflow parfaitement logique pour un développeur. C'est un workflow totalement opaque pour une personne non technique. Vous ne pouvez pas demander à un QA fonctionnel de « lancer les tests visuels » si cela implique d'ouvrir un terminal, de naviguer vers le bon répertoire, et de taper la bonne commande avec les bons arguments.
La comparaison pixel-à-pixel : le talon d'Achille
Et c'est ici que le problème fondamental de BackstopJS apparaît. L'outil compare des images — des captures d'écran rendues en pixels — et signale toute différence comme une régression potentielle.
Le problème, c'est qu'un pixel qui change ne signifie pas forcément qu'un humain verra une différence. L'anti-aliasing des polices varie entre deux rendus successifs. Un caret de curseur apparaît dans un champ de texte. Une animation n'est pas captée au même frame. Un sous-pixel de différence dans le rendu d'une bordure. Autant de faux positifs que vous devrez trier manuellement, un par un, à chaque exécution.
BackstopJS propose des mécanismes d'atténuation : des seuils de tolérance (misMatchThreshold), des sélecteurs pour cacher des éléments dynamiques, des zones d'exclusion. Mais chacun de ces mécanismes ajoute de la complexité à votre configuration, et aucun ne résout le problème fondamental : comparer des pixels, c'est comparer des symptômes, pas des causes.
Ce qu'est Delta-QA — et ce qu'il vous demande
Delta-QA est un outil de test de régression visuelle desktop et no-code. Vous l'installez, vous ouvrez votre site, vous naviguez — et l'outil fait le reste.
Zéro configuration, zéro code
Pas de fichier JSON à écrire. Pas de commande CLI à taper. Pas de sélecteurs CSS à maintenir. Vous ouvrez Delta-QA, vous entrez l'URL de votre site, vous cliquez sur les pages que vous voulez tester. L'outil capture l'état de chaque page et crée automatiquement les baselines.
La prochaine fois que vous lancez le test, Delta-QA compare le nouvel état avec la baseline et vous montre ce qui a changé. Si le changement est voulu, vous approuvez. Si c'est une régression, vous la signalez. Tout se passe dans une interface graphique conçue pour être lisible par n'importe qui — pas seulement par les personnes qui savent ce qu'est un DOM.
C'est un choix de conception délibéré, pas un compromis. Delta-QA a été construit pour les équipes réelles, celles où le test visuel est la responsabilité partagée de QA, designers, product owners et développeurs — pas seulement des développeurs.
La comparaison déterministe : le changement de paradigme
Voici la différence la plus fondamentale entre Delta-QA et BackstopJS, et elle mérite qu'on s'y arrête.
BackstopJS capture des screenshots et compare des pixels. Delta-QA, lui, s'appuie sur une IA de comparaison visuelle déterministe — pas un LLM : elle rend les deux pages dans un vrai navigateur et compare le résultat visuel tel qu'un œil humain le perçoit. C'est une différence qui n'est pas cosmétique — elle change la nature même des résultats.
Quand Delta-QA vous dit qu'il y a un changement, il ne vous montre pas un rectangle rouge sur une image. Il vous dit exactement ce qui a changé : « la font-size du titre H1 est passée de 32px à 28px », « la marge droite du conteneur principal a augmenté de 16px à 24px », « la couleur de fond du bouton CTA est passée de #2563EB à #1D4ED8 ».
Ce sont des informations actionnables. Vous savez quoi corriger, où le corriger, et comment vérifier que la correction est effective. Avec BackstopJS, vous savez qu'il y a une différence visuelle quelque part dans la capture — trouver exactement quoi et pourquoi nécessite une inspection manuelle.
Le moteur élimine aussi les faux positifs liés au rendu. Comme il est calibré sur la perception humaine et ne signale que ce qu'un œil remarquerait, les variations d'anti-aliasing, les différences de sous-pixels, les curseurs qui clignotent — tout cela passe sous le radar. Ce qui vous reste, ce sont uniquement les vrais changements.
Deux philosophies, deux publics
Le contraste entre BackstopJS et Delta-QA illustre un clivage fondamental dans le monde du test visuel : l'approche tooling-for-developers versus l'approche product-for-teams.
BackstopJS : la boîte à outils du développeur
BackstopJS est un outil de développeur, et il l'assume. Sa force, c'est sa flexibilité. Vous pouvez scripter n'importe quel scénario de navigation, cibler n'importe quel élément, personnaliser chaque paramètre de comparaison. Si vous avez besoin de capturer un screenshot après avoir cliqué sur trois menus déroulants, scrollé de 400 pixels, et attendu qu'une animation se termine — BackstopJS peut le faire, à condition que vous sachiez l'écrire.
Cette flexibilité a un coût : la courbe d'apprentissage. Chaque scénario complexe nécessite des heures de configuration et de débogage. Et chaque modification du front-end peut casser des scénarios existants, générant un coût de maintenance continu.
BackstopJS est aussi entièrement gratuit, sans aucune limite d'utilisation. C'est un avantage indéniable pour les développeurs indépendants et les petites équipes techniques qui ont plus de temps que de budget.
Delta-QA : le produit pour toute l'équipe
Delta-QA est un produit, pas un outil. La distinction est importante. Un outil vous donne des capacités. Un produit vous donne des résultats. Vous n'avez pas besoin de savoir comment fonctionne le moteur de comparaison visuelle pour l'utiliser — vous avez juste besoin de cliquer sur les pages que vous voulez tester.
Cette approche product-first signifie que le test visuel n'est plus réservé aux développeurs. Un QA fonctionnel peut configurer une suite de tests visuels complète en une heure. Un designer peut vérifier que ses spécifications sont respectées en production. Un product owner peut valider un déploiement visuellement avant de donner le feu vert.
La version Desktop de Delta-QA est gratuite et sans limite de snapshots. Tout se passe en local — aucune donnée ne quitte votre machine.
Le pixel-à-pixel de BackstopJS exige du code et de la config — Delta-QA non. Comparaison visuelle déterministe no-code, données gardées en local et version Desktop gratuite sans inscription. Essayer Delta-QA gratuitement →
La question des faux positifs : là où tout se joue
Si vous avez déjà utilisé un outil de test visuel basé sur la comparaison de pixels, vous connaissez la douleur des faux positifs. Ce moment où votre suite de tests vous signale 47 « régressions » après un simple redéploiement, et vous passez deux heures à vérifier chacune pour découvrir que ce sont toutes des variations de rendu de polices.
Le problème avec la comparaison pixel-à-pixel
La comparaison pixel-à-pixel traite l'image rendue comme une matrice de pixels et calcule la différence entre deux matrices. C'est mathématiquement simple et conceptuellement intuitif. C'est aussi fondamentalement inadapté aux réalités du rendu web.
Le rendu d'une page web n'est pas déterministe au niveau du pixel. Le même HTML, le même CSS, le même navigateur, sur la même machine, peuvent produire des images légèrement différentes d'un rendu à l'autre. Les polices sont anti-aliasées différemment selon l'état du cache de rendu. Les sous-pixels sont arrondis différemment. Les animations JavaScript ne sont pas capturées au même millième de seconde.
BackstopJS gère ça avec un seuil de tolérance — vous dites à l'outil « ignore les différences inférieures à X% ». Mais c'est un compromis dangereux : un seuil trop bas noie vos résultats dans les faux positifs ; un seuil trop haut masque les vraies régressions. Il n'y a pas de valeur magique, et la bonne valeur change selon la page, le contenu, et le moment.
La réponse de Delta-QA
Delta-QA contourne entièrement ce problème en allant au-delà du pixel-à-pixel. Son moteur déterministe, calibré sur la perception humaine, ne signale que ce qu'un œil remarquerait : si la font-size n'a pas bougé visuellement, rien n'est signalé, quel que soit l'état de l'anti-aliasing ou du cache de rendu.
Le résultat concret : avec Delta-QA, quand il y a un changement signalé, c'est un vrai changement. Pas un artefact de rendu, pas une variation de sous-pixel, pas un caret qui clignote. Un changement que l'œil remarque réellement sur votre page. La confiance dans les résultats de vos tests visuels passe de « il faut vérifier » à « on peut agir ».
Maintenance à long terme : le coût caché de BackstopJS
La gratuité de BackstopJS est séduisante. Mais dans un contexte d'équipe, le vrai coût d'un outil n'est pas son prix de licence — c'est le temps passé à le maintenir.
La dette de configuration
Chaque page testée dans BackstopJS est un scénario dans votre fichier de configuration. Chaque scénario contient des sélecteurs, des actions, des seuils. Quand votre front-end évolue — une classe CSS renommée, un élément déplacé, une page restructurée — il faut mettre à jour les scénarios correspondants.
Sur un site de 100 pages avec des déploiements hebdomadaires, cette maintenance de configuration devient un poste de travail à part entière. Et comme c'est du JSON maintenu manuellement, les erreurs sont fréquentes et silencieuses — un scénario mal configuré ne génère pas forcément une erreur, il génère simplement des résultats incorrects.
La dette de baselines
BackstopJS stocke les baselines sous forme d'images dans votre projet. Pour 100 pages sur 3 viewports, c'est 300 fichiers image. Chaque mise à jour de baseline nécessite une nouvelle capture et une approbation manuelle. Les baselines vieillissent, et personne ne sait exactement quand la dernière « bonne » baseline a été approuvée et par qui.
Delta-QA gère les baselines nativement avec un historique complet, un workflow d'approbation intégré, et une traçabilité de chaque changement. La différence n'est pas technique — elle est organisationnelle.
Le coût humain
Le coût le plus souvent ignoré, c'est le coût humain. BackstopJS nécessite un « champion » dans l'équipe — quelqu'un qui comprend l'outil, maintient la configuration, résout les problèmes, forme les nouveaux. Quand cette personne quitte l'équipe, l'outil meurt souvent avec elle.
Delta-QA, par sa nature no-code, distribue la responsabilité du test visuel sur toute l'équipe. N'importe quel membre peut lancer un test, lire les résultats, et approuver ou rejeter un changement. Le risque de personne unique disparaît.
BackstopJS fait ça mieux
La transparence exige de reconnaître les forces de BackstopJS.
La gratuité totale. BackstopJS est open source sous licence MIT. Pas de tier gratuit avec des limites, pas de version payante avec plus de fonctionnalités. Tout est gratuit, tout le temps. Pour un développeur indépendant qui teste son projet personnel, c'est imbattable.
La flexibilité de scripting. Si vous avez besoin de scénarios de navigation complexes avec des interactions spécifiques, BackstopJS vous donne un contrôle total via les scripts Puppeteer. Vous pouvez simuler n'importe quel comportement utilisateur, dans n'importe quel ordre, avec n'importe quelle attente.
L'intégration CI/CD. BackstopJS s'intègre naturellement dans un pipeline CI/CD. Un simple appel en ligne de commande dans votre script de build, et vos tests visuels s'exécutent à chaque commit. Si votre workflow est entièrement centré sur le pipeline, c'est un avantage.
La communauté. BackstopJS existe depuis des années et bénéficie d'une communauté active, de nombreux exemples, et d'une documentation solide. Quand vous rencontrez un problème, il y a de bonnes chances que quelqu'un l'ait déjà résolu sur GitHub ou Stack Overflow.
Delta-QA fait ça mieux
L'accessibilité. Aucun prérequis technique pour utiliser Delta-QA. Pas de Node.js à installer, pas de npm à comprendre, pas de JSON à écrire. Si vous savez naviguer sur un site web, vous savez utiliser Delta-QA.
La qualité des résultats. Le moteur de comparaison visuelle déterministe produit des résultats précis, actionnables et sans faux positifs de rendu. Vous savez exactement quoi a changé et pourquoi, sans devoir interpréter des rectangles rouges sur une image.
La couverture rapide. Ajouter 50 pages à votre suite de tests Delta-QA prend quelques minutes de navigation. Ajouter 50 pages à BackstopJS prend des heures de rédaction de configuration JSON et de débogage.
Le travail d'équipe. Delta-QA est conçu pour des équipes pluridisciplinaires. Le workflow d'approbation, l'interface visuelle, l'absence de code — tout est pensé pour que designers, QA, product owners et développeurs collaborent sur la qualité visuelle.
Le on-premise par défaut. Tout se passe localement. Aucune donnée n'est envoyée à l'extérieur. C'est un avantage structurel pour les entreprises soumises au RGPD ou à des politiques de souveraineté des données.
Chrome seul vs multi-navigateur : un angle mort de BackstopJS
Il y a une limite de BackstopJS dont on parle rarement, et qui devient pourtant décisive dès que votre audience n'utilise pas exclusivement Chrome. BackstopJS s'appuie sur Puppeteer, donc sur Chromium. Concrètement, il teste Chrome — et uniquement Chrome. Si vous voulez vérifier le rendu sur Firefox ou sur Safari (WebKit), il vous faut un autre outil, ou un montage Playwright qui sort du cadre standard de BackstopJS.
Or un même site s'affiche différemment selon les moteurs de rendu : un gap flexbox interprété autrement, une police système absente, un backdrop-filter non supporté. C'est précisément ce que le test cross-browser adresse. Avec BackstopJS configuré par défaut, ces régressions spécifiques à Firefox ou Safari passent sous le radar : vous ne les verrez tout simplement pas.
Delta-QA capture et compare nativement sur Chrome, Firefox et WebKit (Safari). Le même scénario tourne sur les trois moteurs sans configuration supplémentaire. Et grâce à son moteur déterministe calibré sur la perception humaine, le résultat reste fiable : sur notre corpus de référence, Delta-QA affiche zéro faux positif sur 429 cas validés, là où une approche pixel-à-pixel multi-navigateur multiplierait au contraire le bruit (chaque moteur ayant son propre anti-aliasing). Ce moteur est notre IA déterministe — pas un LLM : il tourne en local, de façon déterministe, sans dépendance à un modèle tiers. C'est une IA propriétaire, issue de la recherche sur la régression visuelle et étendue par notre R&D, qui génère aussi les cas de test et affûte l'algorithme.
Le temps de mise en route, chiffré
L'écart se mesure aussi à l'installation. Avec Delta-QA, vous téléchargez l'application et vous l'ouvrez : environ 30 secondes avant de capturer votre première page. Avec BackstopJS, il faut un npm install backstopjs, écrire le fichier de configuration, puis générer les baselines — comptez 15 à 30 minutes minimum avant le premier test exploitable, et davantage si votre site nécessite des scénarios de navigation scriptés.
Le verdict : qui devrait choisir quoi
Le choix entre BackstopJS et Delta-QA ne dépend pas de la qualité des outils — les deux sont compétents dans leur domaine. Il dépend de votre contexte.
Choisissez BackstopJS si vous êtes un développeur ou une équipe technique à l'aise avec Node.js, le CLI, et les fichiers de configuration JSON. Si vous avez besoin de scénarios de navigation scriptés avec un contrôle granulaire. Si votre workflow est centré sur le pipeline CI/CD et que vous voulez un outil gratuit et open source intégré à votre build. Et si vous êtes prêt à investir du temps dans la configuration et la maintenance pour bénéficier de la flexibilité maximale.
Choisissez Delta-QA si votre équipe inclut des profils non techniques qui doivent participer au test visuel. Si vous voulez des résultats précis et actionnables sans faux positifs de rendu. Si vous préférez une mise en place en minutes plutôt qu'en heures. Si la souveraineté des données est un critère. Et si vous voulez que le test visuel soit une responsabilité partagée, pas le fief d'un seul développeur.
Les deux outils peuvent aussi coexister. BackstopJS dans le pipeline CI/CD pour les tests automatisés à chaque commit, Delta-QA sur le poste des QA et designers pour les vérifications visuelles manuelles et les campagnes de test pré-release. C'est une combinaison que nous recommandons pour les équipes qui ont à la fois des développeurs motivés et des profils non techniques impliqués dans la qualité.
Prêt à troquer le JSON et le CLI contre quelques clics ? Lancez votre première comparaison avec Delta-QA, gratuitement et sans inscription. Essayer Delta-QA gratuitement →
Questions fréquentes
BackstopJS est gratuit, pourquoi choisir Delta-QA ?
Gratuit en licence ne signifie pas gratuit en coût total. BackstopJS exige du temps de configuration (fichiers JSON), de maintenance (mise à jour des scénarios à chaque changement de front-end), et de tri des faux positifs (comparaison pixel-à-pixel). Pour une équipe où le temps est la ressource la plus précieuse, Delta-QA réduit ce coût à presque zéro grâce au no-code et à son moteur de comparaison visuelle déterministe. La version Desktop de Delta-QA est également gratuite et sans limite de snapshots.
Delta-QA peut-il remplacer BackstopJS dans un pipeline CI/CD ?
Delta-QA est d'abord un outil desktop conçu pour des sessions de test interactives. Si votre besoin principal est l'exécution automatisée dans un pipeline CI/CD à chaque commit, BackstopJS ou la version Team de Delta-QA sont des options plus adaptées. Cela dit, beaucoup d'équipes découvrent que le test visuel le plus utile n'est pas celui qui tourne dans le pipeline — c'est celui que le QA lance avant de valider un déploiement.
Quelle est la différence concrète entre comparaison pixel et comparaison visuelle déterministe ?
La comparaison pixel compare des images : elle détecte que « quelque chose a changé visuellement » sans vous dire quoi. Le moteur de comparaison visuelle déterministe de Delta-QA vous donne un résultat lisible : il vous dit « la font-size du H1 est passée de 32px à 28px » ou « la marge du conteneur a augmenté de 8px ». L'une vous donne un signal, l'autre vous donne un diagnostic.
BackstopJS génère beaucoup de faux positifs — Delta-QA aussi ?
Non, et c'est l'avantage principal de son moteur déterministe. Les faux positifs de BackstopJS viennent de la comparaison pixel-à-pixel : anti-aliasing de polices, variations de sous-pixels, animations non synchronisées. Delta-QA va au-delà du pixel-à-pixel : calibré sur la perception humaine, il ne signale que ce qu'un œil remarquerait. Si rien n'a visuellement changé, Delta-QA ne signale rien — même si le rendu pixel varie légèrement entre deux captures.
Faut-il des compétences techniques pour utiliser Delta-QA ?
Non. Si vous savez naviguer sur un site web, vous savez utiliser Delta-QA. Pas de code, pas de terminal, pas de fichier de configuration. L'outil est conçu pour être utilisé par des QA fonctionnels, des designers, des product owners — pas uniquement par des développeurs.
BackstopJS est-il toujours activement maintenu ?
BackstopJS est un projet open source avec une communauté active, mais son rythme de développement est celui d'un projet communautaire, pas d'un produit commercial. Les mises à jour sont moins fréquentes qu'un produit maintenu par une équipe dédiée. L'outil reste fonctionnel et stable, mais l'innovation est plus lente.
Peut-on utiliser BackstopJS et Delta-QA ensemble ?
Oui, et c'est même une approche recommandée pour certaines équipes. BackstopJS dans le pipeline CI/CD pour une couverture automatisée continue, Delta-QA sur les postes des QA et designers pour les vérifications visuelles interactives et les campagnes pré-release. Les deux outils se complètent plutôt qu'ils ne se concurrencent.
Comment migrer de BackstopJS vers Delta-QA ?
Il n'y a pas de données à migrer au sens strict : les baselines de BackstopJS sont des images liées à sa propre logique pixel, et Delta-QA recrée ses propres références en enregistrant les scénarios par navigation. Concrètement, vous rejouez vos parcours principaux dans Delta-QA — quelques heures suffisent généralement pour recréer la suite de tests essentielle, sans toucher à un seul fichier JSON.
BackstopJS supporte-t-il les parcours utilisateur ?
Partiellement. BackstopJS peut exécuter des scripts Puppeteer avant la capture — cliquer, remplir un formulaire, scroller — mais il faut les écrire en JavaScript et les maintenir à la main. Delta-QA enregistre ces parcours directement par navigation, sans code : vous reproduisez l'action une fois, l'outil la rejoue à chaque test.