/
XPaths - Meilleures pratiques

XPaths - Meilleures pratiques

Owned by Mélissa Henriquez
2023-10-13 09:45

ChroPath : obtenir les chemins xpath, xpath absolus et CSS. Modifier, inspecter et vérifier les sélecteurs XPath et CSS dans le panneau devtools lui-même.
XPath Helper : makes it easy to extract, edit, and evaluate XPath queries on any webpage.
FirePath : Extension Firebug qui ajoute un outil de développement pour éditer, inspecter et générer des XPath, CSS et JQuery. N'est pas compatible avec la version Quantum de Firefox
www.freeformatter.com : Permet de tester des XPath par rapport à un fichier XML.


I. Définition : Une expression xpath est un chemin de localistaion constituée de pas de localisation.
II. Bonnes pratiques et celles à éviter

Bonnes Pratiques

Pratiques À ÉVITER

Notes

  • Écrire toujours son xpath
  • Utiliser un xpath relatif. C'est un xpath qui fait sa recherche à partir du milieu de la structure DOM HTML. Il commence par la double barre oblique (//), ce qui signifie qu'il peut rechercher l'élément n'importe où sur la page Web.
  • Utiliser plusieurs propriétés ou attribues pour être sûr de trouver l'élément souhaité|* Éviter l'utilisation des xpaths trouvés avec Firepath/ChroPath
  • Éviter d'utiliser les xpaths en faisant: Clique droit sur l'élément > Inspecter > Clique droit > Copier > Copier Xpath.
  • Xpath absolu ou xpath dynamique : utilise le chemin complet de l'élément c'est-à-dire de la racine à l'élément désiré.
    • (Exemple: */html/body/div\[3\]/div\[2\]/div\[2\]/div/div\[2\]/div\[3\]/div/div\[1\]/div\[2\]/a{*})
  • Avec ces xpaths, dès qu'un niveau est ajouté ils ne fonctionneraient plus. Exemple: //html//div\[4\]/div\[1\]/span\[2\]/button\[1\]. Ce xpath = trouve le premier bouton du deuxième span de la première div se trouvant dans la quatrième div de la page html.
  • Pourquoi utiliser le xpath relatif et non le xpath absolu? Avec le xpath absolu, le test échouera dès qu'un changement est fait dans le chemin de l'élément tandis que le xpath relatif peut rechercher l'élément n'importe où sur la page web.



III. Où puis-je écrire un xpath

  1. Ouvrer l'application avec chrome
  2. Cliquer sur F12
  3. Faire Crtl + F pour avoir le champ "Find by string, selector, or XPath"
  4. Utiliser le bouton d'inspection afin de connaitre les attribues et autres informations sur l'élément à inspecter 
  5. Écrire votre xpath dans le champ "Find by string, selector, or XPath"

IV. Écriture des xpaths

ÉLÉMENT à Trouver 

XPATH Conçu

Xpath de chropath (À éviter)

NOTES

Bouton: "Menu"

Preview unavailable

//*[@class='dl-trigger js-dl-trigger hidden-md hidden-lg']//*[text()='Menu']

//button[@class='dl-trigger js-dl-trigger hidden-md hidden-lg']

SiteWeb: https://www.dollarama.com/en-CA/



Champ "Username" en utilisant multiple propriétés (and)

//input[@type='email' and @id='username']

//input[@id='username']

SiteWeb: https://www.dollarama.com/en-CA/

Ici: Nous avons utilisé deux attributs: type et id

Champ "Username" en utilisant multiple propriétés (or)

//*[@type='email' or @id='username']





Bouton Sign in en utilisant la fonction text()

//button[@type='submit' and text()='Sign in ']

//button[@data-qa='login-submit']

SiteWeb: https://www.dollarama.com/en-CA/

Ici: Nous avons utilisé l'attribut (type) et la fonction "text()"

Trouver le bouton "Sign in" en utilisant "contains"

//button[@type='submit'][contains(text(),'Sign ')]

