Vérifications visuelles

Une étape Visual Compare vérifie l'apparence du produit, pas seulement son comportement. Autonomy capture l'écran à ce point du parcours et le compare à une référence que vous avez rattachée à l'étape.

Utilisez-la lorsqu'une assertion fonctionnelle ne peut pas détecter le problème : une mise en page écrasée, une barre de navigation absente, un composant qui s'affiche mais avec la mauvaise échelle typographique, une surface en mode sombre qui n'a jamais basculé.

Références

Chaque étape peut porter une ou plusieurs références. Deux sources sont prises en charge :

• Un frame Figma. Collez l'URL du frame et Autonomy le rend côté serveur. Cela conserve la maquette comme source de vérité — lorsque le frame change, relancez la résolution et la référence suit. Nécessite une clé API Figma ; voir Figma.
• Une capture d'écran téléversée. PNG, JPG ou WebP, jusqu'à 25 Mo. Utilisez cette option lorsque la référence est un build approuvé plutôt qu'une maquette, ou lorsque le design n'est pas dans Figma.

Rattachez les références depuis Test Cases → votre cas de test → Visual References. Sélectionnez l'étape, puis Add Figma frame ou Upload screenshot. Chaque référence affiche son état de résolution ; une référence en échec dispose d'un contrôle pour la re-résoudre.

Déroulement de la comparaison

Autonomy effectue deux passes et les combine :

1. Un diff pixel déterministe entre l'écran capturé et la référence.
2. Une revue par modèle de vision des deux images, fondée sur des faits de design extraits de la référence — géométrie du frame, couleurs de remplissage en hexadécimal, styles de texte, rayons de coin, et padding et gaps d'auto-layout lorsque la référence est un frame Figma.

La seconde passe est ce qui empêche la vérification d'échouer pour une différence d'anticrénelage d'un pixel tout en détectant une barre de navigation disparue. La comparaison visuelle utilise un modèle de vision rapide plutôt que le modèle utilisé pour les étapes ordinaires.

Tolérance

Séparément, le mode de blocage décide de l'impact d'un écart sur l'exécution :

• major — échoue l'étape en cas d'écarts majeurs ou critiques, comme une navigation absente ou un décalage de mise en page.
• any — échoue pour tout écart.
• report — enregistre les constatations et laisse l'exécution continuer. Utilisez ce mode lorsque vous ajoutez une couverture visuelle à une suite existante sans vouloir qu'elle bloque la fusion.

Viewport

La comparaison n'a de sens qu'au viewport pour lequel la référence a été conçue. Lorsque vous enregistrez un flux, le viewport choisi sur l'écran de configuration est utilisé à la fois pour le navigateur hébergé et pour toute étape Visual Compare capturée dans cette session. Réglez-le pour correspondre au design.

Preuves

Une étape visuelle rattache l'écran capturé, la référence, le diff et les constatations du modèle aux preuves de l'exécution, aux côtés du reste de la chronologie. Les relecteurs peuvent voir ce que le produit a affiché, ce qu'il aurait dû afficher, et quelles différences précises ont été jugées significatives.

Dépannage

L'étape signale un écart qui n'est pas réel

Élargissez la tolérance d'un niveau, ou passez d'une référence pleine page au composant qui vous intéresse réellement. Les références pleine page sur une page à contenu dynamique — horodatages, compteurs, éléments de flux — produisent du bruit à toute tolérance.

La référence ne se résout pas

Une référence Figma nécessite une clé API valide et une URL contenant un node-id. Ouvrez le frame dans Figma, copiez son lien et collez l'URL complète. Voir Figma pour la configuration de la clé et les états d'erreur.

Tout décale

Vérifiez le viewport. Une référence conçue en largeur desktop comparée à une capture mobile est un décalage total par définition, et le modèle le signalera comme tel.