web-dev-qa-db-fra.com

Comment vérifier une expression XPath dans l'outil Chrome Developers ou Firebug de Firefox?

Comment puis-je vérifier mon XPath?

J'utilise l'outil Chrome Developers pour inspecter les éléments et former mon XPath. Je le vérifie à l'aide du plugin Chrome XPath Checker, mais il ne me donne pas toujours le résultat. Quel est le meilleur moyen de vérifier mon XPath?.

J'ai également essayé d'utiliser Firebug pour inspecter le bogue et d'utiliser FirePath pour vérifier. Mais Firepath vérifie-t-il également le XPath.

Ma dernière option serait d’utiliser le Selenium WebDriver pour confirmer mon XPath. 

google-chromefirefoxseleniumxpathselenium-webdriver
146
user3448242

Chrome

Ceci peut être réalisé par trois approches différentes (voir l'article de mon blog ici pour plus de détails):

  • Recherchez dans le panneau Elements comme ci-dessous
  • Exécutez $x() et $$() dans le panneau Console, comme indiqué dans le message answer de Lawrence
  • Les extensions de tiers (pas vraiment nécessaires dans la plupart des cas, pourraient être excessives)

Voici comment vous recherchez XPath dans le panneau Elements:

  1. Presse F12 ouvrir l'outil de développement Chrome
  2. Dans le panneau "Eléments", appuyez sur Ctrl+F
  3. Dans la zone de recherche, tapez XPath ou CSS Selector. Si des éléments sont trouvés, ils seront surlignés en jaune.

enter image description here

Firefox

  1. Sélectionnez "Console Web" dans le sous-menu Web Developer du menu Firefox (ou sur le menu Outils si vous affichez la barre de menus ou si vous utilisez Mac OS X).
    ou appuyez sur la touche Ctrl+Shift+K (Command+Option+K sur OS X) raccourci clavier.

  2. Dans la ligne de commande en bas, utilisez les éléments suivants:

    • $(): retourne le premier élément qui correspond. Équivalent à document.querySelector() ou appelle la fonction $ dans la page, si elle existe.

    • $$(): renvoie un tableau de noeuds DOM qui correspondent. C'est comme pour document.querySelectorAll(), mais retourne un tableau au lieu d'un NodeList.

    • $x(): évalue une expression XPath et renvoie un tableau de noeuds correspondants.

Firefox (version antérieure 49)

  1. Installer Firebug
  2. Installer Firepath
  3. Presse F12 ouvrir Firebug
  4. Basculer vers le panneau FirePath
  5. Dans la liste déroulante, sélectionnez XPathor CSS
  6. Tapez pour localiser

enter image description here

326
Yi Zeng

Vous pouvez ouvrir une console dans Chrome et Firefox et vérifier le XPath en saisissant $x("your_xpath_here"). Cela retournera un tableau de valeurs correspondantes. S'il est vide, vous savez qu'il n'y a pas de correspondance sur la page.

Par exemple:

enter image description here

Mise à jour (mars 2016):
Une nouvelle capture d'écran de Chromium v48:

*  enter image description here

37
bosnjak

En utilisant chrome ou Opera 

sans plugin, sans écrire aucun caractère de syntaxe XPath

  1. faites un clic droit sur l'élément requis, puis "inspecter"
  2. faites un clic droit sur la balise d'élément en surbrillance, choisissez Copier> Copier Xpath.

;)

 enter image description here

14
Eng. Samer T

Voici l'extension ChroPath pour Chrome qui possède de nombreuses fonctionnalités avancées comparées à FirePath - Veuillez suivre les étapes ci-dessous: 3) Cliquez sur Inspect . 4) Dans la partie droite de l'onglet Eléments, cliquez sur l'onglet ChroPath . Ici, vous obtiendrez le XPath/CSS et pourrez également le modifier et l'évaluer.

Extension de téléchargement

3
sanjay kumar

Une autre option pour vérifier votre xpath consiste à utiliser Selenium IDE. 

  1. Installer Firefox Selenium IDE
  2. Ouvrez votre application dans FireFox et ouvrez IDE
  3. Dans IDE, sur une nouvelle ligne, collez votre xpath sur la cible et cliquez sur Rechercher. L'élément correspondant serait mis en surbrillance dans votre application

 Selenium IDE

1
AJC

Je vérifie les sélecteurs XPath et Css à l’aide de Natu WebSync extension for Chrome .

Ça peut:

  • diviser le sélecteur en pièces et les vérifier séparément
  • affichez en couleur le nombre d'éléments trouvés pour chaque pièce du sélecteur. 0 - Rouge, 1 - Vert, plusieurs - Jaune
  • mettre en surbrillance des éléments sur la page lorsque je survole une partie du sélecteur
  • accédez à l'élément de sélecteur dans l'onglet Eléments lorsque je clique sur une partie du sélecteur

Cela peut être très utile pour ceux qui ont besoin d'écrire et de vérifier des sélecteurs complexes.

https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac

 enter image description here

0
wsbaser