undefined

Qu'est-ce que XPath et comment l'utiliser dans Octoparse ?

Monday, April 25, 2022 3:03 PM

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 au premier abord, 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 en créant des tâches exactes et précises.

 

1. Qu'est-ce que XPath ?

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

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

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

5. 4 étapes simples pour corriger votre XPath

 

 

1. Qu'est-ce que XPath


XPath ( langage de XML Path ) est un langage de requête 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. Il peut être facilement compris 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. 

HTML comporte différents niveaux d'éléments, tout comme un arbre. Dans cet exemple, le niveau 1 est librairie et le niveau 2 est livre. Le titre, l'auteur, l'année, le prix sont tous de niveau 3.

Le texte avec des crochets (<bookstore>) s'appelle une étiquette. Un élément HTML consiste généralement en une étiquette de début et une étiquette de fin, le contenu s'insérant entre les deux.

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

 

XPath utilise "/" pour connecter des tags 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 dossier 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 les éléments de la page rapidement et facilement, tout comme vous trouvez un fichier sur votre ordinateur.

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, quel que soit son position absolu dans le HTML, puis descend d'un niveau pour trouver l'élément cible author. 

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


Extraire des pages Web avec Octoparse consiste en fait à extraire des éléments dans des documents HTML. XPath est utilisé pour localiser les éléments cibles dans la documentation. 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 êtes confronté à des problèmes tels que des données manquantes, une boucle infinie, des données incorrectes, des données en double, 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 couvrir 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 concernant un élément et il est toujours spécifié dans la balise de début de l'élément. 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>.

 

Un attribut se présente  sous forme de nom/valeur

 

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 de début et la balise de fin 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>.

 

un ou plusieurs éléments HTML sont compris dans un élément

 

 

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 <span> qui sont  mis en retrait sous l'élément <div>

 

Voyons quelques cas d'utilisation communs !

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

inspecter le bouton Page suivante dans HTML de près

Dans ce cas, nous pouvons utiliser soit un 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 : allez à 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" ressemble à 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

Basé sur l'observation, nous pouvons utiliser contains(@attribute) 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 à la localisation 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 arriver cela. Remarquez comment l'élément <div> contenant l'adresse réelle se trouve toujours sous 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'une façon de positionner un élément dans le texte HTML. C'est vrai 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. 

table xpath expression

tabel de l'expression utile pour xpath

 

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


Nous avons étudié comment écrire un XPath lorsque vous voulez extraire un élément d'une page Web directement. Il arrive cependant que vous deviez 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, celui qui 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 champs XPath.

il-y-en-a-deux-champs-xpath-dans-Octoparse

 

 

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

Note : Xpath absolu dans Octoparse est différent de celui ci-dessus. Ce Xpath absolu signifie que les données que vous avez extraites sont celles de l'ensemble du site web plutôt que celles de la boucle, et peuvent également être concises comme "//h1[@class="..."]/span[2]...", plutôt que compliquées "/html/body/div/div/div/div/div/span/span...".

Conseil : vous pouvez également vérifier facilement le type XPath et l'élément XPath en passant la visualisation des données en mode d'affichage vertical.

 

vérifier facilement le type XPath et l'élément XPath

 

 

XPath relatif est utilisé lorsque nous extrayons des données d'un élément de 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 l'élément 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  XPath //ul[@class="results"]/li pour localiser la liste. 

Supposons que l'XPath d'un élément de la liste soit //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 faciliter 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 l'élément de 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 lorsque l’XPath de la liste de boucles et l‘XPath relatif sont combinés en un seul XPath, vous avez exactement l‘XPath de l'élément.

5. 4 étapes simples pour corriger votre XPath


Première étape :

Ouvrez 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, inspectez 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. En utilisant l'aide XPath, vous pouvez toujours tester pour voir si l'XPath réécrit fonctionne correctement.

 

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

Étape 4 :

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

 

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

Plus de tutoriels étape par étape :

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Nous utilisons des cookies pour améliorer votre expérience de navigation. Découvrez comment nous utilisons les cookies et comment vous pouvez les contrôler en cliquant sur les paramètres des cookies. Si vous continuez à utiliser ce site, vous consentez à notre utilisation des cookies.
Accepter Rejeter