XPath dans Selenium: Didacticiel

Qu'est-ce que XPath dans Selenium?

XPath dans Selenium est un chemin XML utilisé pour la navigation dans la structure HTML de la page. Il s'agit d'une syntaxe ou d'un langage permettant de rechercher n'importe quel élément sur une page Web à l'aide d'une expression de chemin XML. XPath peut être utilisé pour les documents HTML et XML pour trouver l'emplacement de n'importe quel élément sur une page Web à l'aide de la structure HTML DOM.

In Selenium En cas d'automatisation, si les éléments ne sont pas trouvés par les localisateurs généraux tels que id, class, name, etc., XPath est utilisé pour trouver un élément sur la page Web.

Dans ce didacticiel, nous découvrirons XPath et différentes expressions XPath pour trouver les éléments complexes ou dynamiques, dont les attributs changent dynamiquement lors de l'actualisation ou de toute opération.

Syntaxe XPath

XPath contient le chemin de l'élément situé sur la page Web. La syntaxe XPath standard pour créer XPath est la suivante.

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

Le format de base de XPath en sélénium est expliqué ci-dessous avec une capture d'écran.

• // : Sélectionnez le nœud actuel.
• Nom de l'étiquette : Nom de variable du nœud particulier.
• @: Sélectionnez l'attribut.
• Attribut: Nom d'attribut du nœud.
• Valeur Relative (RV): Valeur de l'attribut.

Pour trouver l'élément avec précision sur les pages Web, il existe différents types de localisateurs :

Localisateurs XPath	Trouver différents éléments sur la page Web
ID	Pour rechercher l'élément par ID de l'élément
Nom du cours	Pour rechercher l'élément par nom de classe de l'élément
Nom	Pour rechercher l'élément par le nom de l'élément
Texte de lien	Pour trouver l'élément par texte du lien
XPath	XPath requis pour trouver l'élément dynamique et parcourir entre les différents éléments de la page Web
Chemin CSS	Le chemin CSS localise également les éléments sans nom, classe ou ID.

Types de chemin X

Il existe deux types de XPath :

1) XPath absolu

2) XPath relatif

XPath absolu

C'est le moyen direct de trouver l'élément, mais l'inconvénient du XPath absolu est que si des modifications sont apportées au chemin de l'élément, ce XPath échoue.

La principale caractéristique de XPath est qu'il commence par une seule barre oblique (/), ce qui signifie que vous pouvez sélectionner l'élément à partir du nœud racine.

Vous trouverez ci-dessous l'exemple d'une expression XPath absolue de l'élément affiché dans l'écran ci-dessous.

REMARQUE : Vous pouvez pratiquer l'exercice XPath suivant sur ce https://demo.guru99.com/test/selenium-xpath.html

Cliquez à nouveau ici si la vidéo n'est pas accessible

XPath absolu :

/html/body/div[2]/div[1]/div/h4[1]/b/html[1]/body[1]/div[2]/div[1]/div[1]/h4[1]/b[1]

Xpath relatif

Xpath relatif commence au milieu de la structure HTML DOM. Il commence par une double barre oblique (//). Il peut rechercher des éléments n'importe où sur la page Web, ce qui signifie qu'il n'est pas nécessaire d'écrire un long XPath et que vous pouvez commencer au milieu de la structure HTML DOM. Le Xpath relatif est toujours préféré car il ne s’agit pas d’un chemin complet à partir de l’élément racine.

Vous trouverez ci-dessous l'exemple d'une expression XPath relative du même élément affiché dans l'écran ci-dessous. Il s'agit du format commun utilisé pour rechercher un élément par XPath.

Cliquez à nouveau ici si la vidéo n'est pas accessible

Relative XPath: //div[@class='featured-box cloumnsize1']//h4[1]//b[1]

Que sont les axes XPath ?

Les axes XPath recherchent différents nœuds dans un document XML à partir du nœud de contexte actuel. Ils permettent de trouver des éléments dynamiques, ce qui est impossible avec une méthode XPath classique, sans ID, nom de classe, nom, etc. Selenium inclut plusieurs méthodes telles que Contient, ET, XPath absolu et XPath relatif pour identifier et localiser des éléments dynamiques en fonction de divers attributs et conditions.

Les méthodes Axes sont utilisées pour rechercher les éléments qui changent dynamiquement lors de l'actualisation ou de toute autre opération. Il existe peu de méthodes d'axes couramment utilisées dans Selenium Pilote Web comme enfant, parent, ancêtre, frère ou sœur, précédent, soi, etc.

Comment écrire du XPath dynamique dans Selenium pilote web

1) XPath de base

L'expression XPath sélectionne les nœuds ou la liste de nœuds sur la base d'attributs tels que ID, nom, nom de classe, etc. à partir du document XML comme illustré ci-dessous.

Xpath=//input[@name='uid']

Voici un lien pour accéder à la page https://demo.guru99.com/test/selenium-xpath.html

Quelques expressions XPath plus basiques :

