Toutes les collections
Outils avancés
XPath & Regular Expression
Qu'est-ce que XPath et comment l'utiliser dans Octoparse ?
Qu'est-ce que XPath et comment l'utiliser dans Octoparse ?

Ce tutoriel va vous expliquer c'est quoi Xpath et comment le modifier.

Mis à jour il y a plus d’une semaine

XPath joue un rôle important lorsque vous utilisez Octoparse pour collecter des données. La réécriture de XPath peut vous aider à traiter les pages manquantes, les données manquantes ou les doublons, etc. Même si XPath peut sembler intimidant à la première vue, il ne doit pas l'être.

Dans cet article, je vais vous présenter brièvement XPath et, surtout, vous montrer comment l'utiliser pour récupérer les données dont vous avez besoin.

1. Qu'est-ce que XPath


XPath ( langage de XML Path ) est un langage de requête utilisé pour sélectionner des éléments dans un document XML/HTML. Il peut vous aider à trouver un élément dans l'ensemble du document de manière précise et rapide.

Les pages Web sont généralement écrites en langage appelé HTML. Si vous chargez une page Web dans un navigateur (Chrome, Firefox, etc.), vous pouvez facilement accéder au document HTML correspondant en appuyant sur la touche F12. Tout ce que vous voyez sur la page web peut être trouvé dans le HTML, tel qu'une image, des blocs de texte, des liens, des menus, etc.

XPath est le langage le plus fréquemment utilisé quand les gens ont besoin de localiser un élément dans un document HTML. Simplement, il est considéré comme le "chemin" pour trouver l'élément désiré dans le document HTML.

Pour mieux expliquer comment XPath fonctionne. Voici un exemple.

Cette image montre une partie d'un document HTML.

  • Structure d'arbre

Ayant la même structure comme un arbre, le HTML comporte différents niveaux d'éléments. Dans cet exemple, le niveau 1 est bookstore, le niveau 2 est book. Ttitle, year, price sont tous de niveau 3.

  • Balise

Le texte avec des crochets (<bookstore>) s'appelle une balise. D'une manière générale, un élément HTML consiste en une balise ouvrante et une balise fermante et le contenu qui est inséré entrer les deux.

<balise>Le contenu s'insère ici...</balise>

  • "/"

XPath utilise "/" pour connecter des balises de différents niveaux, de haut en bas, afin de spécifier la location d'un élément.

Pour notre exemple, si nous voulons localiser l'élément "author", le XPath serait le suivant :

/bookstore/book/author

Si vous avez des difficultés à comprendre comment cela fonctionne, réfléchissez à ce que nous faisons pour trouver un fichier particulier sur notre ordinateur.

Pour trouver le fichier nommé "author", le chemin exact est : \bookstore\book\author

Cela vous rappelle quelque chose ?

Chaque fichier sur l'ordinateur a son propre chemin, il en va de même pour les éléments d'une page Web. Avec XPath, vous pouvez trouver un élément de la page rapidement et facilement, tout comme vous trouvez un fichier sur votre ordinateur.

  • XPath absolu

Le XPath qui commence à partir de l'élément racine (l'élément le plus haut dans le document) et passe par tous les éléments intermédiaires jusqu'à l'élément cible s'appelle un XPath absolu.

Exemple :

/html/body/div/div/div/div/div/div/div/span/span...

Le chemin absolu peut être long et confus, donc pour simplifier XPath absolu, nous pouvons utiliser "//" pour référencer l'élément avec lequel nous voulons commencer le XPath (également connu en tant que XPath court).

Par exemple, le XPath court pour /bookstore/book/author peut être écrit //book/author. Ce XPath court recherche l'élément book, quelle que soit son position absolue dans le HTML, puis descend d'un niveau pour trouver l'élément cible author.


2. Pourquoi vous devriez connaître XPath lorsque vous utilisez Octoparse ?


Extraire des pages Web avec Octoparse consiste en fait à extraire des éléments depuis des documents HTML. XPath est utilisé pour localiser les éléments cibles dans le document.

Prenons l'exemple de l'action de pagination.

Après avoir sélectionné le bouton suivant pour créer l'action de pagination, Octoparse génère un XPath pour localiser le bouton suivant, afin de savoir sur quel bouton cliquer.

XPath aide le crawler à cliquer sur le bouton exacte ou à extraire les données cibles. Toute action qu'Octoparse doit effectuer est basée sur le XPath sous-jacent. Octoparse peut générer des XPaths automatiquement, mais ces derniers ne fonctionnent pas toujours correctement. C'est pourquoi nous devons apprendre à réécrire XPath.

Lorsque vous rencontrez des problèmes tels que des données manquantes, une boucle qui ne finit pas, des données incorrectes, des données dupliquées, un bouton suivant qui n'est pas cliqué, etc., il y a de grandes chances que vous puissiez résoudre ces problèmes facilement en réécrivant le XPath.


