Chrome

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

• Rechercher dans le panneau Elements comme ci-dessous
• Exécutez $x() et $$() dans le panneau Console , comme indiqué dans la réponse de Lawrence
• Les extensions tierces (pas vraiment nécessaires dans la plupart des cas, pourraient être exagérées)

Voici comment rechercher le panneau XPath dans Elements :

1. Appuyez sur F12 pour ouvrir Chrome Developer Tool
2. Dans le panneau “Elements”, 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.

Firefox

1. Sélectionnez “Web Console” dans le sous-menu Web Developer du menu Firefox (ou dans le menu Outils si vous affichez la barre de menus ou si vous êtes sous Mac OS X).
   ou appuyez sur le raccourci clavier Ctrl + Maj + K ( Commande + Option + K sous OS X).

2. Dans la ligne de commande en bas, utilisez ce qui suit:

   • $() : Renvoie 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 correspondant. 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 précédente 49)

1. Installer Firebug
2. Installer Firepath
3. Appuyez sur F12 pour ouvrir Firebug
4. Passer au panneau FirePath
5. Dans la liste déroulante, sélectionnez XPathor CSS
6. Tapez pour localiser

Vous pouvez ouvrir une console dans Chrome et Firefox, et vérifier le XPath en tapant $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:

Mise à jour (mars 2016):
Une nouvelle capture d’écran de Chrome V48:

*

En utilisant chrome ou Opera

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

1. clic droit sur l’élément requirejs, puis “inspecter”
2. Faites un clic droit sur la balise d’élément en surbrillance, choisissez Copier> Copier Xpath.

😉

Une autre option pour vérifier votre xpath consiste à utiliser l’ IDE selenium.

1. Installer Firefox IDE Selenium
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 évidence dans votre application

Voici l’extension ChroPath pour Chrome qui propose de nombreuses fonctionnalités avancées par rapport à FirePath. Veuillez suivre les étapes ci-dessous: 1) Ouvrez le panneau devtools. 2) Cliquez avec le bouton droit n’importe où sur la page Web. 3) Cliquez sur Inspecter. 4) Dans la partie droite de l’onglet Éléments, cliquez sur l’onglet ChroPath. Vous obtenez ici le XPath / CSS et vous pouvez également l’éditer et l’évaluer.

Lien de téléchargement de l’addon-

https://chrome.google.com/webstore/detail/chropath/ljngjbnaijcbncmcnjfhigebomdlkcjo

Je vérifie les sélecteurs XPath et Css en utilisant l’ extension Natu WebSync pour Chrome .

Ça peut:

• diviser le sélecteur en pièces et les vérifier séparément
• montre avec couleur combien d’éléments sont trouvés pour chaque partie du sélecteur. 0 – Rouge, 1 – Vert, plusieurs – Jaune
• mettre en évidence des éléments sur la page lorsque je passe la partie sélecteur
• accédez à l’élément de sélection dans l’onglet Eléments lorsque je clique sur la partie de 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