Localisateurs dans Selenium IDE: CSS Selector - DOM - XPath - identifiant

Table des matières:

Anonim

Que sont les localisateurs?

Locator est une commande qui indique à Selenium IDE les éléments de l'interface graphique (par exemple, la zone de texte, les boutons, les cases à cocher, etc.) sur lesquels il doit fonctionner. L'identification des éléments d'interface utilisateur 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 GUI incorrects ou aucun élément du tout! Par conséquent, Selenium fournit un certain nombre de localisateurs pour localiser précisément un élément GUI

Les différents types de localisateur CSS dans Selenium IDE

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

Le choix du localisateur dépend en grande partie de votre application sous test . Dans ce tutoriel, nous basculerons entre Facebook, new tours.demoaut sur la base des localisateurs pris en charge par ces applications. De même, dans votre projet de test, vous sélectionnerez l'un des localisateurs d'éléments énuméré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 car 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 les tests. Inspectez la zone de texte "E-mail ou téléphone" à l'aide de Firebug et notez son identifiant. Dans ce cas, l'ID est «email».

Étape 2. Lancez Selenium IDE et entrez "id = email" dans la zone Cible. Cliquez sur le bouton Rechercher et notez que la zone de texte "E-mail ou téléphone" devient surlignée en jaune et bordée de vert, ce qui signifie que Selenium 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 préfixe "name =" à la place.

Format cible: nom = 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 à http://demo.guru99.com/test/newtours/ et utilisez Firebug pour inspecter la zone de texte "Nom d'utilisateur". Prenez note de son attribut de nom.

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

Étape 2. Dans Selenium IDE, entrez "name = userName" dans la zone Cible et cliquez sur le bouton Rechercher. Selenium IDE devrait être en mesure de localiser la zone de texte Nom d'utilisateur en la mettant en surbrillance.

Localisation par nom à l'aide de filtres

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

Format cible : name = name_of_the_element filter = value_of_filter

Voyons un exemple -

Étape 1 . Connectez-vous à Mercury Tours en utilisant "tutoriel" comme nom d'utilisateur et mot de passe. Cela devrait vous amener à la page Flight Finder ci-dessous.

Étape 2. À l'aide de Firebug, notez que les boutons radio aller-retour et aller simple ont le même nom «tripType». Cependant, ils ont des attributs VALUE différents, nous pouvons donc les utiliser comme filtre.

Étape 3.

  • Nous allons d'abord accéder au bouton radio One Way. Cliquez sur la première ligne de l'éditeur.
  • Dans la zone de commande de Selenium IDE, entrez la commande "clic".
  • Dans la zone Cible, saisissez "name = tripType value = oneeway". La partie "value = oneeway" est notre filtre.

Étape 4 . Cliquez sur le bouton Rechercher et 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.

Étape 5. 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 Aller-retour, cette fois, en utilisant "name = tripType value = aller-retour" comme cible.

Localisation par texte de lien

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

Format cible : link = link_text

Dans cet exemple, nous allons accéder au lien «INSCRIPTION» qui se trouve 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, notre texte de lien est "ENREGISTRER". Copiez le texte du lien.

Étape 3 . Copiez le texte du lien dans Firebug et collez-le dans la boîte Target de Selenium IDE. Préfixez-le avec "link =".

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

Étape 5. Pour vérifier davantage, entrez "clickAndWait" dans la boîte de commande et exécutez-le. Selenium IDE devrait pouvoir cliquer sur ce lien ENREGISTRER avec succès et vous amener à la page d'inscription ci-dessous.

Localisation par sélecteur CSS

Les sélecteurs CSS dans Selenium sont des modèles de chaîne utilisés pour identifier un élément en fonction d'une combinaison de balise HTML, d'ID, de classe et d'attributs. La localisation par les sélecteurs CSS dans Selenium est plus compliquée que les méthodes précédentes, mais c'est la stratégie de localisation la plus courante des utilisateurs avancés de Selenium car elle peut accéder même aux éléments qui n'ont pas d'identifiant ou de nom.