3. Comment écrire un XPath ( feuille de triche incluse)

Avant de commencer à écrire un XPath, nous allons d'abord voir quelques termes clés.

Voici un exemple de HTML que nous allons utiliser pour la démonstration.

Attribut / Valeur

Un attribut fournit des informations supplémentaires d'un élément et il est toujours spécifié dans la balise ouvrante. Un attribut se présente généralement sous forme de nom/valeur, par exemple : name="valeur". Certains des attributs les plus courants sont href, title, style, src, id, class, etc.

Vous pouvez trouver la référence complète des attributs HTML ici.

Dans notre exemple, id="book" est l'attribut de l'élément <div> et class="book_name" est l'attribut de l'élément <span>.

Parent/child/sibling

Quand un ou plusieurs éléments HTML sont compris dans un élément, l'élément qui contient les autres éléments est considéré comme le parent, et l'élément contenu est un enfant du parent. Chaque élément n'a qu'un seul parent, mais il peut avoir zéro, un ou plusieurs enfants. Les enfants se trouvent entre la balise ouvrante et la balise fermante du parent.

Dans notre exemple, l'élément <body> est le parent des éléments <h1> et <div>. Les éléments <h1> et <div> sont des enfants de l'élément <body>.

L’élément <div>est le parent des deux éléments <span>. Les éléments <span> sont les enfants de l’élément <div>.

L’élément divest le parent des deux éléments span

Les éléments qui ont le même parent sont appelés des éléments frères et sœurs. L'élément <h1> et l'élément<div> sont des frères et sœurs parce qu'ils ont le même parent <body>.

Les éléments qui ont le même parent sont appelés frères et sœurs.

Les deux éléments <span>, qui sont tous deux mis en retrait sous l'élément <div>, sont également des frères et sœurs.

Les deux éléments  qui sont  mis en retrait sous l'élément

Voyons quelques cas d'utilisation fréquents !


Écrire un XPath pour localiser le bouton Page suivante


Nous allons d'abord devoir inspecter de près le bouton Page suivante dans HTML. Dans l'exemple HTML ci-dessous, il y a deux choses surlignées. Premièrement, il y a un attribut de titre dont la valeur est "Next" et deuxièmement, le contenu "Next".

inspecter le bouton Page suivante dans HTML de près

Dans ce cas, nous pouvons utiliser soit l'attribut de titre, soit le texte du contenu pour localiser le bouton Page suivante dans le HTML.

L'XPath qui localise l'élément <a> qui a un atribut de titre avec la valeur "Next" ressemblerait à ceci :

//a[@title="Next"]

Ce XPath signifie : aller à l'élément <a> dont l'attribut de titre est "Next". Le symbole @ est utilisé dans le XPath pour localiser un attribut.

Par ailleurs, le XPath qui localise l'élément <a> dont le contenu comprend "Next" est comme ceci :

//a[contains(text(), "Next")]

Ce XPath signifie qu'il faut aller à l'élément <a> dont le contenu contient le texte "Next".

Vous pouvez également utiliser l'attribut de titre et le texte contextuel pour écrire le XPath.

//a[@title="Next" and contains(text(), "Next")]

Ce XPath signifie, aller à l'élément ou aux éléments <a> qui ont un attribut de titre avec la valeur "Next" et dont le contenu contient le texte "Next".


Écrire un XPath pour localiser un élément de boucle


Pour localiser une liste d'éléments sur une page Web, il est important de rechercher le modèle parmi les éléments de la liste. Les éléments d'une même liste partagent généralement des attributs identiques ou similaires.

Dans l'exemple HTML ci-dessous, nous constatons que tous les éléments <li> ont des attributs de class similaires.

Les éléments d'une même liste partagent généralement des attributs identiques ou similaires

Par conséquent, nous pouvons utiliser contains(@attribut) pour localiser tous les éléments de la liste.

//li[contains(@class,"product_item")]

Ce XPath signifie, aller à l'élément ou aux éléments <li> dont l'attribut de classe contient "produit_item".


Écrire un XPath pour localiser des champs de données

La localisation d'un champ de données particulier est très similaire à celle du bouton Page suivante en utilisant text() ou l'attribut.

comment localiser un champ de données particulier ?

Imaginons que nous voulions écrire un XPath qui localise l'adresse dans l'exemple HTML ci-dessus. Nous pouvons utiliser l'attribut global itemprop qui a la valeur "address" pour localiser l'élément particulier.

//div[@itemprop=”address”]

Ce XPath signifie qu'il faut aller à l'élément <div> dont l'attribut itemprop contient la valeur "address".

Il y a une autre façon pour faire cela.

