Localisateurs dans Selenium

Que sont les localisateurs dans Selenium?

Un localisateur est une commande qui dirige Selenium IDE ou Selenium WebDriver cible l'élément d'interface graphique approprié (zone de texte, bouton, lien ou case à cocher) sur lequel une action doit être effectuée. L'identification de cet élément est essentielle à la création de tout script d'automatisation fiable. Cependant, cette identification précise est plus complexe qu'il n'y paraît. Il arrive parfois d'interagir avec le mauvais élément, voire avec aucun élément. Pour pallier ce problème, Selenium propose diverses stratégies de localisation permettant un ciblage précis des éléments d'interface graphique.

Bien que certaines commandes, comme la commande « ouvrir », ne nécessitent pas de localisateur, la majorité des Selenium Les commandes dépendent des localisateurs d'éléments. Le choix du localisateur dépend en grande partie de votre application testée (AUT). Dans ce tutoriel, nous alternerons entre Facebook et le Mercury Site de démonstration de Tours (newtours.demoaut), basé sur les localisateurs pris en charge par chaque application. De même, dans votre propre vers les tests Dans ce projet, vous sélectionnerez un localisateur d'éléments. Selenium WebDriver basé sur la structure de votre application.

Localisation par ID

Il s'agit de la méthode la plus courante pour localiser les éléments, car les identifiants sont conçus pour être uniques pour chaque élément d'une page. Lorsqu'un attribut d'identifiant est disponible, il est recommandé de l'utiliser en priorité pour des scripts de test rapides, stables et lisibles.

Target Format: id=id de l'élément

Pour cet exemple, nous utiliserons une page de démonstration Facebook car Mercury Tours n'utilise pas d'attributs ID pour les champs principaux de son formulaire.

Étape 1) Utilisez cette page de démonstration https://demo.guru99.com/test/facebook.html Pour effectuer des tests, examinez le champ de texte « Adresse e-mail ou numéro de téléphone » à l’aide des outils de développement intégrés de votre navigateur (appuyez sur F12 dans Chrome, Edge ou Windows). Firefox) et notez son identifiant. Dans ce cas, l'identifiant est « email ».

Étape 2) Lancement Selenium IDE et entrez « id=email » dans le champ Target Cliquez sur le bouton Rechercher et remarquez que le champ de texte « Adresse e-mail ou numéro de téléphone » est surligné en jaune avec une bordure verte, indiquant que Selenium L'IDE a correctement localisé l'élément.

Localisation par nom

La localisation des éléments par leur nom est similaire à la localisation par leur ID, à ceci près que nous utilisons le "nom =" Utilisez plutôt un préfixe. Cette approche est utile lorsque les éléments n'ont pas d'identifiant mais possèdent un attribut name défini.

Target Format: name=nom de l'élément

Pour la démonstration suivante, nous utiliserons Mercury Visites guidées, car tous les éléments de formulaire importants du site possèdent un attribut de nom.

Étape 1) Accédez à https://demo.guru99.com/test/newtours/ Utilisez les outils de développement de votre navigateur pour examiner le champ de texte « Nom d’utilisateur ». Notez son attribut name.

Ici, le nom de l'élément est « userName ».

Étape 2) In Selenium IDE, entrez « name=userName » dans le champ Target case et cliquez sur le bouton Rechercher. Selenium L'IDE devrait localiser la zone de texte Nom d'utilisateur en la surlignant.

Comment localiser un élément par nom à l'aide de filtres

Les filtres sont utiles lorsque plusieurs éléments partagent le même attribut de nom. Les filtres sont des attributs supplémentaires utilisés pour distinguer les éléments qui partagent un nom identique. Sans filtres, Selenium Par défaut, seul le premier élément correspondant sera pris en compte.

Target Format: nom=nom_de_l'élément filtre=valeur_du_filtre

Prenons un exemple.

Étape 1) Connectez-vous sur Mercury tournées.

Connectez-vous à Mercury Pour les circuits touristiques, utilisez « tutorial » comme nom d’utilisateur et mot de passe. La page de recherche de vols devrait s’afficher, comme ci-dessous.

Étape 2) Utilisez les outils de développement pour examiner les attributs VALUE.

Notez que les boutons radio Aller-retour et Aller simple partagent le même nom « tripType ». Cependant, leurs attributs VALUE sont différents, ce qui nous permet d’utiliser chaque valeur comme filtre.

Étape 3) Cliquez sur la première ligne dans l'éditeur.

• Nous allons d'abord accéder à l'option « Sens unique ». Cliquez sur la première ligne du… Selenium Éditeur IDE.
• Dans la zone de commande, saisissez la commande « click ».
• Dans l' Target Dans la case, saisissez « name=tripType value=oneway ». La partie « value=oneway » sert de filtre.

