Choisir le bon sélecteur pour le Web Scraping : CSS ou XPath
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 été très populaire 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.
Do you know which is the correct selector to use in web scraping? Web scraping has been quite popular in the recent decade to extract data from the internet. It helps businesses acquire and analyze data to make better business decisions. Thanks to automated technologies, web scraping has never been easier than it is now.
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.
Qu'est-ce qu'un sélecteur XPath ?
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.
Qu'est-ce qu'un nœud ?
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.
- Element node – These are the major tags in an HTML document. For instance, in our example, the elements nodes are <title>,<meta>,<body>,<h1>,<p>,<ul>,and <li>.
- Attribute node – You can provide elements nodes with properties to give them unique names or apply CSS styles. In this example, we have provided the <ul> element with attributes “id” and “class”. More on ids and classes later.
- Atomic values – these are the values that are inside the node elements. Over here, the atomic values are the text inside the <title>, <h1>,<p> and each of the three <li> elements.
Si les trois premiers sont les plus importants, il est également essentiel de connaître les quatre suivants, à titre d'information.
- Namespace: Since XPath also deals with XML documents, it is a standard that specifies how you can use elements and attributes. It is identified by URI (Uniform Resource Identifier). For the latest HTML 5 version, you can set the namespace like this: <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>.
- Commentaires : Il s'agit de la partie des commentaires d'un document HTML ou XML que le compilateur ou l'analyseur ne traite pas.
- Process instruction: As with the case of HTML documents, they are the nodes that link external files such as CSS and JavaScript files. For example, the<link> node to include CSS files and the <src> node to include JavaScript files.
- Root node: As you guessed it right, this is the topmost element of an HTML document: the <html> node.
Quelle est la relation entre les nœuds ?
- Parent: These are the root elements of the DOM tree that are precisely one level up. Each element has exactly one parent. According to our example, the parent of <li> element is <ul>.
- Children: Children nodes are exactly one level down in the DOM tree. As per our example <h1>,<p> and <ul> elements are children of the <body> element.
- Siblings: These are the elements that share the same parent. In our example, both the <li> elements are siblings of the <ul> parent. Also <h1>,<p> and <ul> are siblngs as they belong to the same parent <body>.
- Descendants: Any elements that are one level down are descendants. For instance, the <title> element is a descendant of the <head> element.
- Ancestor: Any element level up in the DOM tree is called an ancestor. In our example <li> element’s ancestors are <ul>,<body> and <html>.
Comment trouver le XPath d'un élément HTML ?
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é.
Step 1 => li[1] //Here one denotes the first li element
Step 2 => /li[1]
Step 3 => ul/li[1]
Step 4 => /ul/li[1]
Step 5 => body/ul/li[1]
Step 6 => /body/ul/li[1]
Step 7 => html/body/ul/li[1]
Step 8 => /html/body/ul/li[1]
Chemin absolu
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.
Chemin relatif
//*[@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.
La différence entre les chemins relatifs et absolus
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.
Avantages et inconvénients de XPATH
Avantages
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.
Inconvénients
Comme vous l'avez appris ci-dessus, son principal inconvénient est qu'il est plus facile à 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.
Qu'est-ce qu'un sélecteur 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.
Comment les sélecteurs CSS sont-ils créés ?
<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 :
- <h1>-selects by the element name <h1>
- #main-heading - #spécifie l'identifiant de l'élément
- .header-styles - Le point indique le nom de la classe
- [name="h1name"] - Vous pouvez spécifier les attributs entre crochets.
Vous pouvez également les combiner :
h1.header-styles-Ce sélecteur CSS sélectionne les éléments h1 avec la classe header-styles.
Sélecteurs avancés
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 :
- ul#product-list > li – selects <li> elements which are children of <ul> with id of product-list.
- ul#product-list li – selects <li> elements which are descendent of <ul> with id of product-list.
- ul#product-list + li – selects first <li> element after <ul> with id of product-list.
- ul#product-list ~ li – Selects all <li> elements after the <ul> with id of product-list.
Avantages et inconvénients de l'utilisation des sélecteurs CSS
Avantages
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.
Inconvénients
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.
Quelles sont les différences entre les sélecteurs CSS et XPath ?
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.
Que choisir entre les deux ?
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.
Conclusion
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.