Différences de captures d'écran
Comparez les captures d'écran de deux analyses différentes côte à côte — les différences au niveau du pixel sont mises en évidence afin que vous voyiez exactement ce qui a changé après un déploiement.
Ce que vous verrez
La section Différences vous propose une interface de comparaison visuelle entre deux analyses :
- Sélecteur d'analyses : choisissez l'analyse de référence (baseline) et l'analyse à comparer. Par défaut, QuickMonitoring propose la dernière analyse approuvée comme référence et la plus récente comme analyse courante.
- Liste des pages avec différences : les pages présentant des différences détectées sont listées en tête, avec un indicateur du pourcentage de pixels modifiés.
- Vue de comparaison pour chaque page :
- Avant (référence) : la capture d'écran de l'analyse de base
- Après (actuelle) : la capture d'écran de l'analyse en cours
- Diff : une image composite où les pixels modifiés apparaissent en rouge ou en orange sur fond gris, permettant d'identifier immédiatement les zones touchées
- Score de différence : le pourcentage de pixels différents sur l'ensemble de la page — un score de 0 % signifie aucune différence détectée.
Comment l'utiliser
- Rendez-vous dans la section Cross-browser de votre site.
- Cliquez sur l'onglet Différences.
- Sélectionnez la analyse de référence dans le menu déroulant de gauche (la baseline à partir de laquelle comparer).
- Sélectionnez l'analyse actuelle dans le menu déroulant de droite (celle que vous venez de lancer, typiquement après un déploiement).
- QuickMonitoring calcule et affiche les différences pour chaque page et chaque navigateur.
- Parcourez les résultats page par page et utilisez la vue diff pour identifier les changements visuels.
Lecture d'un diff
- Zones en rouge/orange : pixels présents dans l'analyse actuelle mais absents ou différents dans la référence — indiquent un ajout ou une modification visuelle.
- Zones en bleu : pixels présents dans la référence mais absents dans l'analyse actuelle — indiquent une suppression ou un déplacement d'un élément.
- Fond gris : zones sans changement détecté.
Un score de différence inférieur à 1 % est généralement considéré comme du bruit (légères variations de rendu entre les exécutions). Un score supérieur à 5 % indique généralement un changement visuel significatif qui mérite d'être examiné.
Condition de validation
Lancez au moins deux analyses sur votre site, puis accédez à Cross-browser → Différences et comparez-les. L'interface de comparaison diff doit s'afficher pour au moins une page.
Problèmes courants
Le diff affiche des différences partout même si rien n'a changé. Des différences mineures peuvent apparaître entre deux analyses en raison d'animations CSS en cours, de contenu dynamique (publicités, compteurs, horodatages), ou de légères variations de rendu dues au timing de la capture. Filtrez les pages avec un score de différence supérieur à 1–2 % pour ignorer le bruit.
Je ne vois pas l'onglet Différences. Au moins deux analyses avec des captures d'écran doivent exister pour votre site. Si vous venez d'ajouter votre site, lancez deux analyses successives avant d'accéder à cette fonctionnalité.
Le diff ne s'affiche pas pour le navigateur Safari. Vérifiez que la capture d'écran Safari existe dans les deux analyses comparées. Si elle est absente dans l'une d'elles, le diff ne peut pas être calculé pour ce navigateur sur cette page. Consultez les captures d'écran individuelles dans la galerie pour identifier l'analyse manquante.