On peut voir clairement que l'élément <div> contenant l'adresse réelle se trouve toujours au-dessous de son élément <div> frère, un élément qui contient le contenu "Location :". Donc, nous pouvons d'abord localiser le texte " Location ", puis sélectionner le premier élément frère qui le suit.

//div[contains(text(),”Location”)]/following-sibling::div[1]

Ce XPath signifie qu'il faut aller à l'élément <div> dont le contenu contient "Location", puis aller à son premier élément <div> frère.

Maintenant, vous avez peut-être déjà remarqué qu'il y a en fait plus d'un méthode de positionner un élément dans le texte HTML. C'est vrai qu'il y a toujours plus d'un chemin pour arriver à une destination. La solution consiste à utiliser la balise, les attributs, le texte du contenu, les frères et sœurs, le parent, tout ce qui peut vous aider à localiser l'élément désiré dans le texte HTML.

Pour vous faciliter la tâche, voici un aide-mémoire des expressions XPath utiles pour vous aider à localiser rapidement les éléments dans le texte HTML.

Expression

Example

Meaning

*

Matches any elements

//div/*

Selects all the child element of the <div> element

@

Selects attributes

//div[@id="book"]

Selects all the <div> elements that have an "id" attribute with a value of "book"

text()

Finds elements with exact text

//span[text()="Harry Potter"]

Selects all the <span> elements whose content is exactly “Harry Potter”

contains()

Selects elements that contain a certain string

//span[contains(@class, "price")]

Selects all the <span> elements whose class attribute value contains "price"

//span[contains(text(),"Learning")]

Selects all the <span> elements whose content contains "Learning"

position()

Selects elements in a certain position

//div/span[position()=2]

//div/span[2]

Selects the second <span> element that is the child of the <div> element

//div/span[position()<3]

Selects the first 2 <span> elements that are the child of <div> element

last()

Selects the last element

//div/span[last()]

Select the last <span> element that is the child of <div> element

//div/span[last()-1]

Selects the last but one <span> element that is the child of <div> element

//div/span[position()>last()-3]

Selects the last 3 <span> elements that are the child of <div> element

not

Selects elements that are opposite to the conditions specified

//span[not(contains(@class,"price"))]

Selects all the <span> elements whose class attribute value does not contain price

//span[not(contains(text(),"Learning"))]

Selects all the <span> elements whose text does not contain "Learning".

and

Selects elements that match several conditions

//span[@class="book_name" and text()="Harry Potter"]

Selects all the <span> elements whose class attribute value is "book_name" and the text is "Harry Potter"

or

Selects elements that match one of the conditions

//span[@class="book_name" or text()="Harry Potter"]

Selects all the <span> elements whose class attribute value is "book_name" or the text is "Harry Potter"

following-sibling

Selects all siblings after the current element

//span[text()="Harry Potter"]/following-sibling::span[1]

Selects the first <span> element after the <span> element whose text is "Harry Potter"

preceding-sibling

Selects all siblings before the current element

//span[@class="regular_price"]/preceding-sibling::span[1]

Selects the first <span> element before the <span> element whose class attribute value is "regular_price"

..

Selects the parent of the current element

//div[@id="bookstore"]/..

Select the parent of the <div> element whose id attribute value is "bookstore"

|

Selects several paths

//div[@id="bookstore"] | //span[@class="regular_price"]

Selects all the <div> elements whose id attribute value is "bookstore" and all the <span> elements whose class attribute value is "regular_price".

*Notez que l'attribut et la valeur du texte sont tous sensibles à la casse.

*Pour une liste plus exhaustive des expressions XPath, voir ceci.

4. XPath absolu et XPath relatif (pour la boucle)


Nous avons appris à écrire un XPath lorsque vous voulez extraire un élément d'une page Web directement. Il arrive cependant que vous devriez d'abord établir une liste d'éléments désirés puis extraire les données de chaque élément. Par exemple, lorsque vous voulez extraire des données de pages de résultats comme celle-ci.(https://www.bestbuy.com/site/promo/tv-deals).

Dans ce cas, vous devez non seulement connaître le XPath absolu ( lequel vous utilisez pour extraire directement les éléments), mais aussi le XPath relatif à l'élément de la boucle. Ce dernier spécifie l'emplacement de l'élément de liste spécifique par rapport à la liste.


Dans Octoparse, lorsque vous modifiez le XPath d'un champ de données, vous verrez qu'il y a deux genres de XPath.

XPath absolu est utilisé lorsque nous devons extraire les données directement de la page web.

Note : Xpath absolu dans Octoparse est différent du Xpath dont on a parlé dans la première partie. Le Xpath absolu dans Octoparse signifie que la donnée à extraire est sur l'ensemble de la page, et pas dans une boucle.

