Localisateurs dans Selenium

Que sont les localisateurs ?

Locator est une commande qui indique Selenium IDE quels éléments de l'interface graphique (par exemple Texte Box, Boutons, Chèque Boxes, etc.) ses besoins sont opérationnels. L'identification des éléments GUI corrects est une condition préalable à la création d'un script d'automatisation. Mais l’identification précise des éléments de l’interface graphique est plus difficile qu’il n’y paraît. Parfois, vous finissez par travailler avec des éléments d’interface graphique incorrects ou sans aucun élément ! Ainsi, Selenium fournit un certain nombre de localisateurs pour localiser précisément un élément de l'interface graphique

Il existe des commandes qui n'ont pas besoin de localisateur (comme la commande « open »). Cependant, la plupart d'entre eux ont besoin de localisateurs d'éléments dans Selenium pilote Web.

Le choix du localisateur dépend en grande partie de votre application testée. Dans ce tutoriel, nous allons basculer entre Facebook, le nouveau tours.demoaut sur la base des localisateurs pris en charge par ces applications. De même dans votre Tests projet, vous sélectionnerez l'un des localisateurs d'éléments répertoriés ci-dessus dans Selenium webdriver, en fonction de la prise en charge de votre application.

Localisation par ID

C'est la manière la plus courante de localiser des éléments puisque les identifiants sont censés être uniques pour chaque élément.

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

Pour cet exemple, nous utiliserons Facebook comme application de test car Mercury Les visites n'utilisent pas d'attributs d'identification.

Étape 1) Depuis la création de ce didacticiel, Facebook a modifié la conception de sa page de connexion. Utilisez cette page de démonstration https://demo.guru99.com/test/facebook.html pour tester. Inspectez la zone de texte « E-mail ou téléphone » à l'aide de Firebug et notez son identifiant. Dans ce cas, l’identifiant est « email ».

Étape 2) Lancement Selenium IDE et entrez « id=email » dans le champ Target boîte. Cliquez sur le bouton Rechercher et remarquez que la zone de texte « E-mail ou téléphone » est surlignée en jaune et bordée de vert, ce qui signifie que Selenium L'IDE a pu localiser cet élément correctement.

Localisation par nom

La localisation des éléments par nom est très similaire à la localisation par ID, sauf que nous utilisons le "nom =" préfixe à la place.

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

Dans la démonstration suivante, nous allons maintenant utiliser Mercury Tours car tous les éléments significatifs ont des noms.

Étape 1) Accédez à https://demo.guru99.com/test/newtours/ et utilisez Firebug pour inspecter la zone de texte « Nom d'utilisateur ». Prenez note de son attribut name.

Ici, nous voyons que 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 pouvoir localiser la zone de texte Nom d'utilisateur en la mettant en surbrillance.

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

Les filtres peuvent être utilisés lorsque plusieurs éléments portent le même nom. Les filtres sont des attributs supplémentaires utilisés pour distinguer les éléments portant le même nom.

Target Format: nom=nom_of_the_element filtre=valeur_of_filter

Voyons un exemple -

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

Connectez-vous sur Mercury Visites utilisant « tutoriel » comme nom d'utilisateur et mot de passe. Cela devrait vous amener à la page Flight Finder illustrée ci-dessous.

Étape 2) En utilisant Firebug, utilisez les attributs VALUE.

À l'aide de Firebug, notez que les boutons radio Round Trip et One Way portent le même nom « tripType ». Cependant, ils ont des attributs VALUE différents, nous pouvons donc utiliser chacun d'eux comme filtre.

Étape 3) Cliquez sur la première ligne.

• Nous allons d’abord accéder au bouton radio One Way. Cliquez sur la première ligne de l'éditeur.
• Dans la boîte de commande de Selenium IDE, entrez la commande « clic ».
• Dans l' Target Dans la case, saisissez « name=tripType value=oneway ». La partie « value=oneway » est notre filtre.

Étape 4) Cliquez sur le bouton Rechercher.