Les sélecteurs CSS dans Selenium ont de nombreux formats, mais nous nous concentrerons uniquement sur les plus courants.

  • Tag et identifiant
  • Tag et classe
  • Balise et attribut
  • Balise, classe et attribut
  • Texte intérieur

Lors de l'utilisation de cette stratégie, nous préfixons toujours la zone Cible avec "css =" comme cela sera montré dans les exemples suivants.

Localisation par sélecteur CSS - Tag et ID

Encore une fois, nous utiliserons la zone de texte Email de Facebook dans cet exemple. Comme vous vous en souvenez, il a un identifiant "email", et nous y avons déjà accédé dans la section "Localisation par identifiant". Cette fois, nous utiliserons un sélecteur CSS Selenium avec ID pour accéder à ce même élément.

Syntaxe

Description

css = tag # id
  • tag = la balise HTML de l'élément auquel on accède
  • # = le signe de hachage. Cela devrait toujours être présent lors de l'utilisation d'un sélecteur CSS Selenium avec ID
  • id = l'ID de l'élément auquel on accède

Gardez à l'esprit que l'ID est toujours précédé d'un signe de hachage (#).

Étape 1. Accédez à www.facebook.com. À l'aide de Firebug, examinez la zone de texte "E-mail ou téléphone".

À ce stade, notez que la balise HTML est «input» et que son identifiant est «email». Notre syntaxe sera donc "css = input # email".

Étape 2. Entrez "css = input # email" dans la zone Cible de Selenium IDE et cliquez sur le bouton Rechercher. Selenium IDE devrait être en mesure de mettre en évidence cet élément.

Localisation par sélecteur CSS - Balise et classe

La localisation par CSS Selector dans Selenium à l'aide d'une balise HTML et d'un nom de classe est similaire à l'utilisation d'une balise et d'un ID, mais dans ce cas, un point (.) Est utilisé à la place d'un signe de hachage.

Syntaxe

Description

css = balise. classer
  • tag = la balise HTML de l'élément auquel on accède
  • . = le signe du point. Cela devrait toujours être présent lors de l'utilisation d'un sélecteur CSS avec classe
  • class = la classe de l'élément auquel on accède

Étape 1. Accédez à la page de démonstration http://demo.guru99.com/test/facebook.html et utilisez Firebug pour inspecter la zone de texte "E-mail ou téléphone". Notez que sa balise HTML est "input" et sa classe "inputtext".

Étape 2. Dans Selenium IDE, entrez "css = input.inputtext" dans la zone Cible et cliquez sur Rechercher. Selenium IDE devrait être capable de reconnaître la zone de texte Email ou Phone.

Notez que lorsque plusieurs éléments ont la même balise HTML et le même nom, seul le premier élément du code source sera reconnu . À l'aide de Firebug, inspectez la zone de texte Mot de passe dans Facebook et notez qu'elle porte le même nom que la zone de texte Email ou Téléphone.

La raison pour laquelle seule la zone de texte Email ou Téléphone a été mise en surbrillance dans l'illustration précédente est qu'elle vient en premier dans la source de la page Facebook.

Localisation par sélecteur CSS - Balise et attribut

Cette stratégie utilise la balise HTML et un attribut spécifique de l'élément auquel accéder.

Syntaxe

Description

css = balise [attribut = valeur]
  • tag = la balise HTML de l'élément auquel on accède
  • [et] = crochets dans lesquels un attribut spécifique et sa valeur correspondante seront placés
  • attribut = l'attribut à utiliser. Il est conseillé d'utiliser un attribut unique à l'élément tel qu'un nom ou un identifiant.
  • valeur = la valeur correspondante de l'attribut choisi.

Étape 1. Accédez à la page d'inscription de Mercury Tours (http://demo.guru99.com/test/newtours/register.php) et inspectez la zone de texte «Nom de famille». Prenez note de sa balise HTML ("input" dans ce cas) et de son nom ("lastName").

