Testeur XPath & CSS

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

Outil puissant pour composer, tester et déboguer vos sélecteurs XPath ou CSS sur n'importe quel extrait HTML. Voyez instantanément quels éléments correspondent, combien sont trouvés et visualisez-les grâce au surlignage intégré. Indispensable pour le scraping, les tests automatisés et la formation web.

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

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
• 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