Remarquerez que Selenium L'IDE est capable de mettre en surbrillance le bouton radio One Way en vert, ce qui signifie que nous pouvons accéder à l'élément avec succès en utilisant son attribut VALUE.

Étape 5) Sélectionnez le bouton radio One Way.

Appuyez sur la touche « X » de votre clavier pour exécuter cette commande de clic. Notez que le bouton radio One Way a été sélectionné.

Vous pouvez faire exactement la même chose avec le bouton radio Round Trip, cette fois, en utilisant « name=tripType value=roundtrip » comme cible.

Localisation par texte de lien

Ce type de localisateur CSS dans Selenium s'applique uniquement aux textes de liens hypertexte. Nous accédons au lien en préfixant notre cible avec « link= » puis suivi du texte du lien hypertexte.

Target Format: lien=lien_texte

Dans cet exemple, nous accéderons au lien « S'INSCRIRE » présent sur le Mercury Page d'accueil des visites.

Étape 1)

• Tout d'abord, assurez-vous que vous êtes déconnecté de Mercury tournées.
• Allez dans Mercury Page d'accueil des visites.

Étape 2)

• À l'aide de Firebug, inspectez le lien « ENREGISTRER ». Le texte du lien se trouve entre les balises et.
• Dans ce cas, le texte de notre lien est « INSCRIPTION ». Copiez le texte du lien.

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

Étape 4) Cliquez sur le bouton Rechercher et remarquez que Selenium L'IDE a pu mettre en évidence correctement le lien REGISTER.

Étape 5) Pour vérifier davantage, entrez « clickAndWait » dans la zone de commande et exécutez-la. Selenium L'IDE devrait pouvoir cliquer avec succès sur ce lien INSCRIPTION et vous diriger vers la page d'inscription ci-dessous.

Localisation par DOM (Document Object Model)

L' Modèle d'objet de document (DOM), en termes simples, est la manière dont les éléments HTML sont structurés. Selenium L'IDE est capable d'utiliser le DOM pour accéder aux éléments de la page. Si nous utilisons cette méthode, notre Target la boîte commencera toujours par « dom=document… » ; cependant, le préfixe « dom= » est normalement supprimé car Selenium L'IDE est capable d'interpréter automatiquement tout ce qui commence par le mot-clé « document » comme étant un chemin dans le DOM dans Selenium de toute façon.

Il existe quatre manières de base de localiser un élément via DOM dans Selenium:

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

Localisation par DOM – getElementById

Concentrons-nous sur la première méthode – en utilisant la méthode getElementById du DOM dans Selenium. La syntaxe serait :

Syntaxe

document.getElementById("id of the element")

• id de l'élément = c'est la valeur de l'attribut ID de l'élément auquel accéder. Cette valeur doit toujours être entourée de parenthèses (« »).

Étape 1) Utilisez cette page de démonstration https://demo.guru99.com/test/facebook.html Accédez-y et utilisez Firebug pour inspecter la case à cocher « Gardez-moi connecté ». Prenez note de son identifiant.

Nous pouvons voir que l'ID que nous devons utiliser est « persist_box ».

Étape 2) Ouvrez Selenium IDE et dans le Target boîte, entrez « document.getElementById(“persist_box”) » et cliquez sur Rechercher. Selenium L'IDE devrait pouvoir localiser la case à cocher « Rester connecté ». Bien qu'il ne puisse pas mettre en surbrillance l'intérieur de la case à cocher, Selenium L'IDE peut toujours entourer l'élément d'une bordure vert vif, comme indiqué ci-dessous.

Localisation par DOM – getElementsByName

La méthode getElementById ne peut accéder qu'à un seul élément à la fois, à savoir l'élément portant l'ID que vous avez spécifié. La méthode getElementsByName est différente. Il collecte un tableau d'éléments portant le nom que vous avez spécifié. Vous accédez aux éléments individuels à l'aide d'un index qui commence à 0.

	getElementById Il n'aura qu'un seul élément pour vous. Cet élément porte l'ID que vous avez spécifié entre parenthèses de getElementById().
	getElementsByName Il obtiendra une collection d’éléments dont les noms sont tous identiques. Chaque élément est indexé avec un nombre commençant à 0 tout comme un tableau Vous spécifiez à quel élément vous souhaitez accéder en mettant son numéro d'index entre crochets dans la syntaxe de getElementsByName 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 à Mercury Page d'accueil de Tours et connectez-vous en utilisant « tutoriel » comme nom d'utilisateur et mot de passe. Firefox devrait vous amener à l’écran Flight Finder.