Étape 2. Dans Selenium IDE, entrez "css = input [name = lastName]" dans la zone Cible et cliquez sur Rechercher. Selenium IDE devrait pouvoir accéder à la zone Nom de famille avec succès.

Lorsque plusieurs éléments ont la même balise HTML et le même attribut, seul le premier sera reconnu . Ce comportement est similaire à la localisation d'éléments à l'aide de sélecteurs CSS avec la même balise et la même classe.

Localisation par sélecteur CSS - balise, classe et attribut

Syntaxe Description
css = tag.class [attribut = valeur]
  • tag = la balise HTML de l'élément auquel on accède
  • . = le signe du point. Cela devrait toujours être présent lors de l'utilisation d'un sélecteur CSS avec classe
  • class = la classe de l'élément auquel on accède
  • [et] = crochets dans lesquels un attribut spécifique et sa valeur correspondante seront placés
  • attribut = l'attribut à utiliser. Il est conseillé d'utiliser un attribut unique à l'élément tel qu'un nom ou un identifiant.
  • valeur = la valeur correspondante de l'attribut choisi.

Étape 1. Accédez à la page de démonstration http://demo.guru99.com/test/facebook.html et utilisez Firebug pour inspecter les champs de saisie «Email ou téléphone» et «Mot de passe». Prenez note de leur balise HTML, de leur classe et de leurs attributs. Pour cet exemple, nous sélectionnerons leurs attributs 'tabindex'.

Étape 2. Nous accèderons d'abord à la zone de texte «E-mail ou téléphone». Ainsi, nous utiliserons une valeur tabindex de 1. Entrez "css = input.inputtext [tabindex = 1]" dans la zone Cible de Selenium IDE et cliquez sur Rechercher. La zone de saisie «Email ou téléphone» doit être mise en évidence.

Étape 3. Pour accéder à la zone de saisie du mot de passe, remplacez simplement la valeur de l'attribut tabindex. Entrez "css = input.inputtext [tabindex = 2]" dans la zone Cible et cliquez sur le bouton Rechercher. Selenium IDE doit être en mesure d'identifier la zone de texte Mot de passe avec succès.

Localisation par sélecteur CSS - texte intérieur

Comme vous l'avez peut-être remarqué, les étiquettes HTML reçoivent rarement des attributs d'id, de nom ou de classe. Alors, comment y accéder? La réponse est à travers l'utilisation de leurs textes intérieurs. Les textes internes sont les modèles de chaîne réels que l'étiquette HTML affiche sur la page.

Syntaxe

Description

css = tag: contient ("texte intérieur")
  • tag = la balise HTML de l'élément auquel on accède
  • texte intérieur = le texte intérieur de l'élément

Étape 1. Accédez à la page d'accueil de Mercury Tours (http://demo.guru99.com/test/newtours/) et utilisez Firebug pour rechercher l'étiquette «Mot de passe». Prenez note de sa balise HTML (qui est "font" dans ce cas) et notez qu'elle n'a pas d'attributs de classe, d'id ou de nom.

Étape 2. Tapez css = font: contains ("Password:") dans la zone Target de Selenium IDE et cliquez sur Find. Selenium IDE devrait pouvoir accéder à l'étiquette de mot de passe comme indiqué dans l'image ci-dessous.

Étape 3. Cette fois, remplacez le texte interne par "Boston" afin que votre cible devienne désormais "css = font: contains (" Boston ")". Cliquez sur Rechercher. Vous devriez remarquer que le libellé «Boston to San Francisco» est mis en évidence. Cela vous montre que Selenium IDE peut accéder à une longue étiquette même si vous venez d'indiquer le premier mot de son texte interne.

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 boîte cible commencera toujours par "dom = document…"; cependant, le préfixe "dom =" est normalement supprimé car Selenium IDE est capable d'interpréter automatiquement tout ce qui commence par le mot-clé "document" comme étant un chemin dans le DOM de Selenium de toute façon.

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

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

