Menu

Localisateurs de sélénium: identifier les éléments Web à l'aide de XPath dans Selenium (exemples)

selenium locators identify web elements using xpath selenium

Essayez Notre Instrument Pour Éliminer Les Problèmes

Tutoriel Selenium Locators: Apprenez à identifier les éléments Web à l'aide de XPath dans Selenium avec des exemples

dans le tutoriel précédent , nous vous avons présenté un autre outil de test d'automatisation nommé Firebug. Nous avons également créé manuellement notre propre script d'automatisation en utilisant Firebug et ses fonctionnalités. Nous avons également appris à apposer les modifications souhaitées dans notre script.

À l'avenir, dans ce didacticiel, nous allons jeter un œil à divers types de localisateurs dans Selenium et leur technique d'accessibilité pour créer des scripts de test . Ainsi, ce didacticiel comprend une introduction détaillée aux différents types de localisateurs.

C'est notre 5e didacticiel du didacticiel Selenium séries.

Qu'est-ce que Locator?

Le localisateur peut être qualifié d'adresse qui identifie un élément Web de manière unique dans la page Web. Les localisateurs sont les propriétés HTML d'un élément Web qui indiquent au Selenium l'élément Web sur lequel il a besoin pour effectuer l'action.

localisateurs de sélénium Xpath dans le sélénium

Il existe une gamme variée d'éléments Web. Les plus courants sont:

  • Zone de texte
  • Bouton
  • Menu déroulant
  • Hyperlien
  • Case à cocher
  • Bouton radio

Ce que vous apprendrez:

Types de localisateurs

Identifier ces éléments a toujours été un sujet très délicat et nécessite donc une approche précise et efficace. Ainsi, nous pouvons affirmer que plus efficace le localisateur, plus stable sera le script d'automatisation. Essentiellement, chaque commande Selenium nécessite des localisateurs pour trouver les éléments Web. Ainsi, pour identifier ces éléments Web avec précision et précision, nous disposons de différents types de localisateurs.

Types de localisateurs dans Selenium 1

Maintenant, comprenons davantage en exerçant chacun d'eux indépendamment.

Avant de commencer avec les localisateurs, permettez-moi de prendre un moment pour présenter l'application testée. Nous utiliserions 'https://accounts.google.com/' pour localiser différents types d'éléments Web à l'aide de différents types de localisateurs.

Utilisation de l'ID comme localisateur

La méthode la meilleure et la plus populaire pour identifier un élément Web consiste à utiliser l'ID. L'ID de chaque élément est censé être unique.

Types de localisateurs dans Selenium 2

Dans cet exemple, nous accédions à la zone de texte 'Email' présente dans le formulaire de connexion sur gmail.com.

Recherche d'un ID d'un élément Web en utilisant Firebug

sites d'anime pour regarder l'anime gratuitement en anglais doublé

Étape 1 : Lancez le navigateur Web (Firefox) et accédez à «https://accounts.google.com/».

Étape 2 : Ouvrez firebug (soit en appuyant sur F12, soit via des outils).

Étape 3 : Cliquez sur l'icône d'inspection pour identifier l'élément Web.

Localisateurs de sélénium 1

Étape 4 : Survolez l'élément Web (zone de texte Email dans notre cas) sur lequel nous souhaitons effectuer une action. Dans la section firebug, on peut voir les balises HTML correspondantes en surbrillance.

Localisateurs de sélénium 2

Étape 5 : Soyez conscient de l'attribut ID et prenez-en note. Nous devons maintenant vérifier si l'ID identifié est capable de trouver l'élément de manière unique et sans faille.

Syntaxe : id = id de l'élément

Dans notre cas, l'identifiant est «Email».

Approche alternative:

Au lieu de suivre les étapes 2 à 4, nous pouvons directement localiser / inspecter l'élément Web en faisant un clic droit sur l'élément Web (Email Textbox) dont nous devons inspecter la valeur de localisateur et en cliquant sur l'option «Inspecter l'élément avec Firebug». Ainsi, cet événement de clic déclenche l'expansion de la section firebug et la balise HTML correspondante sera mise en évidence.

Localisateurs de sélénium 3

Vérifiez la valeur du localisateur

En supposant que le navigateur est ouvert et qu'il est redirigé vers «https://accounts.google.com/».

Étape 1 : Lancez Selenium IDE.

Étape 2 : Cliquez sur la première ligne de la section éditeur.

Étape 3 : Tapez «id = Email», c'est-à-dire la valeur du localisateur dans la zone cible.

