In Carrière | Dernière mise à jourated: le 28 août 2023

Logiciel Jira est l'outil de gestion de projet n°1 utilisé par les équipes agiles pour planifier, suivre, publier et prendre en charge d'excellents logiciels.

Maîtriser XPath dans Selenium : comment localiserate Éléments

By Titus Kamunya et édité par Narendra Mohan Mittal

Maîtriser XPath dans Selenium Comment localiserate É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 localiserate et 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 comporte 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 illustreraate comment XPath dans Selenium.

Qu'est-ce que 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 extract et manipulerate revendre.

Pourquoi utiliser XPath ?

C'est flexible: Contrairement aux sélecteurs CSS qui ne peuvent localiserate éléments utilisant le nom de la balise, l'ID ou la classe, XPath vous permet de localiserate éléments utilisant d’autres attributs.
Hommesable: 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.

Syntaxe de base de 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.

XPath absolu contre XPath relatif

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 localiserate l'élément avec le contenu "Bienvenue dans 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 localiserate éléments 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 localiserate notre H1 qui dit "Bienvenue à 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 Éléments utilisant XPath dans Selenium

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

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 localiserate é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émontrerate.

Locate par indice

En supposant que nous voulons localiserate 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 le sélénium est localiséates le third chanson de notre liste, il imprimera son texte.

Locate 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)

Locate 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)

Axes XPath

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 localisezate éléments en fonction de leur relation avec d’autres éléments. Voici quelques-uns des localisateurs XPath Axes 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 de l'axe suivant locateTous les nœuds affichent la balise de fermeture du nœud actuel. Cette méthode ne prend pas en compte la hiérarchie ou l'emplacement de ses nœuds cibles. Par exemple, si vous disposez d'un document XML ou d'une page Web comportant 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 localiserate 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.ate, et 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 localiserate tous les éléments « p » de notre code utilisant cet axe ;

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

Questions fréquentes

Pourquoi utiliser XPath au lieu des sélecteurs CSS ?

Les sélecteurs CSS ne peuvent trouver des éléments qu'en fonction de leur identifiant, du nom de la balise et de la classe. D'un autre côté, vous pouvez utiliser XPath pour localiserate é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'images 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 identifiant ou de leur classe. La reconnaissance d'images vous permet de localiserate éléments basés sur leurs images. Les localisateurs intégrés du Selenium sont conçus pour être faciles à utiliser.

Conclusion

Vous pouvez maintenant définir XPath dans Selenium, différemmentate entre XPath absolu et relatif, et locate éléments utilisant 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.