Comment récupérer les éléments ?
Lorsque vous automatisez des tests web, il faut identifier correctement les éléments de la page.
Si vous utilisez un mauvais identifiant, vous allez devoir les mettre à jour à chaque mise à jour de la librairie que les développeurs utilisent ou à chaque changement de CSS ou alors…
Chaque outil utilise des sélecteurs (CSS, XPath, ID, etc.) pour interagir avec les éléments HTML. Voici comment procéder pour Cypress, Selenium et Robot Framework.
Utilisez les DevTools Chrome pour récupérer les sélecteurs :
- Clic droit sur l’élément > Inspecter
Vous pouvez voir les élements.
Privilégier les sélecteurs stables
- Évitez les sélecteurs basés sur des classes dynamiques (.random-xyz123) qui changent à chaque rafraîchissement de page.
- Utiliser les ID si disponibles : lLes IDs sont uniques et donc plus fiables.
- Éviter les XPath trop complexes comme les XPath très longs (/html/body/div[2]/div/…) sont fragiles aux modifications de l’UI.
Bonne pratique
La bonne pratique est de créer un nouveau attribut comme data-test avec une valeur unique.
Pour cela, vous devez travailler main dans la main avec le développeur afin de modifier le code et ajouter ces attributs.
Pourquoi data-test est la meilleure option ?
- Stable : Contrairement aux classes CSS ou aux IDs générés dynamiquement, un attribut comme data-test ne change pas lors des mises à jour du design.
- Lisible : Un testeur comprend immédiatement que data-test= »login-button » est fait pour les tests.
- Supporté partout : Compatible avec Cypress, Selenium et Robot Framework.
- Facile à intégrer : Les développeurs peuvent l’ajouter sans impacter le visuel ni la logique métier.
