Construire des localisateurs d’éléments Web fiables pour l’automatisation des tests

S’il y a une chose à maîtriser dans l’automatisation des tests d’interface utilisateur Web, ce sont les « éléments » qui composent une page Web. La plus grande partie de votre temps, en particulier lorsque vous commencez avec l’automatisation des tests, consistera à essayer de trouver des éléments sur une page, tels que des boutons, des entrées, des listes déroulantes, des divs, etc.

L’identification des éléments, cependant, est aussi désastreuse que décourageante, surtout lorsqu’ils manquent d’identifiants uniques ou de noms de classe. Cet article de blog vous guidera à travers tout ce dont vous avez besoin pour pouvoir identifier les éléments Web et devenir aussi professionnel que possible dans l’automatisation des tests.

L’importance des éléments dans les tests Web

Les éléments jouent un rôle important dans les tests d’applications Web. Tout ce que l’utilisateur voit dans l’interface utilisateur d’une page Web est composé d’éléments. Si vous êtes chargé de développer l’automatisation des tests d’interface utilisateur Web, que vous utilisiez ou non Pilote Web Selenium ou un commercial outil d’assurance qualité automatisévous passerez probablement beaucoup de temps à comprendre l’application testée.

Vous devez savoir comment l’application est structurée, comment chaque élément est défini et comment activer au mieux votre outil de test pour découvrir les éléments dans l’arborescence DOM (Document Object Model). La recherche d’éléments sur une page est un défi courant pour les QA d’automatisation, en particulier si les éléments ne disposent pas d’un ID unique ou d’un attribut de nom. Les pages Web se composent de différents types d’éléments tels que :

• Boutons
• Liens
• Images
• Contributions
• Boutons radio
• Cases à cocher
• Listes déroulantes
• Zones de texte

Ces éléments sont spécifiés dans le HTML par le nom de la balise, les attributs et le contenu. Ils peuvent également avoir des éléments enfants, comme un élément dans une liste déroulante. CSS peut être appliqué aux éléments pour les styler avec des couleurs, des tailles, des positions, etc. Studio d’essaislors de l’enregistrement du test, des éléments sont ajoutés à un emplacement centralisé appelé Explorateur d’éléments et servant de représentation visuelle de tous les éléments enregistrés.

Au fur et à mesure que des éléments sont ajoutés à l’explorateur d’éléments, Test Studio utilise une logique d’identification d’élément intelligente pour générer automatiquement des expressions de recherche uniques pour chaque élément. Lorsqu’un élément est prêt à être ajouté à l’explorateur d’éléments, Test Studio essaie d’utiliser le premier élément de la liste (généralement IDENTIFIANT). Sur la base de ce critère, si l’élément est unique pour toute la page, l’élément est ajouté au référentiel d’éléments, suivi de la création d’un trouver l’expression pour cet élément.

Cependant, trouver le bon élément sur une page peut être délicat, en particulier lorsque les éléments manquent d’attributs uniques tels que l’ID. Les applications Web modernes génèrent souvent des identifiants dynamiques pour les éléments. Dans ce cas, ID n’est pas un attribut fiable à utiliser pour améliorer la logique de recherche de votre élément. Heureusement, vous pouvez facilement configurer Test Studio pour ignorer les ID dynamiques lors de la création d’expressions de recherche.

Exemple de scénario pour améliorer la logique de recherche des éléments de Test Studio

Voici un scénario simple pour naviguer dans le processus d’amélioration de la logique de recherche d’éléments de Test Studio. Pour les besoins de la démo, j’utilise un exemple de demande et le scénario suivant :

• Cliquez sur le bouton d’enregistrement
• Exécutez votre test pour vous assurer que IDENTIFIANT n’est pas utilisé pour l’identification des boutons

Vous pouvez facilement y parvenir dans Test Studio car vous pouvez ajouter des attributs personnalisés en accédant à Réglages > Logique de recherche intelligente. Taper classer dans l’entrée « Ajouter une balise » et une fois ajoutée, assurez-vous de la déplacer en haut de la liste. Ce faisant, vous améliorez la logique de recherche de Test Studio en demandant à Test Studio d’utiliser l’attribut de classe avant l’ID lors de la création d’expressions de recherche pour les éléments.

Une fois modifiée, votre expression de recherche devrait ressembler à celle de l’image ci-dessous.

Lorsque vous exécutez le test enregistré, son comportement attendu est de réussir car il utilise l’attribut correct dans son expression de recherche. Quelle meilleure nouvelle que de voir un feu vert à côté de toutes vos étapes de test !

Trouver le mécanisme de sauvegarde logique

Si vous n’avez pas modifié la logique de recherche de Test Studio comme décrit, vos éléments seront enregistrés avec IDENTIFIANT à la place de classer. Votre test réussira toujours mais avec un avertissement pour modifier la logique de recherche de l’élément. Si vous vous demandez pourquoi le test réussit même si l’élément utilise un ID dynamique, la réponse réside dans le mécanisme de sauvegarde de Test Studio.

Pendant l’enregistrement de test, Test Studio enregistre également des images pour chaque élément. Lorsque la logique de recherche basée sur l’ID d’origine échoue, Test Studio essaie immédiatement de trouver l’image correspondante, puis d’identifier l’élément lié à cette image. Suite à cette action, Test Studio exécute l’étape de test avec succès, qu’il s’agisse d’un simple clic, d’une saisie, d’un basculement de bouton ou d’un changement de filtrage de grille plus complexe. Le test passera au vert avec juste un avertissement vous informant que la logique de recherche d’origine a échoué. Voici un article de blog avec beaucoup de détails autour de la identification d’éléments basée sur l’image.

Sommaire

Les tests d’interface utilisateur Web n’ont pas une excellente réputation et sont souvent indûment critiqués pour être « instables » en raison d’échecs aléatoires de tests pour des raisons inattendues/inconnues. Cependant, une grande partie de la « tester la desquamation » L’expérience des QA d’automatisation avec les tests Web est causée par le manque de compréhension approfondie de la façon dont une application est construite et des attributs uniques que ses éléments fournissent pour améliorer le travail des outils d’automatisation des tests, y compris Selenium WebDriver. Faire tout le travail lié à l’identification des attributs d’éléments uniques au début vous évitera beaucoup de problèmes à long terme.