Maîtriser XPath dans Selenium : comment localiser des éléments

By Titus Kamunya et édité par Narendra Mohan Mittal

Maîtriser XPath dans Selenium Comment localiser des éléments

Les ingénieurs de test sont essentiels dans le cycle de vie du développement logiciel car ils s'assurent qu'une équipe fournit des applications sans bug et fonctionnelles. Ces ingénieurs soumettent les applications à différents tests avant qu'elles ne puissent être expédiées ou déclarées prêtes pour les utilisateurs.

Les testeurs doivent être compétents et capables de localiser et d'interagir avec les éléments Web. Selenium est l'un des outils d'automatisation des tests les plus utilisés par les équipes de développement modernes. Cet outil a quatre composants ; Grille de sélénium, Pilote Web Selenium, Selenium IDE et Selenium RC.

Aujourd'hui, nous nous concentrerons sur Selenium WebDriver, car il contient XPath. Cet article définira XPath, discutera de la syntaxe de base de XPath et illustrera comment XPath dans Selenium.

What is XPath

XPath ( XML Path Language ) est un langage de requête permettant de sélectionner et de parcourir des attributs et des éléments dans des documents XML. XPath définit une expression de chemin, offrant un moyen d'adresser des parties spécifiques d'un document XML et d'en extraire des informations.

Sa syntaxe ressemble à un chemin de système de fichiers. Il comporte également des fonctions et des symboles qui facilitent la sélection d'éléments en fonction de leurs attributs et de leur hiérarchie. Vous pouvez utiliser XPath avec des technologies telles que XML, HTML et XSLT pour extraire et manipuler des données.

Pourquoi utiliser XPath ?

C'est flexible: Contrairement aux sélecteurs CSS qui ne peuvent localiser des éléments qu'à l'aide d'un nom de balise, d'un ID ou d'une classe, XPath vous permet de localiser des éléments à l'aide d'autres attributs.
Réutilisable: Vous pouvez stocker votre XPath dans des variables et les réutiliser dans votre code.
Sélection précise des nœuds: XPath fournit un moyen standardisé de cibler des éléments spécifiques dans un document Web.

Basic Syntax of XPath

XPath vous permet de trouver n'importe quel élément sur une page Web en utilisant le DOM. Cependant, avant de vérifier la syntaxe, nous devons comprendre les expressions XPath suivantes ;

Expression	Description
nom de nœud/ nom de balise	Sélectionne tous les nœuds avec le nom 'nodename'/ 'tagname'
/	Sélectionne à partir du nœud racine
//	Sélectionne les nœuds du document actuel à partir du nœud actuel correspondant à la sélection, quel que soit leur emplacement
@	Sélectionne les attributs
..	Sélectionne le parent du nœud actuel
.	Sélectionne le nœud actuel

La syntaxe standard pour XPath est ;

XPath=//tagname[@attribute='value']