Étape 4) Cliquez sur le bouton Rechercher.

Remarquerez que Selenium L'IDE met en évidence en vert le bouton radio « Sens unique », confirmant ainsi que l'élément a été accédé avec succès via son attribut VALUE.

Étape 5) Sélectionnez l'option « Sens unique ».

Appuyez sur la touche « X » de votre clavier pour exécuter la commande de clic. L’option « Sens unique » est maintenant sélectionnée.

Vous pouvez effectuer la même action sur le bouton radio Aller-retour, en utilisant cette fois « name=tripType value=roundtrip » comme cible.

Localisation par texte de lien

Cette stratégie de localisation s'applique uniquement aux textes des liens hypertextes. On accède au lien en préfixant la cible par « link= » suivi du texte visible du lien hypertexte. Cette méthode est très lisible et convient parfaitement aux tests de navigation.

Target Format: lien=lien_texte

Dans l'exemple suivant, nous accéderons au lien « S'INSCRIRE » qui se trouve sur le Mercury Page d'accueil des visites.

Étape 1)

• Tout d'abord, assurez-vous d'être déconnecté de Mercury tournées.
• Accédez à la Mercury Page d'accueil des visites.

Étape 2)

• Utilisez les outils de développement pour examiner le lien « S'INSCRIRE ». Le texte du lien apparaît entre les balises d'ancrage ouvrante et fermante.
• Dans ce cas, le texte du lien est « INSCRIPTION ». Copiez le texte du lien.

Étape 3) Copiez le texte du lien et collez-le dans le Selenium IDE Target boîte. Préfixez-le avec « link = ».

Étape 4) Cliquez sur le bouton Rechercher. Selenium L'IDE mettra correctement en évidence le lien REGISTER.

Étape 5) Pour vérifier davantage, entrez « clickAndWait » dans la zone de commande et exécutez-la. Selenium IDE cliquera avec succès sur le lien S'INSCRIRE et vous redirigera vers la page d'inscription ci-dessous.

Localisation par DOM (Document Object Model)

Le Modèle d'objet de document (DOM), en termes simples, décrit comment les éléments HTML sont structurés sous forme d'arbre de nœuds. Selenium L'IDE peut parcourir cette arborescence pour accéder aux éléments de la page. En utilisant cette méthode, Target La boîte commence toujours par « dom=document… ». Le préfixe « dom= » est généralement omis car Selenium L'IDE interprète automatiquement toute valeur commençant par « document » comme un chemin DOM.

Il existe quatre méthodes de base pour localiser un élément dans le DOM. Selenium:

• getElementById
• getElementsByName
• dom:name (s'applique uniquement aux éléments d'un formulaire nommé)
• dom:index

Localisation par DOM – getElementById

Commençons par explorer la méthode getElementById du DOM. SeleniumCette méthode renvoie un seul élément en faisant correspondre son attribut ID.

Syntaxe

document.getElementById("id of the element")

• L'identifiant de l'élément correspond à la valeur de l'attribut ID de l'élément auquel on souhaite accéder. Cette valeur doit toujours être placée entre guillemets.

Étape 1) Utilisez cette page de démonstration https://demo.guru99.com/test/facebook.htmlAccédez-y et utilisez les outils de développement pour examiner la case à cocher « Rester connecté ». Notez son identifiant.

L'identifiant que nous devrions utiliser est « persist_box ».

Étape 2) Ouvrez Selenium IDE et dans le Target Entrez la boîte document.getElementById(“persist_box”), puis cliquez sur Rechercher. Selenium L'IDE repère la case à cocher « Rester connecté ». Bien qu'il ne puisse pas mettre en surbrillance l'intérieur de la case, il l'entoure d'une bordure verte vive, comme illustré ci-dessous.

Localisation par DOM – getElementsByName

La méthode `getElementById` accède à un seul élément à la fois, celui dont l'identifiant est spécifié. La méthode `getElementsByName` fonctionne différemment : elle renvoie un tableau d'éléments partageant le nom spécifié. Chaque élément est accessible par son index numérique, qui commence à 0.

	getElementById Elle ne renvoie qu'un seul élément. Cet élément porte l'identifiant spécifié entre parenthèses dans getElementById().
	getElementsByName Elle renvoie une collection d'éléments portant le même nom. Chaque élément est indexé par un nombre commençant à 0, comme dans un tableau. Pour sélectionner un élément, il suffit de placer son index entre crochets, selon la syntaxe ci-dessous.

Syntaxe

document.getElementsByName("name")[index]

