Testeur XPath & CSS

Testez sélecteurs XPath 1.0 et CSS3 sur tout HTML/XML — comptage de correspondances instantané, sortie surlignée. Pour scraping (Scrapy, Selenium, Puppeteer).

Vous avez des commentaires ? Signalez des bugs, suggérez des fonctionnalités ou partagez vos idées — nous lisons tout

Testeur XPath & CSS - Vérifier vos sélecteurs et XPath en ligne

Les sélecteurs sont le système d'adressage du web : chaque inspecteur de navigateur, chaque scraper (BeautifulSoup, Scrapy, Cheerio, Playwright, Selenium), chaque framework de tests end-to-end, chaque règle CSS et chaque requête jQuery se résout finalement en une expression XPath ou un sélecteur CSS contre un arbre DOM analysé. Écrire un sélecteur qui correspond exactement aux nœuds que vous voulez — ni plus, ni moins — est plus difficile qu'il n'y paraît : le HTML du monde réel est désordonné, les classes et IDs changent entre les builds, et le même 'élément' logique peut être atteint par une douzaine de chemins différents avec une robustesse variable. Ce testeur ferme la boucle de feedback : collez le HTML réel que vous ciblez (depuis 'Voir la source' de votre navigateur, une réponse fetch, ou tout document), tapez ou affinez votre sélecteur, et voyez instantanément combien d'éléments correspondent plus le HTML rendu exact de chaque correspondance. Basculez entre XPath 1.0 (le standard W3C supporté par chaque navigateur via document.evaluate et chaque bibliothèque de scraping) et sélecteurs CSS Niveau 3 (la syntaxe utilisée par querySelectorAll, les opérations type getElementsByClassName, et la plupart des APIs de scraping modernes) en un clic. Utilisez-le pour déboguer un locator Selenium cassé, prototyper un champ Scrapy, valider une règle de bloqueur de contenu, apprendre la différence entre combinateurs descendants et enfants, ou simplement répondre 'pourquoi mon sélecteur ne correspond-il pas ?' sans lancer un navigateur headless complet.

Qu'est-ce que XPath ?

XPath (XML Path Language) est un langage de requête permettant de sélectionner des nœuds dans des documents XML/HTML. Il est largement utilisé pour :

- Le scraping web
- Les tests automatisés (Selenium, Puppeteer)
- L'extraction de données HTML
- Le traitement XML

Exemples :
- //div[@class='title'] : toutes les div avec classe "title"
- //a[@href] : tous les liens ayant un attribut href
- //p[1] : premier paragraphe
- //div[@id='main']//p : tous les <p> descendants de #main

XPath est idéal pour les sélections complexes et la navigation dans l'arborescence.

Qu'est-ce qu'un sélecteur CSS ?

Les sélecteurs CSS ciblent des éléments HTML via leurs attributs, classes, ID ou relations. Ils servent à :

- Appliquer des styles CSS
- Sélectionner des éléments en JavaScript
- Scraper du contenu
- Piloter des tests automatisés

Exemples :
- div.title : div avec classe title
- #header : élément portant l'ID header
- a[href] : tous les liens disposant d'un href
- div > p : enfants directs p d'un div
- p:first-child : premier paragraphe

Les sélecteurs CSS sont plus simples que XPath pour la plupart des cas courants.

Comment utiliser le testeur ?

Mode d'emploi :

1. Choisissez le type (XPath ou Sélecteur CSS)
2. Collez votre HTML dans "HTML à analyser"
3. Saisissez l'expression ou le sélecteur
4. Cliquez sur "Tester le sélecteur"
5. Consultez le nombre de correspondances et l'HTML surligné

L'outil :
- Valide la syntaxe
- Affiche le nombre d'éléments trouvés
- Surligne les correspondances
- Montre le contenu textuel des éléments

XPath ou sélecteur CSS ?

Chaque approche a ses forces :

Sélecteurs CSS :
- Syntaxe simple
- Rapides à écrire
- Bien connus des intégrateurs
- Idéals pour les relations descendantes

XPath :
- Extrêmement puissant
- Peut remonter dans l'arbre (sélection du parent)
- Gère les conditions complexes
- Sélection par texte
- Utilise des opérateurs logiques (and, or)
- Parfait pour XML

