Comment corriger les sélecteurs d'éléments dans Wolfpack ?

1 - Comment Wolfpack interagit avec les éléments d'une page Web

A - Principes généraux

Wolfpack est conçu pour simplifier et automatiser les tests end-to-end. Pour identifier et interagir avec les éléments d'une page web, Wolfpack utilise des sélecteurs, qui sont des chaînes permettant de repérer un élément spécifique dans le DOM (Document Object Model).

Les sélecteurs sont essentiels pour garantir que les tests automatisés soient reproductibles et robustes. Toutefois, ils peuvent devenir fragiles si les éléments ciblés changent dans l'application web, notamment en cas de mises à jour de code ou de variations dynamiques.

Wolfpack utilise deux principaux types de sélecteurs : les sélecteurs CSS et XPath. Ces sélecteurs sont automatiquement générés par le recorder, mais peuvent être ajustés manuellement si nécessaire.

B - Les sélecteurs CSS

Les sélecteurs CSS sont basés sur la syntaxe du langage CSS et permettent de cibler des éléments à l’aide de leurs classes, ID, balises, attributs, ou une combinaison de ces critères.

Exemple de sélecteurs CSS :

• #submit-button : Sélectionne un élément avec l’ID « submit-button ».
• .form-input : Sélectionne tous les éléments ayant la classe « form-input ».
• div.container > ul > li:first-child : Cible le premier élément d’une liste dans une balise « div » ayant la classe « container ».

Avantages :

• Simple et lisible.
• Rapide à exécuter car bien optimisé par les navigateurs modernes.
• Large compatibilité avec les éléments standards.

Limites :

• Peut devenir fragile si les classes ou ID changent dynamiquement.
• Moins adapté pour cibler des éléments complexes dans un DOM profond.

C - Les sélecteurs XPath

XPath (XML Path Language) est une syntaxe plus expressive et puissante permettant de naviguer dans la hiérarchie du DOM. Contrairement aux sélecteurs CSS, il permet de cibler des éléments en fonction de leurs attributs ou de leur contenu texte.

Exemple de sélecteurs XPath :

• //button[@id='submit-button'] : Sélectionne un bouton avec l’ID « submit-button ».
• //div[contains(@class, 'error-message')] : Cible une balise « div » contenant une classe « error-message ».
• //a[text()='Learn more'] : Trouve un lien ayant le texte « Learn more ».

Avantages :

• Capacité à cibler des éléments complexes ou non accessibles par des sélecteurs CSS.
• Flexible pour les contenus dynamiques.

Limites :

• Moins lisible

2 - Mon test échoue car un élément n'est pas trouvé sur la page, que faire ?

Lorsqu'un test échoue en raison d'un élément introuvable, il est important de diagnostiquer la cause du problème et de corriger le sélecteur concerné. Voici les étapes à suivre :

A - Wolfpack enregistre plusieurs sélecteurs pour chaque action

Lorsqu'une action est enregistrée, Wolfpack génère au moins deux ou trois sélecteurs pour identifier l'élément. Ces sélecteurs incluent généralement une combinaison de CSS et de XPath. Si un sélecteur ne fonctionne pas, essayez simplement d'utiliser l'un des autres sélecteurs disponibles. Cela peut résoudre le problème sans avoir à effectuer d'autres ajustements.

Pour visualiser et modifier les sélecteurs, ouvrez le test dans l'éditeur de scénarios et examinez les options proposées pour l'action concernée.

B - Mon action est-elle vraiment essentielle pour le test ?

Wolfpack enregistre toutes les interactions utilisateur effectuées lors de la session. Cependant, toutes les actions ne sont pas indispensables pour valider un scénario de test. Posez-vous les questions suivantes :

• Cette interaction est-elle cruciale pour le test ?
• Peut-elle être omise sans altérer l'objectif principal ?

Exemple : Cliquer sur un espace vide de la page pour déclencher un défaut de focus peut ne pas être pertinent pour le scénario principal. Supprimer cette action pourrait résoudre l'erreur.

C - L'élément ciblé par le sélecteur est-il toujours présent sur la page ?

Avec des frameworks modernes comme React, Angular ou Vue, les classes et ID des éléments peuvent être générés dynamiquement. Cela signifie qu'un élément peut :

• Ne pas être rendu à l'instant T.
• Avoir une classe ou un ID différent à chaque exécution.
• Être masqué ou supprimé du DOM par une condition de rendu.

Solution : Utilisez des sélecteurs plus génériques ou basés sur des attributs stables (comme data-test-id) pour cibler les éléments.

‍

D - Simplifier le sélecteur

Les sélecteurs générés automatiquement par le recorder peuvent être trop précis. Cela inclut souvent des combinaisons de classes ou des chemins compliqués dans le DOM. En simplifiant le sélecteur, vous augmentez sa robustesse.

Exemple :

Sélecteur généré :

form > div:nth-child(3) > button.btn-primary.btn-lg

Sélecteur simplifié :

button.btn-primary

Le sélecteur simplifié est moins sensible aux changements structurels du DOM tout en restant fonctionnel.

E - Utiliser l'inspecteur du navigateur pour retrouver l'élément

Les outils de développement du navigateur permettent de récupérer facilement des sélecteurs XPath ou CSS. Pour cela :

• Accédez aux outils de développement via F12 ou un clic droit > « Inspecter »
• Sélectionnez l'élément à cibler dans la page, soit directement dans le code affiché, soit en effectuant un clic  droit > « Inspecter » directement sur l'élément dans la page
• Sur l'élement cible, dans le code, fais un clic droit > copier > sélecteur ou XPath

Astuce : Testez vos sélecteurs avec document.querySelector (CSS) ou document.evaluate (XPath) pour valider leur fonctionnement avant de les insérer dans le test.

F - L'élément est-il réellement identifiable ?

Dans les rares cas où un élément ne possède pas d’attributs uniques ou stables, rendant son identification difficile :

• Cherchez des parents ou ancêtres avec des attributs stables pour construire un sélecteur combiné.
• Si possible, demandez à l'équipe de développement d’ajouter des attributs data-* pour faciliter le repérage.

Exemple :Supposons un bouton sans ID ni classe, mais situé dans un conteneur unique :

//div[@id='unique-container']//button[text()='Submit']

Ce sélecteur utilise le conteneur pour cibler indirectement le bouton.

Conclusion

La correction des sélecteurs est une compétence essentielle pour garantir la stabilité des tests end-to-end dans Wolfpack. En suivant ces étapes, vous pouvez identifier la cause des erreurs, simplifier vos sélecteurs, et créer des tests plus robustes. N'oubliez pas que l'objectif principal est de maximiser la pertinence et la fiabilité de vos scénarios tout en minimisant les efforts de maintenance.

‍