Existe-t-il un moyen d'obtenir le XPath dans Google Chrome?

346

J'ai une page Web que je souhaite utiliser avec YQL. Mais j'ai besoin du XPath d'un élément spécifique. Je peux le voir dans la zone des outils de débogage pour Google Chrome, mais je ne vois pas de moyen de copier ce XPath.

Existe-t-il un moyen de copier un XPath complet?

google-chrome google-chrome-devtools

— GeoffreyF67
source

2

Si vous êtes prêt à installer Firefox en plus de Chrome, vous pouvez utiliser l' extension xpather .

— Adrian Grigore

4

S'il est prêt à installer Firefox, il est déjà intégré à Firebug.

— Verhogen

2

@verhogen: Je n'étais pas au courant de cela, même si j'utilise Firebug presque quotidiennement. Dans le cas où quelqu'un d'autre serait intéressé par plus d'informations, le voici: blog.browsermob.com/2009/04/…

— Adrian Grigore

Je vote également en faveur de cela .... l'aide Xpath dans Google Chrome ne fonctionne pas bien, à la fois en appuyant sur la touche de raccourci [Ctrl + Maj + X] ou en cliquant sur le bouton noir "X Path" (par le bouton clé) dans le Console JS lorsqu'il y a des erreurs JS dans la page. Et je n'ai pas trouvé d'autres bons modules complémentaires pour Chrome. Ne téléchargez pas le module complémentaire "XPath Checker" pour Mozilla. J'ai également rencontré des problèmes avec ce module complémentaire. Assurez-vous d'obtenir le "XPather" et de le télécharger pendant que Firefox est ouvert (pas un autre navigateur). Pour utiliser l'élément de clic droit "XPather" et choisissez "Afficher dans XPather"

— MacGyver

Maintenant, Chrome a également une extension "XPather". Je pense que c'est très bien. Alt-'x 'pour activer la fenêtre. Vous pouvez entrer le xpath et voir les résultats correspondants. L'affichage du résultat correspondant est assez soigné.

— gm2008

555

Vous pouvez utiliser $xdans la console javascript de Chrome. Aucune extension nécessaire.

ex: $x("//img")

De plus, la zone de recherche de l'inspecteur Web acceptera xpath

— Matt Polito
source

2

Bien - même si je ne suis pas sûr que cela réponde à la question d'origine. Comment l'avez-vous découvert? Je me demande s'il existe d'autres fonctions similaires disponibles dans la console.

— huyz

4

Je suppose que Chrome a copié la plupart des commandes de ligne de commande Firebug

— huyz

99

Il demandait "comment obtenir une chaîne xpath pour un élément?", Plutôt que "comment puis-je sélectionner par xpath?" n'est-ce pas?

— Max Williams

3

Intéressant comment Ctrl+Spacene révèle pas $x. Si vous tapez simplement, $xvous pouvez voir comment cela est réalisé, donc l'OP devrait être en mesure de déterminer comment réaliser ce qu'il veut. Par exemple; document.evaluate('//h1', document, null, XPathResult.STRING_TYPE, null).stringValue

— Alasdair

5

