DOM Path Finder vous permet de survoler n'importe quel élément d'une page pour révéler son sélecteur CSS unique, son sélecteur court, son XPath et un extrait querySelector prêt à être collé. Cliquez pour verrouiller l'élément, puis naviguez avec les boutons Parent/Enfant/Frère. Indispensable pour Selenium, Puppeteer, Playwright et Cypress.
Écrire des tests d'automatisation, des scrapers web ou des bookmarklets nécessite des sélecteurs — mais trouver un sélecteur stable et unique est fastidieux. DOM Path Finder rend cela possible en un clic. Activez l'outil et survolez tout élément de la page — il se colore en violet. Cliquez pour le verrouiller, et le panneau affiche quatre formats de sélecteurs : un sélecteur CSS unique basé sur le chemin, un sélecteur court (balise + classes ou id), un XPath absolu et un extrait document.querySelector('...') prêt à l'emploi. Une fois verrouillé, vous pouvez naviguer dans l'arborescence DOM (Parent / Premier Enfant / Frère Précédent / Frère Suivant) sans perdre le focus. Les attributs data-testid sont détectés et priorités — idéal pour Playwright/Cypress. L'outil affiche aussi la balise, l'id, les classes, la taille et les propriétés de position.
Déplacez votre souris sur la page pour voir les éléments se colorer en violet. Cliquez pour verrouiller — pas besoin de l'inspecteur DevTools.
Chemin CSS unique, sélecteur court, XPath absolu et extrait querySelector. Choisissez celui qui convient à vos outils.
Une fois verrouillé, utilisez les boutons Parent / Premier Enfant / Précédent / Suivant pour parcourir le DOM sans re-sélectionner.
Chaque sélecteur possède son bouton Copier. Récupérez le format souhaité et collez-le directement dans votre test ou scraper.
Affiche la balise, l'id, les classes, la taille, l'affichage et la position — vue d'ensemble rapide sans ré-inspecter.
Si l'élément possède un id, le CSS unique utilise #id. Si un data-testid est présent, il est mis en avant pour Playwright/Cypress.
Sélectionnez l'élément à tester, copiez son sélecteur et collez-le dans votre code de test — plus besoin de deviner les chemins uniques.
Trouvez le sélecteur structurel pour les éléments d'une liste sur une cible de scraping. Utilisez le sélecteur court ou basé sur le chemin selon la stabilité requise.
Verrouillez un élément et copiez son chemin pour comprendre pourquoi le CSS ne s'applique pas — le sélecteur unique montre sa position exacte dans l'arbre.
Copiez l'extrait document.querySelector(...) pré-rempli directement dans la console DevTools pour un débogage interactif rapide.
Lors de l'audit d'accessibilité, utilisez le XPath pour fournir des éléments à axe-core ou à d'autres outils qui attendent des références XPath.
Cliquez sur l'icône Path Finder dans le dock DevSuite Pro. L'outil s'active immédiatement en mode sélection.
Déplacez votre souris sur la page — chaque élément se colore en violet. Faites défiler si nécessaire pour trouver votre cible.
Cliquez sur l'élément souhaité. La sélection s'arrête et le panneau se remplit des formats de sélecteurs et de boutons de copie.
Utilisez les boutons Parent/Enfant/Frère pour affiner la sélection, ou cliquez sur Sélectionner Élément pour recommencer.
Cliquez sur Copier à côté du format requis (CSS, XPath ou querySelector). Collez-le directement dans votre test ou votre console.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
