Comparaison pixel par pixelToutes résolutionsZones à ignorer paramétrables

Tests graphiques : détectez ce qu'aucune assertion ne voit

Un bloc qui se décale, une police qui change, un bouton qui passe sous la ligne de flottaison. La page fonctionne, tous les tests passent, et pourtant elle ne ressemble plus à ce qu’elle devrait être.

Écran de comparaison graphique dans Mr Suricate, mode différentiel surlignant les zones modifiées entre la capture de référence et l’exécution

Ils nous font confiance

Retail, banque, industrie, transport, services : nos clients font tourner près de 3 millions d’exécutions de scénarios par mois sur leurs parcours critiques.

Un site peut être fonctionnel et cassé en même temps

Une mise à jour de bibliothèque change la hauteur d’un composant, et le prix se retrouve caché derrière une image sur mobile. Le parcours d’achat marche toujours, aucun test ne remonte d’erreur, mais plus personne ne voit le montant. Sur un site réglementé, le même mécanisme peut faire disparaître une mention obligatoire de la page.

Icône souris

La page comparée à sa référence

Une capture de référence, une capture du jour, et l’écart mis en évidence. Vous validez la nouvelle version ou vous corrigez.

Icône de rectangles violets

Un seuil que vous fixez

Une ombre qui bouge d’un pixel n’est pas un incident. Le seuil de tolérance se règle page par page.

Icône d'engrenage violet

Les zones mouvantes exclues

Bandeau promotionnel, date du jour, carrousel, publicité. Ces zones sont ignorées pour éviter les fausses alertes.

Icône de test API violet

La même page comparée en desktop, en tablette et sur les résolutions mobiles de votre audience.

S'intègre à votre chaîne, sans la réécrire

Vos comparaisons graphiques se déclenchent depuis votre CI, s’exécutent sur vos environnements réels et remontent là où vos équipes travaillent déjà. Rien à réoutiller.

1 Déclenchement Vos outils gardent la main
  • GitLab
  • Jenkins
  • Microsoft Azure
  • Appel API
  • Planification
2 ExécutionMr Suricatevos scénarios tournent sur vos environnements réels
  • Parcours web
  • Applications natives iOS et Android
  • Fermes de mobiles réelles
  • API et flux internes
3 Restitution Le résultat arrive où vous travaillez
  • Jira
  • Slack
  • SMS
  • Webhook
  • API
Et une maintenance qui tient dans le temps
  • Blocs réutilisablesune modification met à jour tous les scénarios qui l'utilisent
  • Réparation assistée par IAdes correctifs proposés sur les scénarios en erreur
  • Regroupement des incidentsles anomalies similaires sont traitées une seule fois

Ce que change la comparaison visuelle, ligne par ligne

Sans comparaison visuelle
Avec Mr Suricate
Le décalage se voit quand un client le signale.
Il se voit sur la capture, le jour de la livraison.
On relit les pages clés à l'œil, quand on a le temps.
Toutes les pages de référence sont comparées.
Un test fonctionnel qui passe laisse croire que tout va bien.
L'aspect est vérifié en plus du comportement.
Une mention légale masquée reste masquée.
L'écart est signalé avec la zone concernée.
Le mobile est le dernier vérifié, donc rarement.
Toutes les résolutions passent au même moment.
Le débat porte sur des impressions.
Il porte sur deux images et un pourcentage.
RésultatLes écarts visuels détectés à la livraison, avec la capture avant, la capture après et la zone exacte de l'écart.
GUIDE PRATIQUE · ÉDITION 2026Qualité et test logiciel : le guide essentielLes fondamentaux du test fonctionnel, les pièges classiques et une méthode pour bâtir une couverture qui tient dans le temps.
Télécharger le guide
“ Mr Suricate est une évidence, car il donne l'assurance qu'il n'y a pas de problème. Un seul bug découvert suffit à rentabiliser la solution pendant une année entière ! ”

Anthony CornevinE-commerce Platform Manager, Vertbaudet

Un accompagnement qui s’arrête où vous voulez

Mr Suricate ne remplace pas votre équipe QA, il la renforce. Vous choisissez ce que vous internalisez et ce que vous déléguez : la création des scénarios, leur exécution, ou leur maintenance dans le temps.

  1. 1Identification des parcours critiques, front et back
  2. 2Écriture des tests, sans code
  3. 3Supervision continue et alertes
  4. 4Maintenance et évolution des scénarios
Résultatvous gagnez en couverture sans alourdir la charge de vos équipes. Et si vous préférez tout déléguer, l'externalisation QA prend le relais.

VOS QUESTIONS

Questions fréquentes

Ce qu'on nous demande le plus souvent sur les tests graphiques.

Qu'est-ce qu'un test graphique ?

C'est la comparaison automatique d'une capture d'écran avec une capture de référence validée. Tout écart au-delà du seuil que vous avez fixé est signalé, avec la zone concernée mise en évidence. On parle aussi de test de régression visuelle.

Comment éviter les fausses alertes ?

Par deux réglages. Le seuil de tolérance, qui absorbe les micro-variations de rendu, et l'exclusion de zones : bandeaux promotionnels, dates, carrousels, publicités. Sans ces exclusions, une page dynamique déclenche une alerte à chaque exécution et personne ne les regarde plus.

Que se passe-t-il quand le design change volontairement ?

Vous validez la nouvelle capture, qui devient la référence. C'est une action explicite, ce qui garantit qu'aucun changement visuel n'entre en production sans que quelqu'un l'ait vu et accepté.

Est-ce utile si on a déjà des tests fonctionnels ?

Oui, parce que les deux ne détectent pas la même chose. Un test fonctionnel vérifie qu'une action produit le bon résultat. Il ne voit pas qu'un élément est passé derrière un autre, illisible ou hors écran, alors que la page reste parfaitement utilisable pour une machine.

Cela couvre-t-il les mentions obligatoires ?

C'est un usage fréquent dans les secteurs réglementés. Un taux, une mention légale ou un avertissement qui disparaît à la suite d'un changement de mise en page constitue un risque de conformité, et c'est exactement le type d'écart que la comparaison visuelle rend visible.

Comment se présente le résultat d’une comparaison ?

Par un écran qui met la capture de référence et la capture de l’exécution côte à côte, avec un curseur pour passer de l’une à l’autre. Un mode différentiel superpose les deux et surligne les zones qui ont bougé.

Peut-on comparer autre chose qu’une page entière ?

Oui. La comparaison peut porter sur un élément précis plutôt que sur l’écran complet, ce qui évite qu’un bandeau promotionnel ou un carrousel fasse échouer le test alors que le composant surveillé n’a pas bougé.

Comment évite-t-on les faux positifs ?

Par trois réglages. Une tolérance de différence de pixels, qui laisse passer les micro-écarts de rendu. La prise en compte d’une différence de taille entre les deux captures. Et surtout une attente explicite avant la capture, car la cause la plus fréquente reste une image prise pendant le chargement.

Que faire quand le changement est voulu ?

Vous remplacez la capture de référence depuis l’écran de comparaison. La nouvelle version devient la base, et les exécutions suivantes se mesurent par rapport à elle.

Vous ne croyez que ce que vous voyez ?

Une démo de 30 minutes sur votre propre application. Vous verrez un de vos parcours automatisé en direct, sans écrire de code.