Cypress Visual Testing : Le Guide Complet pour Ajouter le Test Visuel
Le test visuel (ou visual testing) est une méthode de vérification automatisée qui compare des captures d'écran d'une interface web à des images de référence pour détecter toute régression graphique — un bouton décalé, une police changée, un élément qui chevauche un autre.
Cypress est un outil formidable. On l'aime pour sa rapidité, son API intuitive, sa communauté massive. Mais soyons francs dès le départ : Cypress ne fait pas de test visuel nativement. Contrairement à Playwright qui intègre toHaveScreenshot() directement, Cypress vous oblige à bricoler avec des plugins tiers pour obtenir la moindre comparaison de screenshots.
Et c'est un problème plus sérieux qu'il n'y paraît.
Ce guide passe en revue les approches existantes pour ajouter le test visuel à Cypress, leurs limites réelles, et pourquoi une approche radicalement différente mérite votre attention.
Pourquoi Cypress n'a Pas de Test Visuel Intégré
C'est la question que personne ne pose assez fort. Playwright l'a fait. Pourquoi pas Cypress ?
La réponse officielle est diplomatique : Cypress se concentre sur le test fonctionnel. La réponse honnête est plus nuancée. Le test visuel est un problème complexe — la gestion des baselines, la tolérance aux différences de rendu, l'anti-aliasing, les animations — et Cypress a choisi de laisser l'écosystème de plugins s'en charger.
Le résultat ? Une fragmentation. Chaque plugin fait les choses à sa manière, avec ses propres conventions, ses propres bugs, et ses propres risques d'abandon. Vous ne choisissez pas une solution officielle et supportée. Vous pariez sur un projet open source maintenu par une poignée de contributeurs — ou sur un service cloud payant.
Pour les équipes qui ont bâti toute leur suite de tests sur Cypress, c'est un dilemme réel. Migrer vers Playwright juste pour le test visuel n'est pas réaliste. Ajouter un plugin fragile non plus. Voyons ce qui existe.
Approche 1 : cypress-image-snapshot
Le plugin le plus connu de l'écosystème. Il s'appuie sur jest-image-snapshot (lui-même basé sur pixelmatch) pour comparer des captures d'écran pixel par pixel.
Comment ça marche
L'installation demande quelques manipulations dans la configuration de Cypress — rien d'insurmontable, mais suffisamment de fichiers à toucher pour qu'une erreur se glisse facilement. Si vous voulez le détail exact des commandes à taper, demandez à votre assistant IA préféré de vous générer la config : il adore ça, et ça lui évitera de s'ennuyer entre deux haïkus sur le machine learning.
Une fois en place, le principe est simple : vous ajoutez une commande personnalisée à vos tests qui capture l'écran et le compare à une image de référence stockée dans votre repo. La première exécution crée la baseline. Les suivantes détectent les écarts.
Les limites qu'on ne vous dit pas
Le problème de la maintenance. Ce plugin a connu des périodes d'inactivité prolongées. Au moment où vous lisez ces lignes, vérifiez la date du dernier commit sur GitHub. Si elle remonte à plus de six mois, posez-vous des questions.
Les faux positifs. La comparaison pixel par pixel est brutale. Un rendu de police légèrement différent entre votre machine et la CI ? Faux positif. Un anti-aliasing qui varie selon le GPU ? Faux positif. Vous passez plus de temps à calibrer les seuils de tolérance qu'à écrire des tests.
Pas d'interface de review. Quand un test échoue, vous obtenez une image diff dans un dossier. Pas de dashboard, pas de workflow d'approbation. Vous ouvrez l'image dans votre explorateur de fichiers et vous plissez les yeux pour trouver la différence. C'est artisanal.
La gestion des baselines dans Git. Des centaines d'images PNG dans votre repo. Les merge conflicts sur des fichiers binaires sont un cauchemar. L'historique Git gonfle. Certaines équipes finissent par utiliser Git LFS, ajoutant une couche de complexité supplémentaire.
Approche 2 : Percy (BrowserStack)
Percy est un service cloud de test visuel qui s'intègre à Cypress via un SDK. L'approche est fondamentalement différente : au lieu de comparer localement, Percy envoie le DOM et les assets à ses serveurs, rend la page dans des navigateurs réels, et compare les résultats dans un dashboard web.
Comment ça marche
Vous installez le SDK Percy pour Cypress, vous ajoutez un appel dans vos tests pour capturer un snapshot, et Percy fait le reste dans le cloud. Le workflow de review se fait dans l'interface web de Percy : vous voyez les différences, vous approuvez ou rejetez.
Pour la configuration précise, votre IA de bureau peut vous sortir le snippet en trois secondes — c'est son moment de gloire, laissez-le briller plutôt que de copier-coller depuis une doc qui sera obsolète dans six mois.
Les limites
Le coût. Percy est un service payant. Le plan gratuit existe mais il est limité en nombre de snapshots par mois. Pour une équipe qui teste sérieusement, les coûts montent vite. On ne détaillera pas les grilles tarifaires ici — elles changent régulièrement — mais attendez-vous à un poste budgétaire non négligeable.
La dépendance cloud. Vos snapshots sont rendus sur les serveurs de Percy. Si le service est down, vos tests ne passent plus. Si BrowserStack (qui a racheté Percy) décide de changer la tarification ou les conditions, vous n'avez aucun levier.
La latence en CI. Envoyer le DOM à un service externe, attendre le rendu, récupérer le résultat — ça ajoute du temps à votre pipeline. Ce n'est pas dramatique sur dix tests, mais sur cinq cents, ça se sent.
Le vendor lock-in. Une fois que toutes vos baselines sont chez Percy, migrer ailleurs implique de tout recréer from scratch. C'est un piège classique des services cloud propriétaires.
Approche 3 : Happo
Happo est une alternative moins connue à Percy, avec un positionnement similaire : un service cloud qui capture et compare des screenshots de vos composants.
L'intégration avec Cypress existe mais elle est moins mature que celle de Percy. Le produit est solide, l'équipe est sérieuse, mais la base d'utilisateurs est plus petite. Moins de documentation communautaire, moins de réponses sur Stack Overflow, moins de retours d'expérience.
Les mêmes problématiques de coût et de dépendance cloud s'appliquent.
Approche 4 : Applitools Eyes
Applitools pousse le concept plus loin avec sa technologie de comparaison basée sur l'IA (leur « Visual AI »). Au lieu d'une comparaison pixel par pixel, l'algorithme essaie de détecter les différences « visuellement significatives » en ignorant les variations mineures de rendu.
C'est séduisant sur le papier. En pratique, le produit est puissant mais complexe. La configuration n'est pas triviale, le pricing est opaque, et la dépendance à un service propriétaire est totale. Pour une analyse détaillée, consultez notre fiche Applitools.
Le Problème de Fond : le Test Visuel Comme Add-on
Toutes ces approches partagent un défaut structurel : elles traitent le test visuel comme un ajout au test fonctionnel.
Vous avez votre suite Cypress. Vous y greffez un plugin ou un SDK. Vous ajoutez des appels dans vos tests existants. Le test visuel devient un parasite du test fonctionnel — dépendant de la même infrastructure, des mêmes sélecteurs, du même code.
Quand Cypress met à jour une version majeure, votre plugin de test visuel casse. Quand votre test fonctionnel change de parcours, votre baseline visuelle devient obsolète. Quand un développeur modifie un sélecteur, le test fonctionnel ET le test visuel tombent.
C'est un modèle fragile par design.
Le test visuel mérite d'être un citoyen de première classe, pas un passager clandestin dans la suite fonctionnelle. Il répond à une question différente (« est-ce que ça a l'air correct ? » vs « est-ce que ça fonctionne ? ») et devrait avoir ses propres outils, ses propres workflows, ses propres baselines.
Ce que Vos Tests Cypress ne Voient Pas
Un test Cypress vérifie que le bouton existe et qu'il déclenche la bonne action. Il ne vérifie pas que le bouton est visible, correctement aligné, de la bonne couleur, avec le bon padding, sur tous les breakpoints.
Les bugs visuels sont sournois parce qu'ils passent tous les tests fonctionnels. Le formulaire fonctionne parfaitement — mais le label chevauche l'input sur mobile. Le menu dropdown s'ouvre correctement — mais il apparaît derrière un autre élément. Le prix affiché est correct — mais la devise s'affiche en blanc sur fond blanc.
Ces bugs arrivent en production parce que personne ne les cherche systématiquement. Et ils coûtent cher : en crédibilité, en conversions, en tickets support. Pour comprendre l'étendue de ce que le test visuel détecte réellement, les exemples concrets sont souvent plus parlants que la théorie.
L'Alternative : Séparer le Test Visuel du Code
Et si le test visuel n'avait pas besoin de Cypress du tout ?
C'est la position que nous défendons chez Delta-QA, et nous l'assumons pleinement. Le test visuel n'a pas besoin de code. Il n'a pas besoin de plugins. Il n'a pas besoin de sélecteurs CSS ni de configuration webpack.
Delta-QA fonctionne autrement. Vous naviguez sur votre site, vous enregistrez un parcours en point-and-click, et l'outil capture les screenshots de référence. À chaque exécution suivante, il compare et vous montre les différences dans une interface dédiée. Pas de code. Pas de plugin. Pas de dépendance à Cypress, Playwright ou quoi que ce soit d'autre.
Ce n'est pas un compromis. C'est une philosophie différente. Le test fonctionnel et le test visuel sont deux disciplines distinctes qui méritent chacune leurs propres outils. Votre suite Cypress continue de vérifier que tout fonctionne. Delta-QA vérifie que tout a l'air correct. Les deux se complètent sans se marcher dessus.
Pour les équipes QA qui ne codent pas, c'est une libération. Pour les développeurs, c'est du temps gagné. Pour tout le monde, c'est moins de faux positifs et un workflow de review qui a du sens. Découvrez pourquoi le test visuel no-code est en train de changer la donne.
FAQ
Cypress peut-il faire du test visuel sans plugin ?
Non. Cypress peut prendre des screenshots avec cy.screenshot(), mais il ne propose aucun mécanisme natif de comparaison. Vous obtenez des images, mais la comparaison avec les baselines, la gestion des seuils de tolérance et le workflow d'approbation doivent être ajoutés via un plugin ou un service externe.
Quel est le meilleur plugin Cypress pour le test visuel ?
Il n'y a pas de réponse universelle. cypress-image-snapshot est le plus populaire en open source mais souffre de problèmes de maintenance et de faux positifs. Percy offre la meilleure expérience utilisateur mais c'est un service payant. Le « meilleur » dépend de votre budget, de votre tolérance aux faux positifs, et de votre volonté de maintenir du code supplémentaire.
Percy est-il gratuit avec Cypress ?
Percy propose un plan gratuit avec un nombre limité de snapshots mensuels. Pour un usage professionnel sérieux, vous aurez besoin d'un plan payant. Les tarifs évoluent régulièrement, consultez leur site pour les conditions actuelles.
Peut-on faire du test visuel Cypress en CI/CD ?
Oui, toutes les approches décrites fonctionnent en CI/CD. Mais c'est là que les problèmes se multiplient : différences de rendu entre environnements, gestion des baselines, temps d'exécution. La CI amplifie chaque fragilité de votre setup de test visuel.
Pourquoi ne pas simplement utiliser Playwright pour le test visuel ?
Si vous démarrez un nouveau projet, Playwright avec son toHaveScreenshot() natif est effectivement un meilleur choix pour le test visuel codé. Mais si vous avez déjà une suite Cypress conséquente, migrer n'est pas réaliste. Et même avec Playwright, vous restez dans le paradigme du test visuel par le code, avec ses limites de maintenance et d'accessibilité.
Delta-QA peut-il remplacer les tests Cypress ?
Non, et ce n'est pas l'objectif. Cypress excelle pour le test fonctionnel : vérifier que les interactions marchent, que les APIs répondent correctement, que la logique métier est respectée. Delta-QA se concentre sur le test visuel : vérifier que l'interface a l'air correct. Les deux outils sont complémentaires, pas concurrents.
Combien de temps faut-il pour configurer le test visuel dans Cypress ?
Avec cypress-image-snapshot, comptez une à deux heures pour l'installation et la configuration de base, puis plusieurs jours pour calibrer les seuils de tolérance et stabiliser les tests face aux faux positifs. Avec Percy, la configuration technique est plus rapide mais le setup organisationnel (gestion des snapshots, workflow de review, intégration CI) prend du temps. Avec Delta-QA, le premier test visuel est opérationnel en quelques minutes.
Conclusion
Cypress est un excellent outil de test fonctionnel. Nous l'utilisons, nous le recommandons pour ce qu'il fait bien. Mais prétendre qu'il gère le test visuel de manière satisfaisante, c'est se mentir.
Les plugins existent. Ils fonctionnent, plus ou moins. Mais ils sont fragiles, mal maintenus pour certains, coûteux pour d'autres, et ils ajoutent tous de la complexité à un endroit qui n'en a pas besoin.
Le test visuel mérite mieux qu'un greffon. Il mérite un outil dédié, conçu pour ce problème précis, accessible à toute l'équipe — développeurs comme QA non-techniques.