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.

​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.

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.

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 :

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.

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.

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 :

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.

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.

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.

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>.

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>.

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

Voyons quelques cas d'utilisation fréquents !

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".

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 :

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 :

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.

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".

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.

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

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

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

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.

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.

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.

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

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

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 :

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

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.

L'élément de la boucle est

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 :

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.

​É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.

É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" ?

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.

Étape 4 :

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

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

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.

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

Prenons l'exemple de Chrome

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.