Testeur XPath & CSS

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.

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.

Puis-je exporter mon sélecteur en code Scrapy, Selenium ou Playwright ?

Oui. Une fois votre sélecteur validé, ouvrez le panneau 'Copier en code' et choisissez votre bibliothèque. Le testeur génère l'appel exact et correctement échappé pour le mode courant (XPath ou CSS) :

- Scrapy : response.xpath("...").getall() ou response.css("...").getall()
- lxml : tree.xpath("...") ou tree.cssselect("...")
- Selenium (Python) : driver.find_elements(By.XPATH, "...") ou By.CSS_SELECTOR
- Playwright (Python et JS) : page.locator("xpath=...") ou page.locator("...")
- JS/DOM : document.evaluate(...) pour XPath ou document.querySelectorAll('...') pour CSS

L'outil choisit le type de guillemet qui N'EST PAS utilisé dans votre sélecteur et échappe le reste, vous évitant les erreurs classiques By.CSS_SELECTOR vs By.XPATH et d'échappement de guillemets. C'est la dernière étape avant de coller dans votre scraper ou votre test.

Le support des fonctions XPath 2.0 comme matches() ou ends-with() est-il assuré ?

Non. Ce testeur utilise le document.evaluate du navigateur, qui ne gère que XPath 1.0 — le même moteur que Selenium et Puppeteer utilisent sur une page réelle. Les expressions reposant sur des fonctions XPath 2.0+ déclencheront 'Expression XPath invalide' ici :

- matches(chaîne, motif) — regex XPath 2.0, NON disponible
- ends-with(chaîne, suffixe) — XPath 2.0, NON disponible (utilisez une astuce de sous-chaîne inversée ou contains())
- tokenize(), replace(), lower-case(), upper-case() — XPath 2.0, NON disponibles

Alternatives XPath 1.0 qui FONCTIONNENT : contains(), starts-with(), normalize-space(), translate() (pour la casse), substring(), string-length() et l'astuce local-name() pour les namespaces. Si une expression fonctionne dans lxml ou Saxon mais échoue ici, vous avez presque certainement utilisé une fonction 2.0 — réécrivez-la en 1.0 pour correspondre à ce que les navigateurs et Selenium exécutent réellement.

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

Fonctionnalités clés

• Test de vos expressions XPath
• Test de vos sélecteurs CSS
• Bascule instantanée entre les modes
• Validation de syntaxe
• Compteur de correspondances
• Surlignage des éléments trouvés
• Export en code pour Scrapy, lxml, Selenium, Playwright et JS/DOM
• Affichage du contenu et de la structure
• Support des HTML imbriqués complexes
• Tests en temps réel
• Copie des sélecteurs et résultats
• Mode sombre
• 100% côté client : vos données restent locales
• Fonctionne hors ligne après chargement
• Interface responsive prête pour le mobile