• name = nom de l'élément tel que défini par son attribut 'name'
• index = un entier qui indique quel élément du tableau de getElementsByName sera utilisé.

Étape 1) Accédez à la Mercury Rendez-vous sur la page d'accueil de Tours et connectez-vous en utilisant « tutorial » comme nom d'utilisateur et mot de passe. Votre navigateur affichera alors la page de recherche de vols.

Étape 2) Utilisez les outils de développement pour examiner les trois boutons radio en bas de la page (Classe Économique, Classe Affaires et Première classe). Vous remarquerez qu'ils portent tous le même nom : « servClass ».

Étape 3) Tout d'abord, accédons au bouton radio « Classe économique ». Parmi les trois boutons radio, cet élément apparaît en premier, son index est donc 0. Selenium Dans l'IDE, tapez document.getElementsByName(“servClass”)[0] et cliquez sur le bouton Rechercher. Selenium IDE identifiera correctement le bouton radio « Classe économique ».

Étape 4) Modifiez le numéro d'index à 1, afin que votre Target devient document.getElementsByName(“servClass”)[1]. Cliquez sur le bouton Rechercher, et Selenium L'IDE mettra en surbrillance le bouton radio « Classe affaires », comme indiqué ci-dessous.

Localisation par DOM – dom:name

Comme indiqué précédemment, cette méthode ne s'applique que si l'élément auquel vous accédez se trouve dans un formulaire nommé. Le chemin d'accès commence au niveau du formulaire, puis remonte jusqu'à l'élément cible par son nom.

Syntaxe

document.forms["name of the form"].elements["name of the element"]

• nom du formulaire = la valeur de l'attribut name de la balise form qui contient l'élément auquel vous souhaitez accéder
• nom de l'élément = la valeur de l'attribut name de l'élément auquel vous souhaitez accéder

Étape 1) Accédez à Mercury Page d'accueil des visites https://demo.guru99.com/test/newtours/ Utilisez les outils de développement pour examiner le champ de texte « Nom d’utilisateur ». Vous remarquerez qu’il se trouve dans un formulaire nommé « home ».

Étape 2) In Selenium Dans l'IDE, tapez document.forms[“home”].elements[“userName”] et cliquez sur le bouton Rechercher. Selenium L'IDE accédera à l'élément avec succès.

Localisation par DOM – dom:index

Cette méthode s'applique même si l'élément ne se trouve pas dans un formulaire nommé, car elle utilise l'index du formulaire plutôt que son nom. Cela s'avère utile pour les pages existantes ou les formulaires générés automatiquement où la dénomination est impossible.

Syntaxe

document.forms[index of the form].elements[index of the element]

• index du formulaire = le numéro d'index (à partir de 0) du formulaire par rapport à la page entière
• index de l'élément = le numéro d'index (à partir de 0) de l'élément par rapport au formulaire qui le contient

Nous accéderons à la zone de texte « Téléphone » sur le Mercury Page d'inscription aux visites guidées. Le formulaire de cette page ne comporte ni nom ni identifiant, ce qui en fait un bon exemple.

Étape 1) Accédez à la Mercury Page d'inscription aux visites guidées : examinez le champ « Téléphone ». Remarquez que le formulaire ne comporte ni identifiant ni nom.

Étape 2) Saisissez document.forms[0].elements[3] dans le Selenium IDE Target case et cliquez sur le bouton Rechercher. Selenium L'IDE accédera correctement à la zone de texte Téléphone.

Étape 3) Vous pouvez également utiliser le nom de l'élément au lieu de son index pour obtenir le même résultat. Saisissez `document.forms[0].elements["phone"]` dans le champ prévu à cet effet. Target La zone de texte « Téléphone » restera sélectionnée.

Localisation par XPath

XPath est le langage de requête utilisé pour naviguer dans les nœuds XML (Extensible Markup Language). Étant donné que HTML peut être considéré comme une implémentation de XML, XPath peut également localiser des éléments HTML. C'est l'une des stratégies de localisation les plus puissantes. Selenium.

• Avantage: Il peut accéder à presque tous les éléments, y compris ceux qui n'ont pas d'attributs de classe, de nom ou d'identifiant.
• Désavantage: Il s'agit de la stratégie de localisation la plus complexe en raison de ses nombreuses règles et variations de syntaxe.

Les outils de développement des navigateurs modernes peuvent générer automatiquement des expressions XPath. Dans Chrome, Edge ou FirefoxDans le panneau Éléments, cliquez avec le bouton droit sur un élément et choisissez Copier > Copier le XPath. L’exemple suivant nous permettra d’accéder à une image introuvable par les méthodes décrites précédemment.