Xpath=//input[@type='text']
Xpath=//label[@id='message23']
Xpath=//input[@value='RESET']
Xpath=//*[@class='barone']
Xpath=//a[@href='https://demo.guru99.com/']
Xpath=//img[@src='//guru99.com/images/home/java.png']

2) Contient()

Contains() est une méthode utilisée dans l'expression XPath. Il est utilisé lorsque la valeur d'un attribut change de manière dynamique, par exemple les informations de connexion.

La fonctionnalité Contenir a la capacité de trouver l'élément avec un texte partiel, comme indiqué dans l'exemple XPath ci-dessous.

Dans cet exemple, nous avons essayé d'identifier l'élément en utilisant simplement la valeur textuelle partielle de l'attribut. Dans l'expression XPath ci-dessous, la valeur partielle « sub » est utilisée à la place du bouton de soumission. On peut constater que l'élément est trouvé avec succès.

La valeur complète de « Type » est « soumettre », mais en utilisant uniquement la valeur partielle « sous ».

Xpath=//*[contains(@type,'sub')]

La valeur complète de « nom » est « btnLogin », mais en utilisant uniquement la valeur partielle « btn ».

Xpath=//*[contains(@name,'btn')]

Dans l'expression ci-dessus, nous avons pris le « nom » comme attribut et « btn » comme valeur partielle, comme indiqué dans la capture d'écran ci-dessous. Cela trouvera 2 éléments (LOGIN & RESET) car leur attribut 'name' commence par 'btn'.

De même, dans l'expression ci-dessous, nous avons pris « id » comme attribut et « message » comme valeur partielle. Cela trouvera 2 éléments (« L'ID utilisateur ne doit pas être vide » et « Le mot de passe ne doit pas être vide ») car son attribut « id » commence par « message ».

Xpath=//*[contains(@id,'message')]

Dans l'expression ci-dessous, nous avons pris le « texte » du lien comme attribut et « ici » comme valeur partielle, comme indiqué dans la capture d'écran ci-dessous. Cela trouvera le lien (« ici ») car il affichera le texte « ici ».

Xpath=//*[contains(text(),'here')]
Xpath=//*[contains(@href,'guru99.com')]

3) Utiliser OU & ​​ET

Dans l'expression OR, deux conditions sont utilisées, que la 1ère condition OU la 2ème condition soit vraie. Cela s’applique également si une condition est vraie ou peut-être les deux. Signifie que n’importe quelle condition doit être vraie pour trouver l’élément.

Dans l'expression XPath ci-dessous, il identifie les éléments dont une ou les deux conditions sont vraies.

Xpath=//*[@type='submit' or @name='btnReset']

Mise en évidence des deux éléments : l’élément « LOGIN » ayant l’attribut « type » et l’élément « RESET » ayant l’attribut « name ».

Dans l'expression AND, deux conditions sont utilisées, les deux conditions doivent être vraies pour trouver l'élément. Il ne parvient pas à trouver un élément si une condition est fausse.

Xpath=//input[@type='submit' and @name='btnLogin']

Dans l'expression ci-dessous, mettez en surbrillance l'élément « LOGIN » car il possède à la fois les attributs « type » et « nom ».

4) XPath commence par

XPath commence par() est une fonction utilisée pour rechercher l'élément Web dont la valeur d'attribut est modifiée lors de l'actualisation ou par d'autres opérations dynamiques sur la page Web. Dans cette méthode, le texte de départ de l'attribut est mis en correspondance pour trouver l'élément dont la valeur d'attribut change dynamiquement. Vous pouvez également rechercher des éléments dont la valeur d'attribut est statique (et non modifiée).

Par exemple - : Supposons que l'ID d'un élément particulier change dynamiquement comme :

Id=”message12″

Id=”message345″

Id=”message8769″

et ainsi de suite... mais le texte initial est le même. Dans ce cas, nous utilisons l'expression Start-with.

Dans l'expression ci-dessous, il y a deux éléments avec un identifiant commençant par « message » (c'est-à-dire « L'ID utilisateur ne doit pas être vide » et « Le mot de passe ne doit pas être vide »). Dans l'exemple ci-dessous, XPath trouve les éléments dont « ID » commence par « message ».

Xpath=//label[starts-with(@id,'message')]

5) Fonction XPath Text()

Le Fonction XPath text() est une fonction intégrée de Selenium Webdriver qui est utilisée pour localiser des éléments en fonction du texte d'un élément Web. Il aide à trouver les éléments de texte exacts et à localiser les éléments dans l'ensemble de nœuds de texte. Les éléments à localiser doivent être sous forme de chaîne.

Dans cette expression, avec la fonction texte, nous trouvons l'élément avec une correspondance exacte du texte, comme indiqué ci-dessous. Dans notre cas, nous trouvons l'élément avec le texte « UserID ».

Xpath=//td[text()='UserID']

Méthodes des axes XPath

Ces méthodes d'axes XPath sont utilisées pour rechercher les éléments complexes ou dynamiques. Ci-dessous, nous verrons certaines de ces méthodes.

Pour illustrer ces axes XPath, nous utiliserons… GuruSite de démonstration de 99 Bank.

1) Suite