Étape 4 : Cliquez sur le bouton Rechercher. Si la valeur de localisateur fournie est légitime, la zone de texte Email sera mise en évidence avec une couleur jaune avec une bordure verte fluorescente autour du champ. Si la valeur du localisateur fournie est incorrecte, un message d'erreur sera imprimé dans le volet du journal en bas de Selenium IDE.

Cas 1 - Valeur du localisateur = Correct

Localisateurs de sélénium 4

Cas 2 - Valeur du localisateur = incorrect

Localisateurs de sélénium 5

Étape 5 : Afin de vérifier davantage, un utilisateur peut également exécuter la commande «type» contre la cible donnée en fournissant une valeur dans le champ «Valeur». Si l'exécution de la commande entre la valeur spécifiée dans la zone de texte Email, cela signifie que le type de localisateur identifié est correct et accessible.

Utilisation de ClassName comme localisateur

Il n'y a qu'une différence subtile entre l'utilisation de l'ID comme localisateur et l'utilisation du nom de classe comme localisateur.

Dans cet exemple, nous accédions à 'Besoin d'aide?' lien hypertexte présent en bas du formulaire de connexion sur gmail.com.

Recherche d'un nom de classe d'un élément Web en utilisant Firebug

Étape 1 : Localisez / inspectez l'élément Web (lien «Besoin d'aide?» Dans notre cas) en faisant un clic droit sur l'élément Web dont nous devons inspecter la valeur de localisateur et en cliquant sur l'option «Inspecter l'élément avec Firebug».

Étape 2 : Soyez conscient de l'attribut de nom de classe et prenez-en note. Nous devons maintenant vérifier si le nom de classe identifié est capable de trouver l'élément de manière unique et précise.

Localisateurs de sélénium 6

Syntaxe: class = nom de classe de l'élément

Dans notre cas, le nom de classe est 'need-help-reverse'

Vérifiez la valeur du localisateur

Étape 1 : Tapez «class = need-help-reverse» dans la case cible de Selenium IDE.

Étape 2 : Cliquez sur le bouton Rechercher. Notez que le lien hypertexte sera mis en évidence avec une couleur jaune avec une bordure verte fluorescente autour du champ.

