Localisateurs en sélénium

Que sont les localisateurs ?

Locator est une commande qui indique à Selenium IDE quels éléments de l'interface graphique (par exemple Text 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 ! Par conséquent, 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 le pilote Web Selenium.

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. Commewise dans votre Essais 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.

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

Pour cet exemple, nous utiliserons Facebook comme application de test car Mercury Tours n'utilise 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 http://demo.guru99.com/test/facebook.html pour tester. Inspectez le « Email ou Téléphone" texte box en utilisant Firebug et prenez note de son identifiant. Dans ce cas, l'ID est "email. »

Localisation par ID

Étape 2) Lancez Selenium IDE et entrez « id=email» dans la cible box. Cliquez sur le bouton Rechercher et notez que le « E »mail ou Téléphone" texte box devient surligné en jaune et bordé de vert, ce qui signifie que Selenium IDE a pu localiser correctement cet élément.

Localisation par ID

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.

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

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

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

Localisation par nom

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

Étape 2) Dans Selenium IDE, entrez « name=userName » dans le champ Target. box et cliquez sur le bouton Rechercher. Selenium IDE devrait être capable de localiser le texte du nom d'utilisateur box en le mettant en valeur.

Localisation par nom

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.

Format cible: nom=nom_of_the_element filtre=valeur_of_filter

Voyons un exemple -

Étape 1) Connectez-vous à Mercury Tours.

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

Localiser l'élément par nom à l'aide de filtres

É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.

Localiser l'élément par nom à l'aide de filtres

É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 commande box de Selenium IDE, entrez la commande « clic ».
  • Dans la cible box, saisissez « name=tripType value=oneway ». La partie « value=oneway » est notre filtre.

Localiser l'élément par nom à l'aide de filtres

Étape 4) Cliquez sur le bouton Rechercher.

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

Localiser l'élément par nom à l'aide de filtres

É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é.

Localiser l'élément par nom à l'aide de filtres

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.

Format cible: lien=lien_texte

Dans cet exemple, nous accéderons au lien « S'INSCRIRE » trouvé sur la page d'accueil de Mercury Tours.

Étape 1)

  • Tout d’abord, assurez-vous que vous êtes déconnecté de Mercury Tours.
  • Accédez à la page d’accueil de Mercury Tours.

É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.

Localisation par texte de lien

Étape 3) Copiez le texte du lien dans Firebug et collez-le sur la cible de Selenium IDE box. Préfixez-le par « lien = ».

Localisation par texte de lien

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

Localisation par texte de lien

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

Localisation par texte de lien

Localisation par DOM (Document Object Model)

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

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 http://demo.guru99.com/test/facebook.html Accédez-y et utilisez Firebug pour inspecter la vérification « Gardez-moi connecté » box. Prenez note de son identifiant.

Localisation par DOM – getElementById

Nous pouvons voir que l’ID que nous devrions utiliser est « persist_box ».

Étape 2) Ouvrez Selenium IDE et dans la cible box, saisissez « document.getElementById(« persist_box")" et cliquez sur Rechercher. Selenium IDE devrait être capable de localiser la vérification « Gardez-moi connecté » box. Bien qu'il ne puisse pas mettre en valeur l'intérieur du chèque box, Selenium IDE peut toujours entourer l'élément d'une bordure vert vif, comme indiqué ci-dessous.

Localisation par DOM – getElementById

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.

Localisation par DOM – getElementsByName

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().

Localisation par DOM – getElementsByName

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 précisez à quel élément vous souhaitez accéder en mettant son numéro d'index dans le carré brackets 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 à la page d'accueil de Mercury 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 ».

Localisation par DOM – getElementsByName

Étape 3) Accédons d'abord au bouton radio «Classe économique». Parmi 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.

Localisation par DOM – getElementsByName

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

Localisation par DOM – getElementsByName

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 à la page d'accueil de Mercury Tours http://demo.guru99.com/test/newtours/ et utilisez Firebug pour inspecter le texte du nom d'utilisateur box. Notez qu'il est contenu dans un formulaire nommé « home ».

Localisation par DOM – dom:name

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

Localisation par DOM – dom:name

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 au texte « Téléphone » box sur la page d'inscription de Mercury Tours. 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 à la page d'inscription de Mercury Tours et inspectez le texte du téléphone. box. Notez que le formulaire qui le contient n'a pas d'attributs ID et name.

Localisation par DOM – dom:index

Étape 2) Entrez « document.forms[0].elements[3] » dans la cible de Selenium IDE box et cliquez sur le bouton Rechercher. Selenium IDE devrait pouvoir accéder au texte du téléphone box correctement.

Localisation par DOM – dom:index

Étape 3) Alternativement, vous pouvez utiliser le nom de l'élément au lieu de son index et obtenir le même résultat. Entrez « document.forms[0].elements[« phone »] » dans la cible de Selenium IDE box. Le texte du téléphone box devrait encore être mis en évidence.

Localisation par DOM – dom:index

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 des localisateurs XPath Selenium. Dans la suitewing Par exemple, nous accéderons à une image à laquelle il est impossible d'accéder via les méthodes dont nous avons parlé plus tôt.

Étape 1) Accédez à la page d'accueil de Mercury Tours et utilisez Firebug pour inspecter le rectangle orange à droite des « Liens » jaunes. box. Reportez-vous à l'image ci-dessous.

Localisation par XPath

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

Localisation par XPath

Étape 3) In Sélénium IDE, tapez une barre oblique « / » dans le champ Cible box puis collez le XPath que nous avons copié à l'étape précédente. L'entrée dans votre Target box devrait maintenant commencer par deux barres obliques « // ».

Localisation par XPath

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

Localisation par XPath

Résumé

Syntaxe d'utilisation du localisateur

Method Syntaxe cible Exemple
Par pièce d'identité id= id_of_the_element identifiant = email
De nom nom=nom_de_l'élément nom = nom d'utilisateur
Par nom à l'aide de filtres nom=nom_de_l'élément filtre=valeur_du_filtre nom = valeur du type de voyage = aller simple
Par texte de lien lien=lien_texte lien=INSCRIPTION