Conseil : utilisez les sélecteurs CSS dès que possible, et basculez sur XPath pour les cas complexes.

Testeur XPath & CSS — Testez sélecteurs XPath 1.0 et CSS3 sur tout HTML/XML — comptage de correspondances instantané, sortie surlignée. Pour s — **Testeur XPath & CSS**

Expressions XPath courantes

Révisions rapides :

Basique :
- //tagname : tous les éléments du tag
- //div : toutes les div
- //div[@class='name'] : div avec classe spécifique
- //div[@id='main'] : div avec ID

Attributs :
- //a[@href] : éléments avec attribut
- //img[@alt='Logo'] : valeur exacte
- //a[contains(@href, 'example')] : correspondance partielle

Texte :
- //p[text()='Hello'] : texte exact
- //div[contains(text(), 'monde')] : texte partiel

Navigation :
- //div[@id='main']//p : tous les descendants p
- //div[@id='main']/p : enfants directs
- //p[1] : premier paragraphe
- //p[last()] : dernier paragraphe

Comment écrire un sélecteur qui survit aux refontes de sites ?

Privilégiez les signaux stables aux fragiles. (1) Utilisez des attributs sémantiques que le développeur est peu susceptible de changer : data-testid, data-cy, name, aria-label, role — typiquement ajoutés pour les tests et survivent aux refontes visuelles. (2) Utilisez le contenu textuel avec XPath quand l'étiquette visible est le contrat : //button[normalize-space(.)='Ajouter au panier'] survit même si tous les noms de classe changent. (3) Évitez les classes auto-générées de frameworks comme 'css-xn8q5e' de styled-components ou 'jss123' de MUI — elles se régénèrent à chaque build. (4) Évitez les chaînes profondes d'ancêtres : 'div > div > div > div > p' se cassera dès qu'un div de layout est ajouté ou retiré. (5) Évitez les indices positionnels ('//tr[3]') sauf si la position est le sens. (6) Quand vous êtes forcé d'utiliser une classe CSS, choisissez la plus sémantiquement significative (.product-price), pas la plus spécifique (.text-sm.font-bold.text-red-500). Règle pratique : un bon sélecteur se lit comme de l'anglais pour un autre développeur.

Pourquoi mon XPath fonctionne-t-il dans le navigateur mais échoue dans Scrapy ou Selenium ?

Trois raisons courantes. (1) Contenu rendu par JavaScript : les navigateurs exécutent le JS de la page avant que vous l'inspectiez, donc les éléments DOM comme les prix de produits ou les commentaires peuvent exister dans DevTools mais être absents du HTML brut que Scrapy/requests obtient. Solution : utilisez un navigateur headless (Playwright, Selenium avec Chrome) ou cherchez une API JSON que la page appelle. (2) Namespaces par défaut : les documents XHTML et SVG ont des attributs xmlns qui vous forcent à enregistrer un namespace dans les bibliothèques XPath comme lxml. Le navigateur est permissif ; lxml est strict. Solution : utilisez local-name() — //*[local-name()='div'] — pour contourner les namespaces. (3) Version XPath : document.evaluate des navigateurs ne supporte que XPath 1.0, mais certaines bibliothèques (lxml, Saxon) supportent les fonctions XPath 2.0+ comme ends-with(), matches(), tokenize(). Si vous avez écrit votre XPath contre lxml 2.0 et testé dans DevTools, le navigateur peut le rapporter invalide. Ce testeur utilise XPath 1.0 (comme les navigateurs) donc les résultats correspondent à ce que Selenium/Puppeteer voient.

Sélecteurs CSS courants

Astuces utiles :

Basique :
- div : toutes les div
- .classe : éléments par classe
- #id : élément par ID
- div.classe : div avec classe précise

Attributs :
- [href] : éléments avec attribut
- a[href='url'] : égalité stricte
- a[href*='example'] : contient
- a[href^='https'] : commence par
- a[href$='.pdf'] : finit par

Combinateurs :
- div p : tous les descendants p
- div > p : enfants directs
- div + p : frère suivant immédiat
- div ~ p : tous les frères suivants

Pseudo-classes :
- p:first-child : premier enfant
- p:last-child : dernier enfant
- p:nth-child(2) : deuxième enfant
- a:not(.active) : exclure une classe