Existe-t-il un moyen d'obtenir le xpath dans Google Chrome?
J'ai une page Web que je veux 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 comment copier ce xpath.
Est-il possible de copier un xpath complet?
Vous pouvez utiliser $x dans la console JavaScript de Chrome. Aucune extension nécessaire.
ex: $x("//img")
La zone de recherche de l'inspecteur Web accepte également xpath.
Clic droit sur le noeud => "Copier XPath"
Toutes les réponses ci-dessus sont correctes. Voici une autre façon de faire avec capture d'écran.
De 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 de la console.
- Aller à copier xpath
L'extension XPath Helper fait ce dont vous avez besoin: https://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlmljjoejdpjl
Aucune extension nécessaire en chrome maintenant. Faites un clic droit sur n'importe quel élément pour lequel vous voulez xpath, cliquez sur "Inspecter un élément", puis à nouveau dans l'inspecteur, faites un clic droit sur un élément et cliquez sur "Copier le xpath".
xpathOnClick a ce que vous recherchez: https://chrome.google.com/extensions/detail/ikbfbhbdjpjnalaooidkdbgjknhghhbo
Lisez les commentaires, il faut en réalité trois clics pour obtenir le xpath.
Laissons 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- Faites un clic droit sur le HTML sélectionné
5- choisissez l'option pour copier xpath Utilisez-le 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 le regex ou le modèle de votre code HTML.
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 le XPath dans le Presse-papiers.
Google Chrome fournit un outil de débogage intégré appelé " Chrome DevTools ", qui inclut une fonctionnalité pratique qui permet d’évaluer ou de valider les sélecteurs XPath/CSS sans extension tierce.
Cela peut être fait par deux approches:
Utilisez la fonction de recherche du panneau Éléments pour évaluer les sélecteurs XPath/CSS et mettre en surbrillance les nœuds correspondants dans le DOM . évaluer et valider.
Du panneau Eléments
Appuyez sur F12 pour ouvrir Chrome DevTools.
Le panneau des éléments doit être ouvert par défaut.
Appuyez sur Ctrl + F pour activer la recherche DOM dans le panneau.
Tapez les sélecteurs XPath ou CSS à évaluer.
S'il existe des éléments correspondants, ils seront mis en surbrillance 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 ce qui contient l'en-tête Word (CSS en ligne, scripts, etc.) au lieu de correspondre uniquement aux éléments.
Depuis le panneau de la console
Appuyez sur F12 pour ouvrir Chrome DevTools.
Basculer vers le panneau de la console.
Tapez XPath comme
$x(".//header")pour évaluer et valider.Tapez des sélecteurs CSS tels que
$$("header")pour évaluer et valider.Vérifier les résultats renvoyés par l'exécution de la console.
Si les éléments correspondent, ils seront renvoyés dans une liste. Sinon, une liste vide [] est affichée.
$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 apparaîtra en 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.
Faites un clic droit sur l'élément pour lequel vous voulez utiliser le xpath et vous verrez un élément de menu pour le copier. Cela n’existait peut-être pas au moment de la création de son poste par le PO mais c’est bien là.
Dans Firebug dans Firefox, vous pouvez cliquer avec le bouton droit sur un élément après l'avoir inspecté, puis choisir Copier XPath. Je ne pouvais pas faire en sorte que ChromYQLip fonctionne correctement.
Légèrement OT, mais peut-être utile: sur Mac Chrome, bien que vous ne puissiez pas copier le xpath hors du champ de recherche du panneau des outils de développement (au lieu de cela, copiez le nœud en HTML), vous pouvez faire glisser le texte dans un éditeur externe.
Utilisez cette extension, elle génère des xpaths basés sur un id ou une classe, ce qui est probablement ce que vous voulez 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 sur n'importe quel élément pour obtenir votre chemin xpath.
La solution ci-dessus, équivalente à Chrome, est connectable au projet Java jar: Alors que Chrome fournit à la fois XPath et le sélecteur, les deux ont tendance à attribuer par défaut "id" ou d'autres éléments changeant de manière dynamique. La question ci-dessus est motivée par la nécessité de s'appuyer sur des attributs persistants. https://www.burlingtonvisionandlab.com/Downloads/TuSqK231LashowXPathSE7HTML/showXPathSE1_7Table.html
Le fichier jar gratuit téléchargeable affichera un chemin plus long avec des attributs de sélection de la portée parmi lesquels choisir.
J'ai essayé presque toutes les extensions disponibles et j'ai trouvé que le dessous était l'un des meilleurs.
Tout comme FirePath, cette extension vous donne directement le Xpath lorsque vous cliquez sur Inspecter.