Étape 2) À l’aide de Firebug, inspectez les trois boutons radio dans la partie inférieure de la page (boutons radio Classe Économique, Classe Affaires et Première classe). Notez qu'ils portent tous le même nom qui est « servClass ».

Étape 3) Accédons d'abord au bouton radio «Classe économique». De ces trois boutons radio, cet élément vient en premier, il a donc un indice de 0. Dans Selenium IDE, tapez « document.getElementsByName(« servClass »)[0] » et cliquez sur le bouton Rechercher. Selenium IDE devrait être capable d’identifier correctement le bouton radio de la classe économique.

Étape 4) Remplacez le numéro d'index par 1 afin que votre Target deviendra désormais document.getElementsByName("servClass")[1]. Cliquez sur le bouton Rechercher et Selenium L'IDE devrait pouvoir mettre en surbrillance le bouton radio « Classe affaires », comme indiqué ci-dessous.

Localisation par DOM – dom:name

Comme mentionné précédemment, cette méthode ne s'appliquera que si l'élément auquel vous accédez est contenu dans un formulaire nommé.

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/ et utilisez Firebug pour inspecter la zone de texte Nom d'utilisateur. Notez qu'il est contenu dans un formulaire nommé « home ».

Étape 2) In Selenium IDE, tapez « document.forms[« home »].elements[« userName »] » et cliquez sur le bouton Rechercher. Selenium L'IDE doit pouvoir accéder à l'élément avec succès.

Localisation par DOM – dom:index

Cette méthode s'applique même lorsque l'élément ne se trouve pas dans un formulaire nommé car il utilise l'index du formulaire et non son nom.

Syntaxe

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

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

Nous accéderons à la zone de texte « Téléphone » dans Mercury Page d'inscription aux visites. Le formulaire de cette page n'a pas d'attribut de nom ni d'ID, ce sera donc un bon exemple.

Étape 1) Accédez à Mercury Page d'inscription aux visites et inspectez la zone de texte Téléphone. Notez que le formulaire qui la contient n'a pas d'attributs ID et nom.

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

Étape 3) Alternativement, vous pouvez utiliser le nom de l'élément au lieu de son index et obtenir le même résultat. Saisissez « document.forms[0].elements[« phone »] » dans Selenium IDE Target boîte. La zone de texte Téléphone doit toujours être mise en surbrillance.

Localisation par XPath

XPath est le langage utilisé lors de la localisation des nœuds XML (Extensible Markup Language). Puisque HTML peut être considéré comme une implémentation de XML, nous pouvons également utiliser XPath dans la localisation des éléments HTML.

• Avantage: Il peut accéder à presque tous les éléments, même ceux sans attributs de classe, de nom ou d'identifiant.
• Désavantage: Il s’agit de la méthode d’identification d’éléments la plus compliquée en raison du trop grand nombre de règles et de considérations différentes.

Heureusement, Firebug peut générer automatiquement XPath Selenium localisateurs. Dans l'exemple suivant, nous allons accéder à une image qui ne peut pas être accessible via les méthodes que nous avons décrites précédemment.

Étape 1) Accédez à Mercury Visitez la page d'accueil de Tours et utilisez Firebug pour inspecter le rectangle orange à droite de la case jaune « Liens ». Reportez-vous à l'image 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, tapez une barre oblique « / » dans le champ Target boîte puis collez le XPath que nous avons copié à l'étape précédente. L'entrée dans votre Target la boîte doit maintenant commencer par deux barres obliques « // ».

Étape 4) Cliquez sur le bouton Rechercher. Selenium L'IDE devrait pouvoir mettre en évidence la case orange comme indiqué ci-dessous.