XPath relatif est utilisé lorsque nous extrayons des données dans la boucle. Plus précisément, lorsque nous créons un flux de travail comme celui-ci :

on peut utiliser XPath relatif pour extraire des données d'un élément de boucle

XPath relatif dans Octoparse est une partie supplémentaire du XPath de l'élément relatif au XPath de la boucle.

XPath relatif dans Octoparse est une partie supplémentaire

Par exemple, si nous voulons créer une liste d'éléments <li> en boucle et extraire un élément contenu dans les éléments <li> individuels de la liste, nous pouvons utiliser le XPath suivant pour localiser la liste.

//ul[@class="results"]/li

L'élément de la boucle est

//ul[@class="results"]/li/div/a[@class="link"].

Donc, dans ce cas, l'XPath relatif devrait être /div/a[@class="link"]. Nous pouvons aussi simplifier ce XPath relatif en utilisant "//" pour obtenir //a[@class="link"]. Il est toujours recommandé d'utiliser "//" lors de l'écriture d'un XPath relatif, car cela rend l'expression plus précise.

Essayons de mettre en claire la relation entre les différents XPaths :


XPath de l'élément de boucle : //ul[@class="résultats"]/li
XPath de l'élément que vous voulez localiser dans la boucle de l'élément : //ul[@class="results"]/li/div/a[@class="link"]
XPath relatif à l'élément de la boucle : /div/a[@class="link"]

Nous devrions ensuite entrer l‘XPath de la boucle et l’XPath relatif comme ceci dans Octoparse :

entrer l‘XPath de l'élément de boucle et l’XPath relatif

l’XPath de la liste de boucles et l‘XPath relatif sont combinés en un seul XPath

Vous avez peut-être déjà remarqué que en combinant le XPath de la boucle et le XPath relatif, on a exactement le XPath de l'élément.


5. 4 étapes simples pour corriger votre XPath


Étape 1 :

Ouvrir la page Web à l'aide d'un navigateur avec un outil XPath (qui vous permet de voir le code HTML et de rechercher une requête XPath). Le Path Helper (une extension Chrome) est toujours recommandé si vous utilisez Chrome.

Étape 2 :

Une fois la page Web chargée, inspecter l'élément cible dans le HTML.

inspecter l'élément cible dans le HTML

Étape 3 :

Inspectez de près l'élément HTML, ainsi que les éléments à proximité. Voyez-vous quelque chose qui se démarque et qui pourrait vous aider à identifier et à localiser l'élément cible ? Peut-être un attribut de classe comme class="sku-title" ou class="sku-header" ?

Inspecter de près l'élément HTML

Utilisez la feuille de triche ci-dessus pour écrire un XPath qui sélectionne l'élément exclusivement et précisément. Votre XPath ne doit correspondre qu'au(x) élément(s) cible(s) et à rien d'autre sur l'ensemble du document HTML. Avec l'extension XPath helper, vous pouvez toujours tester pour voir si le XPath réécrit fonctionne correctement.

Votre XPath ne doit correspondre qu'au élément cible

Étape 4 :

Remplacer l'XPath généré automatiquement dans Octoparse.

Remplacez l'XPath généré automatiquement dans Octoparse


6. Tutoriels de dépannage Xpath

Dans la plupart des cas, vous n'avez pas besoin d'écrire le XPath vous-même. Mais dans certaines situations, il peut être nécessaire d'effectuer quelques modifications pour réaliser une récupération plus précise.

Problèmes avec la boucle

Problèmes avec la pagination

Problèmes avec les champs de données


7. Outils de Xpath

Il n'est pas facile de vérifier le code HTML directement dans Octoparse, nous devons donc utiliser d'autres outils pour nous aider à générer un XPath.

  • Chrome/tout navigateur

Vous pouvez obtenir un XPath pour un élément facilement avec n'importe quel navigateur.

Prenons l'exemple de Chrome

  1. Ouvrez la page web dans Chrome

  2. Faites un clic droit sur l'élément dont vous voulez trouver le XPath

  3. Choisissez "inspecter" et vous verrez Chrome DevTools

  4. Cliquez avec le bouton droit de la souris sur la zone en surbrillance de la console.

  5. Allez dans Copier -> Copier XPath

    14.png

    Mais le XPath copié est parfois un XPath absolu lorsqu'il n'y a pas d'attribut ou que la valeur de l'attribut est trop longue. Il se peut que vous deviez encore écrire le XPath correct.

  • Xpath helper

XPath Helper est une superbe extension chrome qui vous permet de consulter XPath en survolant simplement l'élément dans le navigateur. Vous pouvez également éditer la requête XPath directement dans la console. Vous obtiendrez le(s) résultat(s) immédiatement, ce qui vous permettra de savoir si votre XPath fonctionne correctement ou non.

Avez-vous trouvé la réponse à votre question ?