Savez-vous quel est le bon sélecteur à utiliser pour le web scraping ? Au cours de la dernière décennie, le web scraping a connu une grande popularité pour extraire des données de l'internet. Il permet aux entreprises d'acquérir et d'analyser des données afin de prendre de meilleures décisions. Grâce aux technologies automatisées, le web scraping n'a jamais été aussi facile qu'aujourd'hui.
Cependant, quel que soit l'outil ou le cadre que vous choisissez, vous devez prendre une décision cruciale pour vous assurer que votre scraper récupère les données poliment. Il s'agit de savoir s'il faut extraire des éléments web à l'aide de XPath ou de sélecteurs CSS, ce que vous apprendrez dans cet article.
Prenons quelques exemples concrets.
XPath est l'abréviation de XML Path Language. Cependant, il utilise une syntaxe non XML pour sélectionner des balises ou des groupes de balises dans un document XML ou HTML, comme dans le cas du web scraping. XPath vous permet d'écrire des expressions pour accéder directement à un élément HTML ou XML sans avoir à parcourir toute l'arborescence HTML.
Pour comprendre comment vous pouvez accéder à un élément à l'aide de XPath, examinons plus en détail un code HTML. Je suppose que vous avez déjà des connaissances de base en HTML.
<!doctype html>
<html xmlns=”http://www.w3.org/1999/xhtml” lang="en" xml:lang="en">
<head>
<meta charset="utf-8">
<title>Awesome Products at your Fingertips</title>
</head>
<body>
<h1>Description of product features</h1>
<p>These products are great. So let's just look at the features !</p>
<ul id="product-list" class=”basic-list”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Vous pouvez taper le code ci-dessus dans un éditeur de votre choix et l'enregistrer sous products.html. Vous pouvez ensuite l'afficher dans un navigateur (de préférence Google Chrome, car c'est avec lui que nous allons parcourir cet exemple).
Lorsque le navigateur exécute ce code, il phrase le HTML et crée une représentation arborescente des éléments. C'est ce qu'on appelle le DOM (Document Object Model ) sous la forme suivante :
Vous pouvez en savoir plus sur le DOM en cliquant sur le lien suivant. Nous nous concentrons à présent sur le XPath et sur la manière de naviguer directement vers chacun de ces éléments sans avoir à parcourir l'ensemble de l'arbre. Commençons donc par la terminologie de base de Xpath.
Avec XPath, l'élément le plus fondamental est un nœud. Les nœuds sont simplement les éléments individuels que vous venez de voir dans l'arbre DOM. Au fil de cet article, vous découvrirez que les nœuds sont constitués d'éléments de balises, d'attributs, de valeurs de chaînes qui leur sont assignées, etc. Il y en a sept dans chaque page XML ou HTML, et examinons chaque type de nœud de plus près.
Si les trois premiers sont les plus importants, il est également essentiel de connaître les quatre suivants, à titre d'information.
Il y a deux façons de procéder. Premièrement, faisons une démonstration ou codons un exemple. Comme je l'ai mentionné plus haut, j'espère que vous l'avez enregistré sur votre disque local et qu'il est prêt à être visualisé dans votre navigateur.
Lorsque la page est chargée, passez votre souris sur l'élément 1 et cliquez dessus avec le bouton droit de la souris. Sélectionnez ensuite l'option Inspecter dans le menu qui s'affiche, comme le montre la capture d'écran ci-dessous :
Then you would be able to find the full XPath by clicking on the <li> element in the console and selecting “copy” from the drop-down menu, and then specifying “Copy full XPath as shown below:
Ensuite, après l'avoir collé dans un fichier texte ou ailleurs, vous obtiendrez :
/html/body/ul/li[1]C'est ce qu'on appelle le chemin absolu . Je vous expliquerai plus loin comment vous l'avez dérivé.
Étape 1 => li[1] /Ici un désigne le premier élément li
Étape 2 => /li[1]
Étape 3 => ul/li[1]
Étape 4 => /ul/li[1]
Étape 5 => body/ul/li[1]
Étape 6 => /body/ul/li[1]
Étape 7 => html/body/ul/li[1]
Étape 8 => /html/body/ul/li[1]
With this method, you need to work your way backward, starting from the target element all the way back to the root element. You add a forward slash before the element you have just added as you write each element. So let’s look at how you could work out the XPath for the first <li> element manually:
Bien que la méthode ci-dessus semble longue, elle vous aidera à comprendre comment construire le XPath complet. Passons maintenant à la méthode relative.
//*[@id="product-list"]/li[1]As you can see, it is pretty short, and the path is relative to the parent <ul> element. Since the <li> element does not have an id attribute, its relative path is relative to the <ul> element.
Les différences significatives sont que le XPath complet n'est pas lisible et qu'il est difficile à maintenir. L'autre problème évident est qu'en cas de modification d'un élément à partir de l'élément racine, le XPath absolu ne sera pas valide. Il est donc logique d'utiliser le XPath relatif.
Toutefois, avant d'en dire plus, examinons d'abord les avantages et les inconvénients.
Avec XPath, vous n'avez pas à vous inquiéter si vous ne connaissez pas le nom d'un élément car vous pouvez utiliser la fonction contains pour rechercher des correspondances probables. Vous pouvez donc remonter dans le DOM lorsque vous recherchez des éléments à récupérer.
L'autre avantage important de CSS est qu'il fonctionne dans les anciens navigateurs tels que les versions obsolètes d'Internet Explorer.
Comme vous l'avez appris ci-dessus, son principal inconvénient est qu'il est plus facile de le casser lorsque vous modifiez les éléments du chemin. Il peut être difficile à comprendre par rapport aux sélecteurs CSS que vous découvrirez ci-dessous.
De plus, lors de la récupération d'éléments à partir de XPath, ses performances sont beaucoup plus lentes que celles de CSS.
Comme vous le savez déjà, CSS est l'acronyme de Cascading Style Sheets (feuilles de style en cascade), utilisées pour styliser les éléments HTML d'une page web. Ces styles comprennent l'application de couleurs à la police, aux images d'arrière-plan et aux couleurs, l'alignement et le positionnement des éléments et l'augmentation/diminution des espaces entre les paragraphes.
Pour attribuer un style à un élément HTML, vous devez le spécifier au moyen d'un sélecteur CSS. Commençons par un exemple simple à partir des balises de la section suivante.
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>Voici donc le sélecteur CSS pour l'élément ci-dessus :
Vous pouvez également les combiner :
h1.header-styles-Cesélecteur CSS sélectionne les éléments h1 avec la classe header-styles.
L'opérateur > est utilisé pour sélectionner les enfants. En revanche, l'opérateur + choisit le premier frère ou la première sœur, et l'opérateur ~ est utilisé pour sélectionner tous les frères et sœurs. En voici quelques exemples :
Contrairement à XPath, que Beautiful Soup ne prend pas en charge, les sélecteurs CSS sont pris en charge par les bibliothèques de scraping les plus efficaces. En outre, contrairement à XPath, les sélecteurs CSS sont plus faciles à apprendre et à maintenir. Presque tous les navigateurs les prennent en charge, à l'exception des anciens navigateurs inférieurs à la version 8 d'Internet Explorer. Toutefois, ces navigateurs sont rarement utilisés de nos jours.
Même si les anciennes versions d'Internet Explorer sont exclues de l'équation, il peut subsister des incohérences au niveau du rendu sur différents navigateurs.
Comme il existe plusieurs versions de CSS, elles peuvent être source de confusion pour les développeurs comme pour les débutants.
Un autre facteur essentiel de la technologie web actuelle est la sécurité du CSS.
La différence apparente entre XPath et CSS est que XPath est bidirectionnel. Cela signifie que vous pouvez parcourir l'arbre DOM dans les deux sens. En revanche, avec CSS, vous ne pouvez aller que du nœud parent aux nœuds enfants, ce qui est connu sous le nom de flux unidirectionnel.
Comme nous l'avons vu dans les sections précédentes, XPath est plus difficile à maintenir et n'est pas un bon candidat pour une lisibilité efficace. D'autre part, bien que XPath puisse fonctionner dans les anciens navigateurs, le rendu diffère d'un navigateur à l'autre.
C'est pourquoi, à cet égard, le CSS a l'avantage.
XPATH se distingue par le fait que CSS ne peut aller des parents vers les enfants que dans des domaines spécifiques tels que la traversée de l'arbre DOM. En ce qui concerne la vitesse, CSS a l'avantage.
Cependant, la différence de vitesse entre XPath et CSS ne compte pas beaucoup lorsqu'il s'agit d'effectuer du web scraping. Il y a d'autres facteurs à prendre en compte, comme la latence du réseau.
CSS serait votre premier choix en ce qui concerne Beautiful Soup, car il ne prend pas en charge XPath.
Il n'y a pas de réponse précise à la question de savoir quels sélecteurs utiliser pour votre projet de web scraping. Comme vous l'avez découvert dans cet article, le XPath a l'avantage dans certaines situations, tandis que le CSS se distingue dans d'autres.
Par conséquent, vous devez prendre en compte des points essentiels spécifiques tels que la traversée, le support du navigateur et certaines des capacités techniques dont nous avons parlé. Nous espérons que vous mettrez en pratique ce que vous avez appris et que vous resterez à l'écoute pour d'autres articles.