(Cliquez pour voir l'image agrandie)

Localisateurs de sélénium 7

Utiliser le nom comme localisateur

La localisation d'un élément Web à l'aide du nom est très similaire aux deux types de localisateurs précédents. La seule différence réside dans la syntaxe.

Dans cet exemple, nous accédions à la zone de texte «Mot de passe» présente dans le formulaire de connexion sur gmail.com.

Syntaxe: name = nom de l'élément

Dans notre cas, le nom est «Passwd».

Vérifiez la valeur du localisateur

Étape 1 : Tapez «name = Passwd» dans la case cible et cliquez sur le bouton Rechercher. Notez que la zone de texte «Mot de passe» serait mise en surbrillance.

Utilisation du texte de lien comme localisateur

Tous les hyperliens d'une page Web peuvent être identifiés à l'aide du texte de lien. Les liens sur une page Web peuvent être déterminés à l'aide de la balise d'ancrage ( ). La balise d'ancrage est utilisée pour créer les hyperliens sur une page Web et le texte entre l'ouverture et la fermeture des balises d'ancrage constitue le texte du lien ( Du texte ).

Dans cet exemple, nous accédions au lien «Créer un compte» présent au bas du formulaire de connexion sur gmail.com.

Recherche d'un texte de lien d'un élément Web à l'aide de Firebug

Étape 1 : Localisez / inspectez l'élément Web (lien «Créer un compte» dans notre cas) en faisant un clic droit sur l'élément Web dont nous devons inspecter la valeur de localisateur et en cliquant sur l'option «Inspecter l'élément avec Firebug».

Étape 2 : Soyez conscient du texte présent dans le tags et prenez-en note. Par conséquent, ce texte sera utilisé pour identifier le lien sur une page Web de manière unique.

(Cliquez pour voir l'image agrandie)

Localisateurs de sélénium 8

comment ouvrir un fichier jar

Syntaxe: link = texte du lien de l'élément

Dans notre cas, le texte du lien est «Créer un compte».

Vérifiez la valeur du localisateur

Étape 1 : Tapez 'lien = Créer un compte', c'est-à-dire la valeur du localisateur dans la zone cible dans Selenium IDE.

Étape 2 : Cliquez sur le bouton Rechercher. Notez que le lien serait mis en évidence avec une couleur jaune avec une bordure verte fluorescente autour du champ.

Localisateurs de sélénium 9

Utilisation de XPath comme localisateur

Xpath est utilisé pour localiser un élément Web en fonction de son chemin XML. XML signifie Extensible Markup Language et est utilisé pour stocker, organiser et transporter des données arbitraires. Il stocke les données dans une paire clé-valeur qui est très similaire aux balises HTML. Les deux étant les langages de balisage et comme ils relèvent du même parapluie, xpath peut être utilisé pour localiser des éléments HTML.

Le principe de la localisation des éléments à l'aide de Xpath est le passage entre divers éléments sur toute la page et permet ainsi à un utilisateur de trouver un élément avec la référence d'un autre élément.

Xpath peut être créé de deux manières:

Xpath relatif

Relative Xpath commence à partir de l'emplacement actuel et est précédé d'un «//».

Par exemple: // span (@ class = 'Email')

Xpath absolu

Absolute Xpath commence par un chemin racine et est précédé d'un «/».

Par exemple: / HTML / body / div / div (@ id = 'Email')

Points clés:

  • Le taux de réussite de la recherche d'un élément à l'aide de Xpath est trop élevé. Avec l'instruction précédente, Xpath peut trouver relativement tous les éléments d'une page Web. Ainsi, Xpaths peut être utilisé pour localiser des éléments sans id, classe ou nom.
  • La création d'un Xpath valide est un processus délicat et complexe. Il existe des plug-ins disponibles pour générer Xpath, mais la plupart du temps, les Xpaths générés ne parviennent pas à identifier correctement l'élément Web.
  • Lors de la création de xpath, l'utilisateur doit connaître les différentes nomenclatures et protocoles.

Exemples de sélénium XPath:

quelle est ma clé de sécurité wifi

Vérificateur Xpath

La création de Xpath devient un peu plus simple en utilisant Xpath Checker. Xpath Checker est un module complémentaire de Firefox pour générer automatiquement Xpath pour un élément Web. L'add-on peut être téléchargé et installé comme n'importe quel autre plug-in. Le plug-in peut être téléchargé à partir de «https://addons.mozilla.org/en-US/firefox/addon/xpath-checker/».

Dès que le plug-in est installé, il peut être vu dans le menu contextuel en cliquant avec le bouton droit de la souris sur tout élément dont nous voulons générer xpath.

Localisateurs de sélénium 10

Cliquez sur «View Xpath» pour voir l'expression Xpath de l'élément. Une fenêtre d'éditeur apparaîtrait avec l'expression Xpath générée. L'utilisateur a maintenant la liberté d'éditer et de modifier l'expression Xpath générée. Les résultats correspondants seraient mis à jour cumulativement.

Localisateurs de sélénium 11

Notez que XPath Checker est également disponible pour d'autres navigateurs.

Mais réitérant le fait que la plupart du temps, les Xpaths générés ne parviennent pas à identifier correctement l'élément Web. Ainsi, il est recommandé de créer notre propre Xpath en suivant les règles et protocoles prédéfinis.

Dans cet exemple, nous accédions à l'image «Google» présente en haut du formulaire de connexion sur gmail.com.

Création d'un Xpath d'un élément Web

Étape 1 : Tapez «// img (@ class =’ logo ’)», c’est-à-dire la valeur du localisateur dans la zone cible de l’EDI Selenium.

Syntaxe: Xpath de l'élément

Étape 2 : Cliquez sur le bouton Rechercher. Notez que l'image serait mise en évidence avec une couleur jaune avec une bordure verte fluorescente autour du champ.

Localisateurs de sélénium 12

Conclusion

Voici les points essentiels de cet article.

  • Les localisateurs sont les propriétés HTML d'un élément Web qui indiquent au Selenium l'élément Web sur lequel il doit effectuer des actions.
  • Il existe un large éventail d'éléments Web avec lesquels un utilisateur peut être amené à interagir régulièrement. Certains d'entre eux sont: Textbox, Button, Drop Down, Hyperlink, CheckBox et Radio Button.
  • La gamme variée d'éléments Web s'accompagne d'une vaste gamme de stratégies / d'approches pour localiser ces éléments Web.
  • Certains des types de localisateurs largement utilisés sont ID, ClassName, Link Text, XPath, CSS Selectors et Name.

Remarque: en raison du fait que la création de CSS Selector et XPath nécessite beaucoup d'efforts et de pratique, le processus n'est donc exercé que par des utilisateurs plus sophistiqués et formés.

Dans ce didacticiel, nous avons appris différents types de localisateurs, dont Selenium Xpath.

Tutoriel suivant # 6 : Dans la suite de ce tutoriel sur les types de sélénium localisateur, nous allons apprendre à utiliser Sélecteur CSS comme localisateur.

Des questions? Faites-nous savoir dans les commentaires. Nous essaierons de tout résoudre.

lecture recommandée

^