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

par


Le Rôle Essentiel des Ingénieurs de Test

Au cœur du cycle de développement logiciel, les ingénieurs de test jouent un rôle crucial. Leur mission première est de garantir que les applications livrées par une équipe soient exemptes d’erreurs et parfaitement fonctionnelles. Ces professionnels soumettent les logiciels à une série de tests rigoureux avant leur mise en production ou leur diffusion auprès des utilisateurs finaux.

Un testeur efficace doit posséder des compétences pointues, notamment la capacité à localiser et interagir avec les éléments d’une page web. Dans ce domaine, Selenium s’impose comme un outil d’automatisation de test incontournable pour les équipes de développement modernes. Cet outil se compose de quatre éléments principaux : Selenium Grid, Selenium WebDriver, Selenium IDE et Selenium RC.

Cet article explorera plus en détail Selenium WebDriver et son utilisation conjointe avec XPath. Nous définirons XPath, examinerons sa syntaxe de base et verrons comment l’utiliser concrètement au sein de Selenium.

Qu’est-ce que XPath ?

XPath, acronyme de XML Path Language, est un langage de requête conçu pour sélectionner et parcourir les éléments et attributs présents dans un document XML. Il permet de définir des expressions de chemin, offrant ainsi un moyen précis de cibler des sections spécifiques d’un document XML et d’en extraire les informations désirées.

La syntaxe de XPath, qui rappelle les chemins d’accès de systèmes de fichiers, est enrichie de fonctions et de symboles. Ceux-ci facilitent la sélection d’éléments en fonction de leurs attributs et de leur hiérarchie. XPath s’intègre parfaitement avec des technologies telles que XML, HTML et XSLT, permettant l’extraction et la manipulation de données de manière flexible.

Pourquoi Utiliser XPath ?

  • Flexibilité : Contrairement aux sélecteurs CSS qui se limitent aux noms de balises, ID ou classes, XPath permet de localiser des éléments en s’appuyant sur divers attributs.
  • Réutilisabilité : Les expressions XPath peuvent être stockées dans des variables et réutilisées à plusieurs reprises dans le code.
  • Précision : XPath offre une méthode standardisée pour cibler des éléments spécifiques dans un document web.

Syntaxe de Base de XPath

XPath permet de localiser n’importe quel élément sur une page web via le DOM (Document Object Model). Avant de détailler la syntaxe, il est essentiel de comprendre les expressions XPath suivantes :

Expression Description
nodename/tagname Sélectionne tous les nœuds ou balises dont le nom correspond.
/ Sélectionne à partir du nœud racine.
// Sélectionne les nœuds du document courant à partir du nœud actuel qui correspondent à 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 d’une expression XPath est la suivante :

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

