Passer au contenu

Sélecteurs XPath vs CSS : un guide détaillé pour les experts en Web Scraping

Au cours de mes 10+ années en tant que spécialiste du web scraping, peu de questions reviennent aussi souvent que « Dois-je utiliser les sélecteurs XPath ou CSS ? »

Bien qu'il n'y ait pas de bonne réponse, comprendre les principales différences entre ces deux technologies de sélection d'éléments peut vous aider à devenir un praticien plus informé.

Dans ce guide complet, je couvrirai tout ce que vous devez savoir sur XPath et CSS du point de vue du web scraping :

  • Origines et évolution
  • Syntaxe et structure des requêtes
  • Capacités et limites
  • Considérations relatives aux performances
  • Prise en charge et normes du navigateur
  • Prise en charge des outils et des bibliothèques

Mon objectif est de fournir les informations dont vous avez besoin, à la fois en tant que développeur et scraper, pour déterminer quand utiliser XPath vs CSS pour une tâche d'extraction Web donnée.

Prêt? Allons-y.

Une histoire brève

XPath était à l'origine un langage de requête pour les documents XML, tandis que CSS était conçu pour styliser les pages Web.

Mais au fil du temps, ils sont devenus de puissants outils de sélection d’éléments pour les besoins d’automatisation et de scraping.

L'essor de XPath

Lorsque XML gagnait en popularité dans les années 1990, les développeurs avaient besoin d'un moyen standard pour cibler les nœuds dans les documents complexes.

XPath a été créé en 1999 pour répondre à ce besoin.

Le W3C a adopté XPath comme composant clé de XSLT et XQuery. Et d'autres logiciels comme Selenium et Scrapy ont intégré la prise en charge XPath pour rechercher des éléments HTML sur les pages Web rendues.

En modélisant le DOM sous forme d'arborescence, XPath a fourni de solides capacités de traversée vers le haut, vers le bas et entre les branches.

Les sélecteurs CSS deviennent omniprésents

CSS a été conçu comme un langage de style et comprenait des sélecteurs de base tels que le type, l'ID et la classe.

Lorsque CSS est devenu partie intégrante du développement Web dans les années 1990, les navigateurs ont investi massivement dans l'optimisation des moteurs CSS.

Ces performances combinées à l'omniprésence ont également rendu les sélecteurs CSS attrayants pour les besoins de web scraping.

Les bibliothèques de scraping comme Beautiful Soup utilisaient des sélecteurs CSS comme stratégie de localisation rapide.

Ainsi, alors que XPath ciblait les documents XML/HTML dans leur ensemble, CSS se concentrait sur le style des éléments visibles de l'interface utilisateur.

Comparaison des syntaxes XPath et CSS

Décomposons la syntaxe de XPath et CSS à travers quelques exemples.

Considérez cette page simple :

<html>

<body>
  <div>
    <h2>Hello World</h2>
    <p>This is a page</p> 
  </div>

  <ul>
    <li class="highlight"><span>List item 1</span></li>
    <li>List item 2</li>    
  </ul>

</body>

</html>

Syntaxe XPath

Le DOM est traité comme un arbre de nœuds. XPath utilise des expressions de chemin pour parcourir les nœuds :

  • /html/body - Sélectionnez le <body> élément
  • //li[1] – Choisissez d’abord <li>
  • //h2/text() – Obtenez du texte à l’intérieur <h2>
  • //span/ancestor::ul – Monter à <ul> mère

Quelques choses notables:

  • Structure hiérarchique basée sur les positions DOM
  • "//" pour effectuer une recherche globale ; "/" pour les enfants directs
  • [ ] pour les prédicats et les fonctions comme position()

Syntaxe du sélecteur CSS

CSS utilise une syntaxe simple de correspondance de modèles pour cibler les éléments :

  • body - Sélectionnez <body> Étiquette
  • .highlight – Choisissez par nom de classe
  • ul > li - Correspondre <li> à l'intérieur <ul>
  • h2 + p – Combinateur de frères et sœurs adjacents