Comme vous pouvez le voir, la syntaxe commence par une double barre oblique (//), qui commence par le nœud actuel tel que défini par le nom de la balise/nœud.

Absolute XPath vs. Relative XPath

Nous avons deux chemins lorsqu'il s'agit de XPath ; XPath absolu et XPath relatif ;

XPath absolu

Un XPath absolu est un chemin direct de la racine à l'élément souhaité. Vous commencez par le nœud racine et terminez par le nœud cible.

Vous pouvez avoir un document HTML avec le contenu suivant ;

<!DOCTYPE html>
<html>
<head>
    <title>Geekflare</title>
</head>
<body>
    <div>
        <h1>Welcome to Geekflare</h1>
    </div>
</body>
</html>

Si nous voulons localiser l'élément avec le contenu "Bienvenue sur Geekflare", vous suivrez ce chemin;

/html/body/div/h1

Dans le document ci-dessus, nous avons ;

Le html comme nœud racine : /html
Le corps est un nœud parent : /html/body
Le div en tant qu'enfant du nœud body : /html/body/div
Le h1 en tant qu'enfant du nœud div : /html/body/div/h1

Pour obtenir l'élément le plus profond, vous devez suivre ce chemin.

Quand utiliser Absolute XPath

Absolute XPath suit un chemin "spécifique". Il conviendra donc parfaitement lorsque vous avez plusieurs éléments avec des attributs similaires sur une page, en vous assurant de cibler les éléments exacts sur un document.

Cependant, XPath est trop sensible aux modifications de la structure du document HTML. En tant que tel, un simple changement peut casser votre Absolute XPath.

XPath relatif

Le XPath relatif commence à partir de n'importe quel nœud et se termine par le nœud cible. Ce chemin n'est pas affecté par les modifications apportées au document, ce qui le rend préférable dans la plupart des cas. Avec Relative XPath, vous pouvez localiser des éléments à partir de n'importe quelle partie du document. L'expression Relative XPath commence par des doubles barres obliques '//'.

Si nous utilisons le document HTML, nous pouvons localiser notre H1 qui dit "Bienvenue sur Geekflare";

<!DOCTYPE html>
<html>
<head>
    <title>Geekflare</title>
</head>
<body>
    <div>
        <h1>Welcome to Geekflare</h1>
    </div>
</body>
</html>

Notre XPath relatif à h1 sera ;

//body/div/h1

Quand utiliser XPath relatif

Vous devez utiliser Relative XPath lorsque vous recherchez un équilibre entre flexibilité et spécificité. Ce chemin est résilient aux modifications du document HTML, étant donné que la relation entre les éléments reste spécifique.

Locate Elements using XPath in Selenium

Selenium est un framework open source qui permet aux utilisateurs d'automatiser les navigateurs Web. Le framework dispose d'une collection de bibliothèques et d'outils qui aident les testeurs à interagir automatiquement et systématiquement avec les éléments Web.

En supposant que nous ayons un document Web contenant une liste de chansons comme suit ;

<!DOCTYPE html>
<html>
<head>
    <title>Song Library</title>
</head>
<body>
    <h1>Song Library</h1>
    <ul class="song-list">
        <li class="song" title="Song Title 1">Song 1 - Artist 1</li>
        <li class="song" title="Song Title 2">Song 2 - Artist 2</li>
        <li class="song" title="Song Title 3">Song 3 - Artist 1</li>
        <li class="song" title="Song Title 4">Song 4 - Artist 3</li>
    </ul>
</body>
</html>

Notre nœud racine est .
Nous avons comme notre nœud parent.
Nous avons en tant qu'enfant de .
Nous avons en tant qu'enfant de .
Nous avons en tant qu'enfant de .

Nous pouvons utiliser différents localisateurs XPath dans le document HTML ci-dessus. Par exemple, nous pouvons localiser des éléments par ID, nom, nom de classe, contient, textes, se termine par et commence par, parmi de nombreux autres localisateurs. Vous pouvez utiliser Selenium avec différents langages de programmation. Nous utiliserons Python pour démontrer.

Localiser par index

En supposant que nous voulions localiser la chanson numéro 3, nous pouvons avoir ce code ;

third_song = driver.find_element_by_xpath("//li[@class='song'][3]")
print("Third Song:", third_song.text)

Nous avons utilisé Relative XPath et commençons par le nœud 'li'. Lorsque Selenium localise la troisième chanson de notre liste, il imprimera son texte.

Localiser par attribut

Nous pouvons avoir un XPath qui recherche toutes les chansons de "Artiste 1" et imprime leurs titres. Notre code peut être le suivant ;

songs_by_artist1 = driver.find_elements_by_xpath("//li[contains(@class, 'song') and contains(text(), 'Artist 1')]")
print("Songs by Artist 1:")
for song in songs_by_artist1:
    print(song.text)

Localiser par texte

Ce localisateur vous aide à trouver des éléments avec un texte spécifique. Nous pouvons rechercher une chanson avec le texte "Song 4" et imprimer son texte. Nous pouvons représenter ce localisateur en utilisant ce code ;

song_with_text = driver.find_element_by_xpath("//li[contains(text(), 'Song 4')]")
print("Song with Text:", song_with_text.text)

XPath Axes

Les approches dont nous avons discuté jusqu'à présent fonctionnent parfaitement avec des pages Web simples. Cependant, il existe des cas où les méthodes de recherche d'éléments XPath comme par texte, ID, nom de classe et nom ne fonctionneront pas.

Les axes XPath sont utilisés pour le contenu dynamique où les localisateurs normaux ne fonctionnent pas. Ici, vous localisez des éléments en fonction de leur relation avec d'autres éléments. Voici quelques-uns des localisateurs d'axes XPath courants ;

Ancêtre

La méthode Ancestor Axis est parfaite pour traiter des documents XML avec des éléments hautement imbriqués. Vous pouvez sélectionner tous les éléments ancêtres comme les grands-parents et les parents du nœud actuel du plus proche au plus éloigné.

Nous pouvons avoir le code suivant ;

<bookstore>
  <book>
    <title>The Great Gatsby</title>
    <author>F. Scott Fitzgerald</author>
    <genre>Fiction</genre>
  </book>
  <book>
    <title>The Biggest Dilemma</title>
    <author>George Orwell</author>
    <genre>Dystopian</genre>
  </book>
</bookstore>

Si nous voulons sélectionner tous les ancêtres de l'élément 'title' pour le livre "The Biggest Dilemma", nous pouvons avoir cette méthode Ancestor Axis ;

//title[text() = '1984']/ancestor::*

Following

La méthode Axe suivant localise tous les nœuds après la balise de fermeture du nœud actuel. Cette méthode ne tient pas compte de la hiérarchie ou de l'emplacement de ses nœuds cibles. Par exemple, si vous avez un document XML ou une page Web avec plusieurs sections, vous pouvez identifier un élément qui apparaît après une section particulière sans parcourir toute l'arborescence.

Parent

La méthode Parent Axis dans XPath sélectionne le parent du nœud actuel. Vous pouvez utiliser le chemin suivant pour localiser le nœud parent ;

//tag[@attribute='value']/parent::tagName

Cette approche fonctionne lorsque les éléments enfants du nœud actuel ont des attributs uniques que vous pouvez facilement localiser et que vous souhaitez vérifier auprès du parent.

Enfant

La méthode Child Axis dans XPath sélectionne tous les enfants du nœud actuel. Il reste l'une des méthodes XPath Axis les plus populaires car il permet de sélectionner les nœuds enfants d'un élément particulier.

Considérez ce morceau de code;

<section id='text'>
    <p>Paragraph one</p>
    <p>Paragraph two</p>
    <p>Paragraph three</p>
    <p>Paragraph four</p>
</section>

Nous pouvons localiser tous les éléments 'p' dans notre code en utilisant cet axe ;

//section[@id='text']/child::p

FAQs

Pourquoi utiliser XPath au lieu des sélecteurs CSS ?

Les sélecteurs CSS ne peuvent trouver des éléments qu'en fonction de leur ID, de leur nom de balise et de leur classe. D'autre part, vous pouvez utiliser XPath pour localiser des éléments en fonction de leur emplacement, du contenu du texte et d'autres attributs dans la structure HTML. Vous pouvez également stocker des expressions XPath dans des variables et les réutiliser dans votre application.

Quelles langues XPath dans Selenium prend-il en charge ?

Vous pouvez utiliser XPath avec n'importe quel langage prenant en charge Selenium. Vous pouvez écrire vos scripts en JavaScript, Java, Python, Ruby, C# et PHP.

Quelles sont les alternatives de XPath ?

Vous pouvez utiliser les sélecteurs CSS, la reconnaissance d'image ou les localisateurs intégrés de Selenium comme alternative à XPath. Les sélecteurs CSS sont les plus courants ; vous pouvez rechercher des éléments en fonction de leur nom de balise, de leur ID ou de leur classe. La reconnaissance d'image vous permet de localiser des éléments en fonction de leurs images. Les localisateurs intégrés du Selenium sont conçus pour être faciles à utiliser.

Conclusion

Vous pouvez désormais définir XPath dans Selenium, différencier XPath absolu et relatif, et localiser des éléments à l'aide de différents localisateurs XPath. Le choix du localisateur dépendra de la nature du contenu et de vos objectifs finaux.

Consultez notre article sur Questions d'entretien sur le sélénium si vous voulez réussir votre prochaine entrevue.

Titus Kamunya

Auteur

Titus est ingénieur logiciel et rédacteur technique. Il développe des applications Web et écrit sur SaaS, React, HTML, CSS, JavaScript, Ruby et Ruby on Rails lire la suite
Narendra Mohan Mittal

Éditeur

Narendra Mohan Mittal est stratège principal en stratégie de marque numérique et éditeur de contenu avec plus de 12 ans d'expérience polyvalente. Il est titulaire d'un M-Tech (médaillé d'or) et d'un B-Tech (médaillé d'or) en informatique et ingénierie.

... lire la suite