Cette syntaxe débute par une double barre oblique (//), qui indique que la recherche doit démarrer à partir du nœud actuel, lequel est défini par le nom de la balise ou du nœud.

XPath Absolu vs XPath Relatif

Il existe deux manières de définir un chemin XPath : de manière absolue ou relative :

XPath Absolu

L’XPath absolu représente un chemin direct depuis la racine du document jusqu’à l’élément ciblé. Il commence toujours par le nœud racine et se termine par le nœud de destination.

Prenons l’exemple d’un document HTML simple :

<html>
    <head>
        <title>toptips.fr</title>
    </head>
    <body>
        <div>
            <h1>Bienvenue sur toptips.fr</h1>
        </div>
    </body>
</html>

Pour localiser l’élément contenant le texte « Bienvenue sur toptips.fr », le chemin XPath absolu serait :

/html/body/div/h1

Dans cet exemple, on a :

  • /html qui correspond au nœud racine.
  • /html/body où body est le nœud parent de la racine.
  • /html/body/div où div est l’enfant du noeud body.
  • /html/body/div/h1 où h1 est l’enfant du noeud div.

L’XPath absolu suit donc une arborescence complète, du nœud racine jusqu’à l’élément ciblé.

Quand Utiliser un XPath Absolu ?

L’XPath absolu est idéal lorsque vous devez cibler un élément très spécifique, notamment quand plusieurs éléments avec des attributs similaires existent sur la page. Cela garantit de ne pas se tromper de cible. Cependant, il est très sensible aux modifications de la structure HTML, une simple altération pouvant le rendre inutilisable.

XPath Relatif

À l’opposé, l’XPath relatif débute depuis n’importe quel nœud et se termine au nœud visé. Il n’est pas affecté par les modifications de la structure du document, ce qui le rend généralement plus adapté. Avec un XPath relatif, vous pouvez localiser des éléments depuis n’importe quelle partie du document. Une expression XPath relative commence par une double barre oblique //.

En utilisant le même document HTML, notre XPath relatif pour localiser l’élément h1 « Bienvenue sur toptips.fr » serait :

<html>
    <head>
        <title>toptips.fr</title>
    </head>
    <body>
        <div>
            <h1>Bienvenue sur toptips.fr</h1>
        </div>
    </body>
</html>

Notre XPath relatif pour cibler l’élément h1 sera :

//body/div/h1

Quand Utiliser un XPath Relatif ?

L’XPath relatif est la meilleure option lorsque vous cherchez un équilibre entre flexibilité et spécificité. Il est plus résilient aux changements du document HTML, car il s’intéresse à la relation entre les éléments plutôt qu’à un chemin absolu.

Localiser des Éléments avec XPath dans Selenium

Selenium est un outil open source largement utilisé pour l’automatisation des navigateurs web. Il fournit une panoplie de bibliothèques et d’outils qui permettent aux testeurs d’interagir avec les éléments web de manière automatisée et systématique.

Imaginons une page web contenant une liste de chansons :

<html>
<head>
    <title>Bibliothèque de Chansons</title>
</head>
<body>
    <h1>Bibliothèque de Chansons</h1>
    <ul class="song-list">
        <li class="song" title="Titre Chanson 1">Chanson 1 - Artiste 1</li>
        <li class="song" title="Titre Chanson 2">Chanson 2 - Artiste 2</li>
        <li class="song" title="Titre Chanson 3">Chanson 3 - Artiste 1</li>
        <li class="song" title="Titre Chanson 4">Chanson 4 - Artiste 3</li>
    </ul>
</body>
</html>
  • <html> est le nœud racine.
  • <body> est le noeud parent.
  • <h1> est un enfant de <body>.
  • <ul> est un enfant de <body>.
  • <li> est un enfant de <ul>.

Nous pouvons utiliser divers localisateurs XPath pour ce document HTML. Nous pouvons localiser des éléments par ID, nom, nom de classe, en vérifiant s’ils contiennent un texte donné, s’ils se terminent ou commencent par une certaine chaîne de caractères, etc. Selenium s’intègre avec plusieurs langages de programmation ; pour nos exemples, nous utiliserons Python.

Localisation par Index

Si nous voulons extraire la chanson numéro 3, nous pouvons utiliser le code suivant :

third_song = driver.find_element_by_xpath("//li[@class='song'][3]")
print("Troisième Chanson:", third_song.text)

Nous avons utilisé un XPath relatif commençant au noeud <li>. Lorsque Selenium localise la troisième chanson de notre liste, il affichera son texte.

Localisation par Attribut

Nous pouvons également créer un XPath qui recherche toutes les chansons de l’artiste 1 et affiche leurs titres :

songs_by_artist1 = driver.find_elements_by_xpath("//li[contains(@class, 'song') and contains(text(), 'Artiste 1')]")
print("Chansons de l'Artiste 1:")
for song in songs_by_artist1:
    print(song.text)

Localisation par Texte

Ce localisateur permet de trouver des éléments contenant un texte spécifique. Pour rechercher la chanson qui contient « Chanson 4 », nous pouvons utiliser :

song_with_text = driver.find_element_by_xpath("//li[contains(text(), 'Chanson 4')]")
print("Chanson avec le Texte:", song_with_text.text)

Axes XPath

Les méthodes décrites ci-dessus fonctionnent bien pour les pages web simples. Cependant, dans certaines situations, comme sur des pages dynamiques, les localisateurs par texte, ID, nom de classe, ou nom peuvent s’avérer inefficaces.

Les axes XPath permettent de localiser des éléments en fonction de leur relation avec d’autres éléments. Voici quelques axes XPath couramment utilisés :

Ancêtre

L’axe « ancestor » est parfait pour les documents XML avec des éléments très imbriqués. Il permet de sélectionner tous les éléments ancêtres (grands-parents, parents, etc.) d’un nœud donné, du plus proche au plus éloigné.

Prenons l’exemple du code suivant :

<bookstore>
  <book>
    <title>The Great Gatsby</title>
    <author>F. Scott Fitzgerald</author>
    <genre>Fiction</genre>
  </book>
  <book>
    <title>Le Plus Grand Dilemme</title>
    <author>George Orwell</author>
    <genre>Dystopique</genre>
  </book>
</bookstore>

Pour sélectionner tous les ancêtres de l’élément ‘title’ pour le livre « Le Plus Grand Dilemme », on peut utiliser :

//title[text() = 'Le Plus Grand Dilemme']/ancestor::*

Suivant

L’axe « following » permet de localiser tous les nœuds qui suivent la balise de fermeture du nœud actuel. Cette méthode ne tient pas compte de la hiérarchie. Par exemple, dans un document XML ou une page web avec plusieurs sections, vous pouvez cibler un élément qui apparaît après une section particulière sans parcourir toute l’arborescence.

Parent

L’axe « parent » sélectionne le parent direct du nœud actuel. On peut l’utiliser ainsi :

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

Cette approche est pratique lorsque vous souhaitez vérifier un attribut particulier du parent d’un élément que vous avez déjà pu identifier.

Enfant

L’axe « child » permet de sélectionner tous les enfants d’un nœud donné. C’est l’une des méthodes les plus utilisées, car elle permet de cibler les nœuds enfants d’un élément spécifique.

Exemple de code :

<section id='texte'>
    <p>Paragraphe un</p>
    <p>Paragraphe deux</p>
    <p>Paragraphe trois</p>
    <p>Paragraphe quatre</p>
</section>

Nous pouvons localiser tous les éléments <p> dans ce code en utilisant :

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

FAQ

Pourquoi utiliser XPath plutôt que les sélecteurs CSS ?

Les sélecteurs CSS sont limités aux ID, noms de balises et classes. XPath, en revanche, offre une plus grande flexibilité en permettant la localisation par emplacement, contenu du texte, et autres attributs dans la structure HTML. De plus, vous pouvez stocker vos expressions XPath dans des variables et les réutiliser.

Quels sont les langages supportés par XPath dans Selenium ?

XPath est compatible avec tous les langages supportant Selenium, tels que JavaScript, Java, Python, Ruby, C# et PHP.

Quelles sont les alternatives à XPath ?

Il existe d’autres options, comme les sélecteurs CSS, la reconnaissance d’image ou les localisateurs intégrés de Selenium. Les sélecteurs CSS sont les plus courants, tandis que la reconnaissance d’image permet de localiser les éléments à partir de leurs images. Les localisateurs intégrés de Selenium sont, quant à eux, conçus pour une utilisation facilitée.

Conclusion

Vous savez maintenant ce qu’est XPath dans Selenium, comment différencier les XPath absolus et relatifs, et comment localiser des éléments avec différents localisateurs XPath. Le choix du localisateur dépendra du contenu et de vos objectifs.

N’hésitez pas à consulter notre article sur les questions d’entretien Selenium si vous souhaitez vous préparer au mieux à votre prochain entretien.



Tweetez
Partagez
Épingle
Partagez
Partagez
0 Partages