@huyz - il existe des fonctions similaires disponibles. Voir developers.google.com/chrome-developer-tools/docs/console . $ 0 est particulièrement utile: le dernier élément que vous avez sélectionné dans l'outil DOM. $ ($ 0) en fait un objet jQuery (si jQuery est disponible). De plus, l'article ne mentionne pas la copie ($ 0), qui copie dans le presse-papiers. (

— Nathan Long

244

Clic droit sur le nœud => "Copier XPath"

— zavidovych
source

19

C'est le moyen le plus fragile d'obtenir un xpath, il est très probable qu'il se brise lorsque le contenu change

— Juan Mendes

8

@JuanMendes quelle est l'alternative?

— Nate

9

@Nate Il n'y a pas d'alternative facile si vous voulez que votre XPath fonctionne toujours lorsque le document change. Il vous suffit d'y penser et d'essayer de ne pas ajouter d'informations superflues à votre XPath. En règle générale, plus votre XPath est long, moins il est susceptible de fonctionner dans d'autres contextes.

— Juan Mendes

Cela ne vous donne pas un XPath réel pour l'élément unique sur la page. Ce serait assez difficile.

— CJ7 le

1

Dans la nouvelle version de Google Chrome, vous devez cliquer avec le bouton droit sur le nœud et sélectionner Copier l'élément XPath qui est passé à l'option Copier.

— Omid Nasri

92

Toutes les réponses ci-dessus sont correctes, voici une autre façon de faire une capture d'écran également.

Depuis Chrome:

Faites un clic droit "inspecter" sur l'élément que vous essayez de trouver le xpath
Faites un clic droit sur la zone en surbrillance sur la console.
Allez dans Copier xpath

— grepit
source

24

L'extension XPath Helper fait ce dont vous avez besoin: https://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl

— asadovsky
source

Est-ce que quelqu'un connaît les commandes du clavier pour cela sur Ubuntu? crtl-shift-x et command-shift-x ne semblent rien faire

— xiatica

1

@xiatica, avez-vous essayé dans un nouvel onglet / actualisé? Notez que l'extension ne fonctionnera pas dans les onglets qui étaient ouverts avant l'installation; ces onglets doivent être actualisés.

— asadovsky

13

Aucune extension nécessaire dans Chrome maintenant. Faites un clic droit sur n'importe quel élément pour lequel vous voulez que xpath et cliquez sur "Inspecter l'élément" puis à nouveau à l'intérieur de l'inspecteur, faites un clic droit sur l'élément et cliquez sur "Copier Xpath".

— plongée profonde
source

11

Cette méthode est déjà mentionnée dans une réponse précédente, publiée l'année dernière: stackoverflow.com/a/11087358/938089

— Rob W

12

Google Chrome fournit un outil de débogage intégré appelé « Chrome DevTools », qui comprend une fonctionnalité pratique qui peut évaluer ou valider les sélecteurs XPath / CSS sans aucune extension tierce.

Cela peut se faire par deux approches:

Utilisez la fonction de recherche dans le panneau Éléments pour évaluer les sélecteurs XPath / CSS et mettre en évidence les nœuds correspondants dans le DOM. Exécutez les jetons $ x ("some_xpath") ou $$ ("css-selectors") dans le panneau Console, qui évalueront et valideront.

Depuis le panneau Éléments

Appuyez sur F12 pour ouvrir Chrome DevTools.
Le panneau Éléments doit être ouvert par défaut.
Appuyez sur Ctrl + F pour activer la recherche DOM dans le panneau.
Tapez des sélecteurs XPath ou CSS à évaluer.
S'il y a des éléments correspondants, ils seront mis en évidence dans DOM. Cependant, s'il existe des chaînes correspondantes dans DOM, elles seront également considérées comme des résultats valides. Par exemple, l'en-tête de sélecteur CSS doit correspondre à tout (CSS en ligne, scripts, etc.) qui contient l'en-tête de mot, au lieu de correspondre uniquement aux éléments.

Depuis le panneau de la console

Appuyez sur F12 pour ouvrir Chrome DevTools.
Basculez vers le panneau de la console.
Tapez XPath comme $x(".//header")pour évaluer et valider.
Tapez des sélecteurs CSS comme $$("header")pour évaluer et valider.
Vérifiez les résultats renvoyés par l'exécution de la console.

Si des éléments sont mis en correspondance, ils seront renvoyés dans une liste. Sinon, une liste vide [] s'affiche.

$x(".//article")
[<article class="unit-article layout-post">…</article>]

$x(".//not-a-tag")
[ ]

Si le sélecteur XPath ou CSS n'est pas valide, une exception sera affichée en texte rouge. Par exemple:

$x(".//header/")
SyntaxError: Failed to execute 'evaluate' on 'Document': The string './/header/' is not a valid XPath expression.

$$("header[id=]")
SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'header[id=]' is not a valid selector.

— Shubham Jain
source

10

Laissez-vous dire une formule simple pour trouver xpath de n'importe quel élément:

1- Ouvrir le site dans le navigateur

2- Sélectionnez l'élément et faites un clic droit dessus

3- Cliquez sur l'option inspecter l'élément

4- Clic droit sur le html sélectionné

5- Choisissez l'option pour copier xpath Utilisez-la partout où vous en avez besoin

Ce lien vidéo vous sera utile. http://screencast.com/t/afXsaQXru

Remarque: pour les options avancées de xpath, vous devez connaître l'expression régulière ou le modèle de votre code HTML.

— Abdul Majeed
source

3

A utilisé la console Chrome pour tester cela et a fait cela pour voter: $x('//*[@id="answer-33492958"]/table/tbody/tr[1]/td[1]/div/a[1]')[0].click();

— Cagatay Ulubay

8

xpathOnClick a ce que vous recherchez: https://chrome.google.com/extensions/detail/ikbfbhbdjpjnalaooidkdbgjknhghhbo

Lisez les commentaires cependant, il faut en fait trois clics pour obtenir le xpath.

— Burt
source

Ne semble pas fonctionner sur Ubuntu 10.04 avec Chrome 12.0.742.124, s'installe mais lorsque vous cliquez sur l'icône xpath, puis cliquez sur la page (première fois pour fermer la fenêtre contextuelle xpath), puis cliquez sur un élément de page (pour afficher xpath dans la console js ) .... rien n'apparaît dans la console. testé sur le site du plugin

— xiatica

8

Depuis la dernière mise à jour de Chrome, vous pouvez maintenant cliquer sur n'importe quel élément dans l'inspecteur d'éléments et copier XPath dans le presse-papiers.

— Rusé
source

5

Pour Chrome, par exemple:

Faites un clic droit sur "inspecter" sur l'élément que vous essayez de trouver le XPath.
Cliquez avec le bouton droit sur la zone en surbrillance sur le DOM HTML.
Allez dans Copier> sélectionnez «Copier XPath».
Après l'étape ci-dessus, vous obtiendrez le XPath absolu de l'élément du DOM.
Vous pouvez apporter des modifications pour le rendre relatif XPath (car si le DOM change, votre XPath pourrait toujours trouver l'élément).

une. Pour ce faire, en ouvrant le panneau 'Elements' du navigateur, appuyez sur CTRL + F, collez le XPath.

b. Apportez les modifications décrites dans l'exemple suivant.

Bouton xpath absolu = // * [@ id = "app"] / div [1] / header / nav / div [2] / ul / li [2] / div / button

Bouton xpath = // div // nav / div [2] / ul / li [2] / div / associé

Lorsque vous apportez des modifications:

assurez-vous que le XPath est unique dans le DOM.
l'élément Web est toujours sélectionné sur le DOM et sur la page Web.

— Hossain Mahmood Tuhin
source

3

Faites simplement un clic droit sur l'élément pour lequel vous voulez le xpath et vous verrez un élément de menu pour le copier. Cela n'existait peut-être pas lorsque le PO a pris ses fonctions, mais il est certainement là maintenant.

— RAAAAAAAANDY
source

2

Dans Firebug dans Firefox, vous pouvez cliquer avec le bouton droit sur un élément après l'avoir inspecté et choisir Copier XPath. Je n'ai pas pu faire fonctionner ChromYQLip sans problème.

— Ivan
source

1

Vous pouvez essayer d'utiliser Chrome Web Extension TruePath qui génère dynamiquement le XPath relatif sur un clic droit sur la page Web et affiche tous les XPath en tant qu'éléments de menu.

— dasunse
source

0

Légèrement OT, mais peut-être utile: sur Mac Chrome, bien que vous ne puissiez pas copier le xpath hors de la zone de recherche dans le panneau des outils de développement (à la place, copier récupère le nœud en HTML), vous pouvez faire glisser et déposer le texte dans un éditeur externe.

— Ben Weiner
source

0

J'ai essayé presque toutes les extensions disponibles et j'ai trouvé que ci-dessous était l'une des meilleures.

Lien d'extension ChroPath

Tout comme FirePath, cette extension vous donne directement le Xpath lorsque vous cliquez sur Inspecter.

— Harish Kannan
source

0

appuyez sur Cntl + Shift + C
sélectionnez l'élément que vous souhaitez obtenir XPathen cliquant
right clicksur la partie en surbrillance dans la console
copy->copy XPath

— hossein hayati
source

-1

Utilisez cette extension, elle génère des xpaths basés sur l'id ou la classe, ce qui est probablement ce que vous souhaitez utiliser.

Cliquez sur l'icône du navigateur, le panneau est affiché dans le coin droit de la page, puis cliquez sur démarrer l'inspection, puis cliquez sur n'importe quel élément pour obtenir votre xpath.

Générateur XPath

— araignée
source

@robbyoconnor si vous avez fait des tests ou des analyses de blackbox, vous savez que le xpath généré par le navigateur n'est pas aussi stable.

— ospider