Observations:

  • Modèles plats et non hiérarchiques
  • Des caractères spéciaux comme >, + définir des relations
  • Pas moyen de traverser l'arbre

En résumé, XPath est orienté vers l'interrogation structurée de documents, tandis que CSS fournit une simple correspondance de sous-chaînes.

Comparaison des fonctionnalités XPath et CSS

Une fois les bases couvertes, comparons certains des points clés de différenciation :

Traversée du DOM

  • XPath peut parcourir à la fois le haut et le bas
  • Les sélecteurs CSS autorisent uniquement le parcours vers le bas

Cela rend XPath plus flexible.

lisibilité

  • Les sélecteurs CSS sont généralement plus lisibles et concis
  • Les longues chaînes XPath peuvent devenir complexes

Ainsi, pour les requêtes plus simples, CSS présente un avantage.

Performance

  • Les sélecteurs CSS sont souvent plus rapides en raison de l'optimisation du navigateur
  • Mais pour les pages complexes, l'écart se réduit

Dans la plupart des cas, la vitesse est comparable.

Correspondance partielle

  • XPath prend en charge contains() pour la recherche de texte partielle
  • CSS manque de support natif, certaines pseudo-classes ne fonctionnent que sur des correspondances exactes

Ici, XPath a de meilleures fonctionnalités.

Support linguistique

  • XPath peut interroger à la fois XML et HTML
  • CSS ne fonctionne qu'avec HTML/DOM

XPath est utile pour les deux formats de données.

Lequel utiliser lors du grattage ?

En fonction de leurs capacités, voici quelques recommandations sur le moment où utiliser par défaut XPath ou CSS :

Préférez XPath lorsque vous en avez besoin :

  • Parcourez l'arborescence DOM
  • Rechercher partiellement les valeurs du texte
  • Requête XML (pas seulement HTML)
  • Utiliser une logique conditionnelle avancée

Préférez les sélecteurs CSS lorsque vous le souhaitez :

  • Écrivez des requêtes courtes et simples
  • Tirer parti de l’optimisation du navigateur
  • Bibliothèques de support comme Beautiful Soup
  • Localiser les éléments visibles de l'interface utilisateur

Mais il n’y a pas de règles strictes – l’expérience vous dira quand celui-ci est le mieux adapté.

Souvent, utiliser les deux ensemble constitue l’approche optimale.

Prise en charge et normes du navigateur

Tous les navigateurs modernes prennent entièrement en charge XPath et CSS :

FonctionnalitéChromeFirefoxSafari
XPathOuiOuiOui
Sélecteurs CSSOuiOuiOui

Et ce sont tous deux des standards du Web :

  • XPath est une recommandation du W3C
  • CSS est standardisé par le W3C

Vous pouvez donc compter sur une excellente prise en charge multi-navigateurs pour les deux technologies.

Conclusion et principaux points à retenir

Le choix entre XPath et CSS dépend plus de leurs capacités que de leurs performances.

Ma recommandation est de maîtriser les deux et de laisser le cas d'utilisation guider votre sélection.

Pour des recherches d’éléments simples, préférez CSS pour plus de lisibilité.

Lorsque vous avez besoin d'une traversée DOM robuste ou d'une correspondance partielle, utilisez XPath.

Si possible, utilisez XPath et CSS ensemble pour bénéficier de leur puissance combinée.

Avec de l'expérience dans l'extraction de données sur le Web, vous apprendrez naturellement quand tirer le meilleur parti des sélecteurs XPath et CSS.

J'espère que ce guide vous a fourni un aperçu complet de leurs principales forces, différences et applications pour vos besoins en matière de web scraping.

Bonne extraction !

Mots clés:

Prendre part à la conversation

Votre adresse email n'apparaitra pas. Les champs obligatoires sont marqués *