ou //button[@type='submit'][contains(text(),'Sign in ')]



Avec contains, vous pouvez utiliser une partie du texte ou la totalité

Bouton "Add case to cart" en utilisant parent::

Preview unavailable

//button[div[text()='Add case' and 'to cart']]

//html//div[2]/div[1]/span[2]/button[1]

SiteWeb: hhttps://www.dollarama.com/en-CA/

Avec le xpath conçu en utilisant Immediate parent : [], on est certain que c'est le bouton "Add case to cart'.

lien " Favorites "

Preview unavailable

//a[@href='/en-CA/my-account/favourites']



SiteWeb: https://www.dollarama.com/en-CA/

Ici: Nous avons utilisé le lien

Cocher un bouton radio

//input[@type='radio'  and @name='PaymentMethod'

and @data-oc-change='selectCreditCardPaymentMethod']



SiteWeb: https://www.dollarama.com/en-CA/ > Signed in > Catering, Restaurants & Hotels > Add case to cart > Cart > Checkout now. Sur cette page il y a six(06) boutons radio d'ou l'utilisation des trois attribues pour trouver le bouton voulu.

Ici, nous avons utilisé trois attributs(type, name et "data-oc-change") pour trouver le bouton radio payer par carte de crédit car il y a six (06) boutons radios sur la page

Cocher un "checkbox" en utilisant "ancestor::"

Preview unavailable

//*[input[@value='1.00$ to 1.50$' and @name='UnitPriceRefinerText[]']]/ancestor::div[@class='checkbox']





Trouver un élément en utilisant "preceding-sibling::"

Preview unavailable

//a[contains(text(),'compagnie1')]//parent::td[@class='datalistrow']

//preceding-sibling::td[@class='datalistrow']

//*[@id="vCompaniesForm"]/table/tbody/tr[5]/td[1]/input

Utiliser cette methode (xpath conçu) pour être certain que vous selectionnez le bon élément pour supprimer ou éditer.

Note: Avec le xpath (À éviter), vous n'êtes pas sûr de supprimer la compagnie "compagnie1" mais la première compagnie de la liste.

Trouver un élément en utilisant "following-sibling::"

Preview unavailable

//a[contains(text(),'compagnie1')]//parent::td[@class='datalistrow']

//following-sibling::td//span[text()='123-123-1234']

//*[@id="vCompaniesForm"]/table/tbody/tr[5]/td[3]/span



utiliser "descendant::"

Preview unavailable

//div[@class='row']/descendant::input



Ce xpath ressortira tous les champs input dont le parent est "div[@class='row']

Trouver item précis avec son prix et son nom

Preview unavailable

//*[div[text()='Add case' and 'to cart ']]//parent::span//preceding-sibling::div[div/span[text()='$240.00']]//preceding-sibling::div//*[@title='Large Print Coated Playing Cards']

/html/body/div[3]/div[2]/div[2]/div/div[2]/div[29]/div/div[1]/div[2]/a



Trouver le premier item "Add case to cart"

(//button[div[text()='Add case' and 'to cart']])[1]

//button[@class='btn btn-primary text-uppercase']



Trouver le dernier élément avec la fonction last()

(//button[div[text()='Add case' and 'to cart']])[last()]

//html//div[34]/div[1]/span[2]/button[1]



Trouver l'avant-dernier élément avec la fonction last()-1

(//button[div[text()='Add case' and 'to cart']])[last()-1]

//html//div[33]/div[1]/span[2]/button[1]



Trouver le nombre de boutons "Add case to cart" avec la fonction count()

count(//button[div[text()='Add case' and 'to cart']])



Utilisez ChroPath pour voir le résultat en entrant le xpath dans le champ "QUERY"

Preview unavailable

Trouver le dernier élément avec la fonction position()

//div[position()='10']



ce xpath pointera le dixième élement

Preview unavailable

©️2023 Alithya GoTest - Tous Droits Réservés
Besoin d'aide? Vous avez une suggestion?