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.