Étape 1) Accédez à la Mercury Rendez-vous sur la page d'accueil des visites et utilisez les outils de développement pour inspecter le rectangle orange situé à droite de la case jaune « Liens », comme indiqué ci-dessous.

Étape 2) Faites un clic droit sur le code HTML de l'élément, puis sélectionnez l'option « Copier XPath ».

Étape 3) In Selenium IDE, saisissez une seule barre oblique « / » dans le Target Dans la boîte, collez ensuite le XPath copié à l'étape précédente. L'entrée dans le Target la boîte doit maintenant commencer par deux barres obliques « // ».

Étape 4) Cliquez sur le bouton Rechercher. Selenium L'IDE mettra en surbrillance la case orange, comme indiqué ci-dessous.

Pourquoi choisir le bon localisateur est important

Choisir la bonne stratégie de localisation est l'une des décisions les plus importantes dans Selenium L'automatisation est essentielle car elle influe directement sur la stabilité des scripts, leur vitesse d'exécution et les coûts de maintenance à long terme. Un localisateur mal choisi peut entraîner des tests instables, de faux positifs et des corrections fréquentes à chaque modification de l'interface utilisateur. L'ordre de préférence recommandé par les ingénieurs en automatisation expérimentés est le suivant : ID, puis Nom, suivi du sélecteur CSS, du texte du lien et enfin de XPath.

Les localisateurs basés sur l'ID sont les plus rapides car la recherche du navigateur est optimisée pour les identifiants uniques. Les localisateurs basés sur le nom sont presque aussi efficaces lorsque les noms sont uniques. Les sélecteurs CSS et XPath offrent une grande flexibilité, mais ont tendance à être plus lents et plus fragiles lors des refactorisations du DOM. Le texte des liens est excellent pour les liens de navigation, mais sa réutilisation est limitée.

Une automatisation stable repose également sur la collaboration avec les développeurs. Lorsque les testeurs demandent des attributs ID ou data-* cohérents et pertinents lors des revues de code, la fiabilité des localisateurs s'en trouve considérablement améliorée. Il est préférable d'éviter de se fier aux ID générés automatiquement (comme ceux produits par les frameworks), car ils peuvent changer d'une version à l'autre. En privilégiant des localisateurs lisibles et orientés intention, les équipes peuvent maintenir leurs suites de tests et réduire la dette technique à mesure que l'application évolue.

Meilleures pratiques pour la rédaction de localisateurs fiables

Des localisateurs fiables sont la base d'un système maintenable. Selenium Suite de tests. Les pratiques suivantes contribuent à réduire les échecs de script, à améliorer la lisibilité et à rendre les tests résistants aux modifications de l'interface utilisateur.

1. Privilégiez les identifiants uniques : Vérifiez toujours d'abord la présence d'un attribut ID. Les ID sont conçus pour être uniques au sein d'une page et constituent le choix le plus performant.
2. Utilisez les attributs sémantiques Name et data-* : Encouragez les développeurs à ajouter des attributs de test stables tels que data-testid ou data-qa. Ces attributs restent cohérents même lorsque les classes CSS changent.
3. Évitez les XPath absolus : Les chemins absolus comme /html/body/div[2]/div[3]/span sont facilement sujets à des erreurs. Utilisez des expressions XPath relatives avec des attributs tels que //input[@name='userName'].
4. Combiner les attributs pour plus de précision : Lorsqu'un seul attribut n'est pas unique, combinez plusieurs attributs (par exemple, //button[@type='submit' et @name='login']) pour cibler l'élément correct.
5. Utilisez le texte à bon escient : Les localisateurs qui dépendent du texte visible peuvent ne pas fonctionner correctement selon les traductions. N'utilisez les localisateurs textuels que lorsque le contenu est stable et unilingue.
6. Centraliser les localisateurs : Stockez les localisateurs dans une classe Page Object Model (POM) afin que les mises à jour puissent être effectuées à un seul endroit plutôt que dans de nombreux scripts de test.
7. Valider dans les outils de développement : Avant d'ajouter un localisateur à un script, testez-le dans la console du navigateur en utilisant $x("//xpath") pour XPath ou document.querySelector pour CSS afin de confirmer qu'il renvoie exactement un élément.
8. Évitez autant que possible les localisateurs basés sur l'index : Les positions d'index comme [3] dépendent de l'ordre des éléments. Même des modifications mineures de la mise en page peuvent décaler l'index et perturber le script.

En appliquant ces pratiques de manière cohérente, les ingénieurs en automatisation créent des suites de tests qui s'adaptent à toutes les équipes et résistent aux fréquentes mises à jour de l'interface utilisateur avec un minimum de maintenance.

FAQ