Sélectionne tous les éléments du document du nœud actuel ( ) [la zone de saisie UserID est le nœud actuel] comme indiqué dans l'écran ci-dessous.

Xpath=//*[@type='text']//following::input

Il y a 3 nœuds « d'entrée » correspondant en utilisant l'axe « suivant » : mot de passe, connexion et bouton de réinitialisation. Si vous souhaitez vous concentrer sur un élément particulier, vous pouvez utiliser la méthode XPath ci-dessous :

Xpath=//*[@type='text']//following::input[1]

Vous pouvez modifier le XPath selon les besoins en mettant [1],[2]…………et ainsi de suite.

Avec l'entrée « 1 », la capture d'écran ci-dessous trouve le nœud particulier qui est l'élément de la zone de saisie « Mot de passe ».

2) Ancêtre

L'axe des ancêtres sélectionne tous les éléments ancêtres (grands-parents, parents, etc.) du nœud actuel, comme indiqué dans l'écran ci-dessous.

Dans l'expression ci-dessous, nous trouvons l'élément ancêtres du nœud actuel (nœud « ENTERPRISE TESTING »).

Xpath=//*[text()='Enterprise Testing']//ancestor::div

Il y a 13 nœuds « div » correspondant en utilisant l'axe « ancêtre ». Si vous souhaitez vous concentrer sur un élément particulier, vous pouvez utiliser le XPath ci-dessous, où vous modifiez le numéro 1, 2 selon vos besoins :

Xpath=//*[text()='Enterprise Testing']//ancestor::div[1]

Vous pouvez modifier le XPath selon les besoins en mettant [1], [2]…………et ainsi de suite.

3) Enfant

Sélectionne tous les éléments enfants du nœud actuel (Java) comme indiqué dans l’écran ci-dessous.

Xpath=//*[@id='java_technologies']//child::li

Il y a 71 nœuds « li » correspondant en utilisant l'axe « enfant ». Si vous souhaitez vous concentrer sur un élément particulier, vous pouvez utiliser le XPath ci-dessous :

Xpath=//*[@id='java_technologies']//child::li[1]

Vous pouvez modifier le XPath selon les besoins en mettant [1],[2]…………et ainsi de suite.

4) Précédent

Sélectionnez tous les nœuds qui précèdent le nœud actuel, comme indiqué dans l'écran ci-dessous.

Dans l'expression ci-dessous, il identifie tous les éléments d'entrée avant le bouton « CONNEXION » qui est Identifiant d'utilisateur et élément d'entrée.

Xpath=//*[@type='submit']//preceding::input

Il y a 2 nœuds « d'entrée » correspondant en utilisant l'axe « précédent ». Si vous souhaitez vous concentrer sur un élément particulier, vous pouvez utiliser le XPath ci-dessous :

Xpath=//*[@type='submit']//preceding::input[1]

Vous pouvez modifier le XPath selon les besoins en mettant [1],[2]…………et ainsi de suite.

5) Frère ou sœur suivant

Sélectionnez les frères et sœurs suivants du nœud contextuel. Les frères et sœurs sont au même niveau du nœud actuel, comme indiqué dans l'écran ci-dessous. Il trouvera l'élément après le nœud actuel.

xpath=//*[@type='submit']//following-sibling::input

Un nœud d'entrée correspondant en utilisant l'axe « frère suivant ».

6) Parents

Sélectionne le parent du nœud actuel comme indiqué dans l'écran ci-dessous.

Xpath=//*[@id='rt-feature']//parent::div

Il y a 65 nœuds « div » correspondant en utilisant l'axe « parent ». Si vous souhaitez vous concentrer sur un élément particulier, vous pouvez utiliser le XPath ci-dessous :

Xpath=//*[@id='rt-feature']//parent::div[1]

Vous pouvez modifier le XPath selon les besoins en mettant [1],[2]…………et ainsi de suite.

7) Soi

Sélectionne le nœud actuel ou « soi » signifie qu'il indique le nœud lui-même comme indiqué dans l'écran ci-dessous.

Un nœud correspondant en utilisant l'axe « auto ». Il ne trouve toujours qu'un seul nœud car il représente l'élément propre.

Xpath =//*[@type='password']//self::input

8) Descendant

Sélectionne les descendants du nœud actuel comme indiqué dans l'écran ci-dessous.

Dans l'expression ci-dessous, il identifie tous les éléments descendants de l'élément actuel (élément de cadre 'Main body surround'), ce qui signifie en bas sous le nœud (nœud enfant, nœud petit-enfant, etc.).

Xpath=//*[@id='rt-feature']//descendant::a

Il y a 12 nœuds « lien » correspondant en utilisant l'axe « descendant ». Si vous souhaitez vous concentrer sur un élément particulier, vous pouvez utiliser le XPath ci-dessous :

Xpath=//*[@id='rt-feature']//descendant::a[1]

Vous pouvez modifier le XPath selon les besoins en mettant [1],[2]…………et ainsi de suite.

FAQ

Résumé

Vérifiez également: - Selenium Tutoriel pour débutants : Apprenez WebDriver en 7 jours