[Google-Chrome] Y at-il un moyen d'obtenir le xpath dans google chrome?



Answers

Clic droit sur le noeud => "Copier XPath"

Question

J'ai une page Web que je veux utiliser avec YQL. Mais j'ai besoin du xpath d'un objet 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.

Existe-t-il un moyen de copier un xpath complet ou une extension pour le faire?




Dans Firebug dans Firefox, vous pouvez faire un clic droit sur un élément après l'avoir inspecté et choisir Copier XPath. Je n'ai pas réussi à faire fonctionner correctement ChromYQLip.




Google Chrome fournit un outil de débogage intégré appelé " Chrome DevTools " prêt à l'emploi , qui inclut une fonctionnalité pratique permettant d'évaluer ou de valider les sélecteurs XPath / CSS sans aucune extension tierce.

Cela peut être fait par deux approches:

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

À partir du panneau Éléments

  1. Appuyez sur F12 pour ouvrir Chrome DevTools.

  2. Le panneau Éléments devrait être ouvert par défaut.

  3. Appuyez sur Ctrl + F pour activer la recherche DOM dans le panneau.

  4. Saisissez les sélecteurs XPath ou CSS à évaluer.

  5. S'il y a des éléments correspondants, ils seront mis en surbrillance dans DOM. Toutefois, 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 du sélecteur CSS doit correspondre à tout (CSS en ligne, scripts, etc.) qui contient l'en-tête du mot, au lieu des éléments correspondants uniquement.

Depuis le panneau de la console

  1. Appuyez sur F12 pour ouvrir Chrome DevTools.

  2. Passez au panneau de la console.

  3. Tapez XPath comme $x(".//header") pour évaluer et valider.

  4. Tapez dans les sélecteurs CSS comme $$("header") pour évaluer et valider.

  5. Vérifiez les résultats renvoyés depuis 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 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.



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 inspecter l'option d'élément

4- Faites un clic droit sur le html sélectionné

5- Choisissez l'option pour copier xpath Utilisez-le 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 regex ou le modèle de votre code HTML.
















Links