Chrome
Cela peut être réalisé par trois approches différentes (voir mon article de blog ici pour plus de détails):
- Rechercher dans le
Elements
panneau comme ci-dessous
- Exécuter
$x()
et $$()
dans le Console
panneau, comme indiqué dans la réponse de Lawrence
- Les extensions tierces (pas vraiment nécessaires dans la plupart des cas, pourraient être excessives)
Voici comment vous recherchez XPath dans le Elements
panneau:
- Appuyez F12pour ouvrir l'outil de développement Chrome
- Dans le panneau "Éléments", appuyez sur Ctrl+F
- Dans la zone de recherche, tapez XPath ou CSS Selector, si des éléments sont trouvés, ils seront surlignés en jaune.
Firefox (depuis la version 75)
Depuis FF 75, il est possible d'utiliser une requête xpath brute sans expression xpath d'évaluation, voir la documentation pour plus d'informations.
Firefox (version antérieure 75)
- Sélectionnez «Console Web» dans le sous-menu Développeur Web du menu Firefox (ou le menu Outils si vous affichez la barre de menus ou êtes sous Mac OS X)
ou appuyez sur le raccourci clavier Ctrl+ Shift+ K( Command+ Option+ Ksous OS X).
Dans la ligne de commande en bas, utilisez ce qui suit:
$()
: Renvoie le premier élément qui correspond. Équivaut à document.querySelector()
ou appelle la $
fonction dans la page, si elle existe.
$$()
: Renvoie un tableau de nœuds DOM qui correspondent. C'est comme pour document.querySelectorAll()
, mais renvoie un tableau au lieu d'un NodeList
.
$x()
: Évalue une expression XPath et renvoie un tableau de nœuds correspondants.
Firefox (version précédente 49)
- Installez Firebug
- Installez Firepath
- Appuyez F12pour ouvrir Firebug
- Passer au
FirePath
panneau
- Dans la liste déroulante, sélectionnez XPathor CSS
- Tapez pour localiser
$("//div")