Amélioration des tests visuels avec la comparaison d’instantanés dans Virtuoso / Blogs / Perficient

De nos jours, il peut être difficile de garantir que votre application s’affiche et se comporte comme prévu sur différentes versions et sur différents appareils. C’est là qu’intervient Snapshot Comparison dans Virtuoso, offrant une solution robuste pour détecter et prévenir les défauts visuels.

La puissance de la comparaison d’instantanés

La comparaison d’instantanés est une fonctionnalité qui vous permet de comparer des captures d’écran de l’état actuel de votre application avec une référence de base. Cette fonctionnalité s’avère inestimable pour détecter des écarts visuels subtils qui pourraient échapper aux méthodes de test automatisées traditionnelles. Voici comment cela fonctionne et pourquoi c’est important :

Définir une ligne de base

Imaginez ce scénario : vous travaillez sur une plateforme de commerce électronique et un jour, un changement de style involontaire fait disparaître votre bouton « Ajouter au panier ». Même si les tests automatisés peuvent toujours réussir, ce bug visuel pourrait avoir un impact négatif sur l’expérience utilisateur.

Les tests instantanés vous permettent de définir l’état visuel attendu de votre application comme référence. Chaque fois que vous capturez un nouvel instantané, vous pouvez le comparer à cette référence. Ce processus vous aide à identifier et à corriger les bugs visuels, même ceux qui pourraient passer inaperçus lors des tests fonctionnels.

Capturer des instantanés de points de contrôle

Dans Virtuoso, vous pouvez capturer des instantanés de votre application à tout moment lors d’une exécution. Ces instantanés sont pris pour chaque point de contrôle rencontré au fur et à mesure du déroulement de vos voyages. Cela signifie que vous pouvez évaluer l’état visuel de votre application étape par étape.

Pour capturer et comparer un nouvel instantané :

1. Accédez au tableau de bord du projet et sélectionnez un objectif.
2. Choisissez « Capturer un nouvel instantané » dans le menu contextuel ou exécutez l’objectif avec l’option « Capturer des instantanés de point de contrôle » activée.
3. Une fois l’exécution terminée, accédez à la vue Objectif et cliquez sur « Comparaison » pour commencer à examiner vos instantanés.

Examen des comparaisons d’instantanés

Dans la vue Comparaison, vous trouverez un aperçu de tous les instantanés capturés lors de l’exécution. Ces comparaisons sont classées en quatre types :

• Pages ajoutées : Pages qui sont nouvelles dans Virtuoso et auxquelles aucune ligne de base n’est attribuée.
• Pages modifiées : Pages présentant des différences par rapport à la ligne de base, qu’elles soient visuelles ou programmatiques.
• Pages sans modifications : Pages qui correspondent à la ligne de base.
• Pages supprimées : Pages avec une ligne de base attribuée mais qui ne sont plus présentes dans l’instantané.

Vous pouvez filtrer ces comparaisons à l’aide de la barre supérieure et les marquer comme attendues ou inattendues. Marquer une comparaison comme prévu établit l’état actuel comme nouvelle référence pour ce point de contrôle.

Vue comparative détaillée

Bien que la vue Comparaison fournisse un aperçu rapide des modifications, une analyse plus détaillée est parfois nécessaire. Virtuoso propose une vue comparative détaillée avec des outils puissants :

• Cote à cote: Ce mode affiche côte à côte les états de référence et actuels pour une comparaison visuelle directe. Vous pouvez basculer entre « Tous les éléments » et « Éléments modifiés » pour vous concentrer sur des différences spécifiques.
• Superposition de captures d’écran : Virtuoso vous permet de superposer les captures d’écran attendues et actuelles. Des commandes telles que « Swipe », « Fade », « Comparison » et « Highlight » vous aident à identifier les différences dans les moindres détails.
  • Glisser : Utilisez un curseur pour révéler les différences entre les deux captures d’écran.
  • Disparaître: Ajustez l’opacité pour mélanger les deux captures d’écran et mettre en évidence les variations.
  • Comparaison: Virtuoso calcule les différences et les met en évidence.
  • Souligner: Les différences sont indiquées sur une échelle allant du rouge au noir, le rouge indiquant la plus grande divergence.

Discussions collaboratives

La collaboration est essentielle dans tout processus de test. Virtuoso prend en charge les discussions collaboratives en vous permettant d’ajouter des avis aux captures d’écran dans la vue de comparaison détaillée. Vous pouvez enregistrer des résultats, poser des questions ou demander des éclaircissements sur des différences spécifiques. Les avis sont liés à l’instantané actuel et restent disponibles pour référence.

Conclusion

La comparaison d’instantanés dans Virtuoso change la donne pour les tests visuels. Il vous permet de détecter rapidement les défauts visuels, garantissant ainsi une expérience utilisateur cohérente et attrayante. En établissant et en maintenant une base de référence pour l’état visuel de votre application, vous pouvez détecter en toute confiance les changements inattendus et éviter les régressions. Grâce à de puissants outils de comparaison et à des fonctionnalités collaboratives, Virtuoso rend les tests visuels efficaces et efficients, vous aidant ainsi à fournir des logiciels de haute qualité à vos utilisateurs.