Localisation par DOM - getElementById

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

Syntaxe

Description

document.getElementById ("id de l'élément")

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 placée entre parenthèses ("").

Étape 1. Utilisez cette page de démonstration http://demo.guru99.com/test/facebook.html Accédez-y et utilisez Firebug pour vérifier la case à cocher "Keep me connecté". Prenez note de son identifiant.

Nous pouvons voir que l'ID que nous devrions utiliser est "persist_box".

Étape 2. Ouvrez Selenium IDE et dans la zone Cible, entrez "document.getElementById (" persist_box ")" et cliquez sur Rechercher. Selenium IDE devrait être en mesure de localiser la case à cocher "Me garder connecté". Bien qu'il ne puisse pas mettre en évidence l'intérieur de la case à cocher, Selenium IDE peut toujours entourer l'élément avec une bordure verte brillante 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 avec 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'obtiendra qu'un seul élément pour vous.
  • Cet élément porte l'ID que vous avez spécifié entre les parenthèses de getElementById ().

getElementsByName

  • Il obtiendra une collection d'éléments dont les noms sont tous les mêmes.
  • Chaque élément est indexé avec un nombre commençant à 0 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

Description

document.getElementsByName ("nom") [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 le "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 ont tous le même nom qui est "servClass".

Étape 3. Commençons par accéder au bouton radio "Classe économique". De tous ces trois boutons radio, cet élément vient en premier, donc il a un index de 0. Dans Selenium IDE, tapez "document.getElementsByName (" servClass ") [0]" et cliquez sur le bouton Rechercher. Selenium IDE devrait être en mesure d'identifier correctement le bouton radio de la classe économique.

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

Localisation par DOM - dom: nom

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

Description

document.forms ["nom du formulaire"] .elements ["nom de l'élément"]
  • 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 nom 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 la zone de texte Nom d'utilisateur. Notez qu'il est contenu dans un formulaire nommé «domicile».

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

Description

document.forms [index du formulaire] .elements [index de l'élément]
  • 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" de la page d'inscription de Mercury Tours. Le formulaire de cette page n'a pas d'attribut de nom et d'ID, ce sera donc un bon exemple.

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

Étape 2. Entrez "document.forms [0] .elements [3]" dans la zone Cible de Selenium IDE et cliquez sur le bouton Rechercher. Selenium IDE devrait pouvoir accéder 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 et obtenir le même résultat. Entrez "document.forms [0] .elements [" phone "]" dans la zone Cible de Selenium IDE. La zone de texte Téléphone doit toujours être mise en évidence.

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 pour localiser 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'id.

Inconvénient: c'est la méthode la plus compliquée d'identification des éléments en raison d'un trop grand nombre de règles et de considérations différentes.

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

Étape 1. Accédez à la page d'accueil de Mercury Tours et utilisez Firebug pour inspecter le rectangle orange à droite de la boîte 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. Dans Selenium IDE, tapez une barre oblique "/" dans la zone Cible, puis collez le XPath que nous avons copié à l'étape précédente. L'entrée dans votre zone cible doit maintenant commencer par deux barres obliques "//".

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

Résumé

Syntaxe pour l'utilisation du localisateur

Méthode

Syntaxe cible

Exemple
Par ID id = id_of_the_element id = email
De nom name = name_of_the_element name = userName
Par nom à l'aide de filtres name = name_of_the_element filter = value_of_filter name = tripType value = oneeway
Par texte du lien link = link_text lien = INSCRIPTION
Tag et identifiant css = tag # id css = entrée # email
Tag et classe css = balise. classer css = input.inputtext
Balise et attribut css = balise [attribut = valeur] css = entrée [nom = nom]
Balise, classe et attribut css = balise. classe [attribut = valeur] css = input.inputtext [tabindex = 1]