# Un comparateur pixel par pixel des gabarits clés d’un Kit avant publication

> Des captures d'écran comparées automatiquement sur les gabarits clés révèlent une régression visuelle qu'une relecture humaine pressée peut manquer.

- Auteur : Clément Hadrot
- Publié le : 2026-06-03
- Mis à jour le : 2026-06-03
- Catégorie : Elementor
- URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/comparateur-pixel-par-pixel-gabarits-kit-elementor/

## L’essentiel

- Une relecture humaine fatigue et manque des écarts de quelques pixels
- Un script de capture headless suffit sans outillage lourd
- Un seuil de tolérance évite les faux positifs sur le texte dynamique

`npx playwright test regressions-visuelles.spec.ts` : cette commande, lancée avant chaque publication d'un Kit de styles modifié, capture automatiquement les gabarits clés d'un site et compare le résultat à une version de référence, pixel par pixel, sans intervention humaine.

## Le problème que la relecture humaine ne résout pas bien

Une relecture visuelle manuelle, même rigoureuse, reste sujette à la fatigue d'attention sur un gabarit consulté pour la centième fois. Un décalage de quelques pixels sur une marge, une couleur légèrement différente après une modification de variable globale, ou un élément qui se chevauche discrètement sur une résolution précise : ce sont exactement les régressions qu'un œil pressé laisse passer, faute de les chercher activement.

Un comparateur automatisé ne remplace pas le jugement humain sur la pertinence d'un changement, mais il détecte fiablement ce qui a changé visuellement, laissant à l'humain la seule tâche de juger si ce changement est acceptable ou non.

## Arborescence du dispositif

Le dispositif retenu reste volontairement simple, sans plateforme dédiée aux tests visuels, pour rester accessible à une équipe qui ne maintient pas d'infrastructure de test lourde :

```
outils-recette/
├── captures/
│   ├── reference/
│   │   ├── accueil.png
│   │   ├── article-type.png
│   │   └── contact.png
│   └── courante/
│       ├── accueil.png
│       ├── article-type.png
│       └── contact.png
├── diffs/
│   └── (générés à chaque exécution)
├── gabarits.json
└── comparer.js
```

Le fichier `gabarits.json` liste les urls des pages considérées comme représentatives du Kit : une page d'accueil, un gabarit d'article type, une page de contact, et tout autre gabarit jugé critique pour le site concerné.

## Le principe de la comparaison

> L'essentiel à retenir : Une relecture humaine fatigue et manque des écarts de quelques pixels ; Un script de capture headless suffit sans outillage lourd ; Un seuil de tolérance évite les faux positifs sur le texte dynamique

À chaque exécution, un script headless ouvre chaque url listée, attend le chargement complet de la page, puis capture une image de la totalité de la page. Cette image est ensuite comparée pixel par pixel à l'image de référence correspondante, à l'aide d'une bibliothèque de différence d'images, qui produit à la fois un pourcentage d'écart et une image mettant en évidence les zones modifiées.

- Un écart inférieur au seuil de tolérance retenu ne déclenche aucune alerte, considéré comme du bruit de rendu normal.
- Un écart supérieur au seuil génère une image de différence, à examiner manuellement avant de valider ou refuser la publication.
- Une nouvelle capture, une fois validée comme intentionnelle, devient la nouvelle référence pour les comparaisons suivantes.

## Le seuil de tolérance, et pourquoi il ne peut pas être nul

Un seuil de tolérance à zéro pourcent produirait une alerte à chaque exécution, y compris pour des écarts sans intérêt : un texte dynamique légèrement différent d'une capture à l'autre, une police qui se charge avec un délai variable, ou un léger lissage d'antialiasing différent selon la charge de la machine qui exécute le test. Un seuil retenu autour de deux pourcent d'écart filtre ce bruit sans masquer les régressions réellement visibles.

### Les gabarits à privilégier dans la liste de référence

Tous les gabarits d'un site ne méritent pas d'être suivis avec la même attention. Les gabarits construits à partir de composants partagés du Kit, réutilisés sur de nombreuses pages, doivent figurer en priorité dans la liste, puisqu'une régression sur ces composants se répercute potentiellement sur l'ensemble du site, contrairement à une page isolée qui ne réutilise aucun style commun.

> Une régression visuelle qui ne touche qu'un seul gabarit isolé mérite une relecture manuelle. Une régression qui touche un composant partagé mérite un test automatisé qui la détecte à chaque publication.

## Ce que ce dispositif ne couvre pas

Ce comparateur reste centré sur le rendu visuel statique des gabarits et ne teste ni le comportement d'un formulaire ni la logique métier d'une page, qui relèvent d'une démarche de test fonctionnelle distincte, à mettre en place séparément si le projet le justifie.

## En résumé

Un comparateur pixel par pixel des gabarits clés, exécuté avant chaque publication d'un Kit modifié, détecte des régressions visuelles que la fatigue d'une relecture humaine laisse fréquemment passer. Un seuil de tolérance correctement calibré et une liste de gabarits centrée sur les composants partagés suffisent à rendre ce dispositif utile sans complexité excessive.