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
la source
la source
Réponses:
Vous pouvez utiliser
$x
dans la console javascript de Chrome. Aucune extension nécessaire.ex:
$x("//img")
De plus, la zone de recherche de l'inspecteur Web acceptera xpath
la source
Ctrl+Space
ne révèle pas$x
. Si vous tapez simplement,$x
vous 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
Clic droit sur le nœud => "Copier XPath"
la source
Toutes les réponses ci-dessus sont correctes, voici une autre façon de faire une capture d'écran également.
Depuis Chrome:
la source
L'extension XPath Helper fait ce dont vous avez besoin: https://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl
la source
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".
la source
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.
Si le sélecteur XPath ou CSS n'est pas valide, une exception sera affichée en texte rouge. Par exemple:
la source
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.
la source
$x('//*[@id="answer-33492958"]/table/tbody/tr[1]/td[1]/div/a[1]')[0].click();
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.
la source
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.
la source
Pour Chrome, par exemple:
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:
la source
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.
la source
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.
la source
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.
la source
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.
la source
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.
la source
appuyez sur
Cntl + Shift + C
sélectionnez l'élément que vous souhaitez obtenir
XPath
en cliquantright click
sur la partie en surbrillance dans la consolecopy
->copy XPath
la source
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
la source