Utilisation de XPath et Selenium pour trouver un élément dans la page HTML
Localiser et sélectionner des éléments dans la page Web est la clé du grattage Web avec le sélénium. Pour localiser et sélectionner des éléments dans la page Web, vous pouvez utiliser des sélecteurs XPath en sélénium.
Dans cet article, je vais vous montrer comment localiser et sélectionner des éléments des pages Web à l'aide de sélecteurs XPath en sélénium avec la bibliothèque de Selenium Python. Alors, commençons.
Conditions préalables:
Pour essayer les commandes et les exemples de cet article, vous devez avoir,
- Une distribution Linux (de préférence Ubuntu) installée sur votre ordinateur.
- Python 3 installé sur votre ordinateur.
- PIP 3 installé sur votre ordinateur.
- Python virtualv Package installé sur votre ordinateur.
- Mozilla Firefox ou Browsers Web Google Chrome installé sur votre ordinateur.
- Doit savoir comment installer le pilote Firefox Gecko ou le pilote Web Chrome.
Pour répondre aux exigences 4, 5 et 6, lisez mon article Introduction au sélénium dans Python 3. Vous pouvez trouver de nombreux articles sur les autres sujets sur Linuxhint.com. Assurez-vous de les vérifier si vous avez besoin d'aide.
Configuration d'un répertoire de projet:
Pour garder tout organisé, créez un nouveau répertoire de projet sélénium-xpath / comme suit:
$ mkdir -pv selenium-xpath / pilotes
Accédez à la sélénium-xpath / Répertoire de projet comme suit:
$ cd sélénium-xpath /
Créez un environnement virtuel Python dans le répertoire de projet comme suit:
$ virtualenv .venv
Activez l'environnement virtuel comme suit:
$ source .Venv / bin / Activer
Installez la bibliothèque Selenium Python à l'aide de PIP3 comme suit:
$ pip3 installer le séléniumTéléchargez et installez tout le pilote Web requis dans le Conducteurs/ Annuaire du projet. J'ai expliqué le processus de téléchargement et d'installation de pilotes Web dans mon article Introduction au sélénium dans Python 3.
Obtenez le sélecteur XPATH à l'aide de Chrome Developer Tool:
Dans cette section, je vais vous montrer comment trouver le sélecteur XPath de l'élément de page Web que vous souhaitez sélectionner avec Selenium en utilisant l'outil de développeur intégré du navigateur Web Google Chrome.
Pour obtenir le sélecteur XPATH à l'aide du navigateur Web Google Chrome, ouvrez Google Chrome et visitez le site Web à partir duquel vous souhaitez extraire des données. Ensuite, appuyez sur le bouton de souris droit (RMB) sur une zone vide de la page et cliquez sur Inspecter Pour ouvrir le Outil de développeur chromé.
Vous pouvez également appuyer + Changement + je Pour ouvrir le Outil de développeur chromé.
Outil de développeur chromé devrait être ouvert.
Pour trouver la représentation HTML de l'élément de page Web souhaité, cliquez sur le Inspecter(
) icône, comme marqué dans la capture d'écran ci-dessous.
Ensuite, survolez l'élément de page Web souhaité et appuyez sur le bouton gauche de la souris (LMB) pour le sélectionner.
La représentation HTML de l'élément Web que vous avez sélectionné sera mise en évidence dans le Éléments Onglet du Outil de développeur chromé, Comme vous pouvez le voir dans la capture d'écran ci-dessous.
Pour obtenir le sélecteur XPATH de votre élément souhaité, sélectionnez l'élément dans le Éléments tabulation Outil de développeur chromé et cliquez avec le bouton droit sur elle. Ensuite, sélectionnez Copie > Copier XPATH, comme marqué dans la capture d'écran ci-dessous.
J'ai collé le sélecteur XPATH dans un éditeur de texte. Le sélecteur XPATH ressemble comme indiqué dans la capture d'écran ci-dessous.
Obtenez le sélecteur XPATH à l'aide de Firefox Developer Tool:
Dans cette section, je vais vous montrer comment trouver le sélecteur XPath de l'élément de page Web que vous souhaitez sélectionner avec Selenium en utilisant l'outil de développeur intégré du navigateur Web Mozilla Firefox.
Pour obtenir le sélecteur XPATH à l'aide du navigateur Web Firefox, ouvrez Firefox et visitez le site Web à partir duquel vous souhaitez extraire des données. Ensuite, appuyez sur le bouton de souris droit (RMB) sur une zone vide de la page et cliquez sur Inspecter l'élément (Q) Pour ouvrir le Outil de développeur Firefox.
Outil de développeur Firefox devrait être ouvert.
Pour trouver la représentation HTML de l'élément de page Web souhaité, cliquez sur le Inspecter(
) icône, comme marqué dans la capture d'écran ci-dessous.
Ensuite, survolez l'élément de page Web souhaité et appuyez sur le bouton gauche de la souris (LMB) pour le sélectionner.
La représentation HTML de l'élément Web que vous avez sélectionné sera mise en évidence dans le Inspecteur tabulation Outil de développeur Firefox, Comme vous pouvez le voir dans la capture d'écran ci-dessous.
Pour obtenir le sélecteur XPATH de votre élément souhaité, sélectionnez l'élément dans le Inspecteur tabulation Outil de développeur Firefox et cliquez avec le bouton droit sur elle. Ensuite, sélectionnez Copie > Xpath comme marqué dans la capture d'écran ci-dessous.
Le sélecteur XPATH de votre élément souhaité devrait ressembler à quelque chose comme ça.
Extraction des données des pages Web à l'aide du sélecteur XPATH:
Dans cette section, je vais vous montrer comment sélectionner des éléments de page Web et en extraire des données à l'aide de sélecteurs XPath avec la bibliothèque Selenium Python.
Tout d'abord, créez un nouveau script python ex01.py et saisir les lignes de codes suivantes.
à partir de Selenium Import WebDriverde sélénium.webdriver.commun.Clés Import les clés
de sélénium.webdriver.commun.par importation par
Options = webDriver.ChromeOptions ()
options.sans tête = vrai
navigateur = webdriver.Chrome (exécutable_path = "./ pilotes / chromedriver ",
Options = options)
navigateur.get ("https: // www.Unixtimestamp.com / ")
horodatage = navigateur.find_element_by_xpath ('/ html / body / div [1] / div [1]
/ div [2] / div [1] / div / div / h3 [2] ')
Imprimer ('Timestamp actuel:% S'% (horodatage.texte.Split (") [0]))
navigateur.fermer()
Une fois que vous avez terminé, enregistrez le ex01.py Script python.
Ligne 1 à 3 importe tous les composants de sélénium requis.
La ligne 5 crée un objet Chrome Options et la ligne 6 permet un mode sans tête pour le navigateur Web Chrome.
La ligne 8 crée un chrome navigateur objet en utilisant le chromedriver binaire du Conducteurs/ Annuaire du projet.
La ligne 10 indique au navigateur de charger le site Web Unixtimestamp.com.
La ligne 12 trouve l'élément qui possède les données d'horodatage de la page à l'aide du sélecteur XPATH et les stocke dans le horodatage variable.
Ligne 13 analyse les données horodatrices de l'élément et les imprime sur la console.
J'ai copié le sélecteur xpath du marqué h2 élément de Unixtimestamp.com Utilisation de l'outil de développeur Chrome.
La ligne 14 ferme le navigateur.
Exécutez le script Python ex01.py comme suit:
$ python3 ex01.pyComme vous pouvez le voir, les données d'horodatage sont imprimées à l'écran.
Ici, j'ai utilisé le navigateur.find_element_by_xpath (sélecteur) méthode. Le seul paramètre de cette méthode est le sélecteur, qui est le sélecteur xpath de l'élément.
Au lieu de navigateur.find_element_by_xpath () Méthode, vous pouvez également utiliser navigateur.find_element (par, sélecteur) méthode. Cette méthode a besoin de deux paramètres. Le premier paramètre Par sera Par.Xpath Comme nous utiliserons le sélecteur XPATH et le deuxième paramètre sélecteur sera le sélecteur xpath lui-même. Le résultat sera le même.
Pour voir comment navigateur.find_element () La méthode fonctionne pour le sélecteur XPATH, créez un nouveau script python ex02.py, copier et coller toutes les lignes de ex01.py pour ex02.py et changer ligne 12 comme marqué dans la capture d'écran ci-dessous.
Comme vous pouvez le voir, le script Python ex02.py donne le même résultat que ex01.py.
$ Python3 Ex02.pyLe navigateur.find_element_by_xpath () et navigateur.find_element () Les méthodes sont utilisées pour trouver et sélectionner un seul élément à partir des pages Web. Si vous souhaitez trouver et sélectionner plusieurs éléments à l'aide de sélecteurs XPath, vous devez utiliser navigateur.find_elements_by_xpath () ou navigateur.find_elements () méthodes.
Le navigateur.find_elements_by_xpath () la méthode prend le même argument que le navigateur.find_element_by_xpath () méthode.
Le navigateur.find_elements () la méthode prend les mêmes arguments que le navigateur.find_element () méthode.
Voyons un exemple d'extraction d'une liste de noms à l'aide du sélecteur XPath de générateur de noms aléatoires.Info avec la bibliothèque Selenium Python.
La liste non ordonnée (ol tag) a un 10 li Tags à l'intérieur de chacun contenant un nom aléatoire. Le xpath pour sélectionner tous les li Tags à l'intérieur du ol Le tag dans ce cas est // * [@ id = ”Main”] / div [3] / div [2] / ol // li
Passons un exemple de sélection de plusieurs éléments dans la page Web à l'aide de sélecteurs XPath.
Créer un nouveau script Python ex03.py et saisissez les lignes de codes suivantes.
à partir de Selenium Import WebDriverde sélénium.webdriver.commun.Clés Import les clés
de sélénium.webdriver.commun.par importation par
Options = webDriver.ChromeOptions ()
options.sans tête = vrai
navigateur = webdriver.Chrome (exécutable_path = "./ pilotes / chromedriver ",
Options = options)
navigateur.get ("http: // aléatoire-générateur.Info/")
noms = navigateur.find_elements_by_xpath ('
// * [@ id = "main"] / div [3] / div [2] / ol // li ')
pour le nom dans les noms:
imprimer (nom.texte)
navigateur.fermer()
Une fois que vous avez terminé, enregistrez le ex03.py Script python.
La ligne 1-8 est la même que dans ex01.py Script python. Alors, je ne vais pas les expliquer ici à nouveau.
La ligne 10 indique au navigateur de charger le site Web de nom de nom aléatoire.Info.
La ligne 12 sélectionne la liste des noms à l'aide du navigateur.find_elements_by_xpath () méthode. Cette méthode utilise le sélecteur XPATH // * [@ id = ”Main”] / div [3] / div [2] / ol // li Pour trouver la liste des noms. Ensuite, la liste des noms est stockée dans le des noms variable.
Aux lignes 13 et 14, un pour la boucle est utilisée pour itérer à travers le des noms Liste et imprimez les noms de la console.
Ligne 16 ferme le navigateur.
Exécutez le script Python ex03.py comme suit:
$ python3 ex03.pyComme vous pouvez le voir, les noms sont extraits de la page Web et imprimés sur la console.
Au lieu d'utiliser le navigateur.find_elements_by_xpath () Méthode, vous pouvez également utiliser le navigateur.find_elements () Méthode comme avant. Le premier argument de cette méthode est Par.Xpath, Et le deuxième argument est le sélecteur XPATH.
Pour expérimenter navigateur.find_elements () Méthode, créez un nouveau script python ex04.py, copier tous les codes de ex03.py pour ex04.py, et changer la ligne 12 comme marqué dans la capture d'écran ci-dessous.
Vous devriez obtenir le même résultat qu'avant.
$ python3 ex04.pyBases du sélecteur XPATH:
L'outil de développeur de Firefox ou Google Chrome Web Browser génère automatiquement le sélecteur XPATH. Mais ces sélecteurs XPath ne sont parfois pas suffisants pour votre projet. Dans ce cas, vous devez savoir ce qu'un certain sélecteur XPATH fait pour construire votre sélecteur XPATH. Dans cette section, je vais vous montrer les bases des sélecteurs XPath. Ensuite, vous devriez pouvoir construire votre propre sélecteur XPATH.
Créer un nouveau répertoire www / Dans votre répertoire de projet comme suit:
$ mkdir -v www
Créer un nouveau fichier web01.html dans le www / répertoire et saisir les lignes suivantes dans ce fichier.
Bonjour le monde
Une fois que vous avez terminé, enregistrez le web01.html déposer.
Exécutez un serveur HTTP simple sur le port 8080 à l'aide de la commande suivante:
$ python3 -m http.Serveur - Directory www / 8080Le serveur HTTP doit démarrer.
Vous devriez pouvoir accéder au web01.html Fichier à l'aide de l'URL http: // localhost: 8080 / web01.HTML, comme vous pouvez le voir dans la capture d'écran ci-dessous.
Pendant que l'outil de développeur Firefox ou Chrome est ouvert, appuyez sur + F Pour ouvrir la zone de recherche. Vous pouvez saisir votre sélecteur XPATH ici et voir ce qu'il sélectionne très facilement. Je vais utiliser cet outil tout au long de cette section.
Un sélecteur XPATH commence par un Slash vers l'avant (/) la plupart du temps. C'est comme un arbre d'annuaire Linux. Le / / est la racine de tous les éléments de la page Web.
Le premier élément est le html. Donc, le sélecteur XPATH / html sélectionne l'intégralité html étiqueter.
À l'intérieur de html Tag, nous avons un corps étiqueter. Le corps La balise peut être sélectionnée avec le sélecteur XPATH / html / corps
Le H1 l'en-tête est à l'intérieur du corps étiqueter. Le H1 L'en-tête peut être sélectionné avec le sélecteur XPATH / html / corps / h1
Ce type de sélecteur XPATH est appelé sélecteur de chemin absolu. Dans le sélecteur de chemin absolu, vous devez traverser la page Web à partir de la racine (/) de la page. L'inconvénient d'un sélecteur de chemins absolu est que même une légère modification de la structure de la page Web peut rendre votre sélecteur XPATH invalide. La solution à ce problème est un sélecteur XPATH relatif ou partiel.
Pour voir comment fonctionne le chemin relatif ou le chemin partiel, créez un nouveau fichier web02.html dans le www / répertoire et saisissez les lignes de codes suivantes.
Bonjour le monde
c'est un message
Bonjour le monde
Une fois que vous avez terminé, enregistrez le web02.html fichier et le charger dans votre navigateur Web.
Comme vous pouvez le voir, le sélecteur XPATH // div / p sélectionne le p Tag à l'intérieur du div étiqueter. Ceci est un exemple d'un sélecteur XPATH relatif.
Le sélecteur xpath relatif commence par //. Ensuite, vous spécifiez la structure de l'élément que vous souhaitez sélectionner. Dans ce cas, div / p.
Donc, // div / p signifie sélectionner le p élément à l'intérieur d'un div élément, peu importe ce qui avant.
Vous pouvez également sélectionner des éléments par différents attributs comme identifiant, classe, taper, etc. Utilisation du sélecteur XPATH. Voyons comment faire ça.
Créer un nouveau fichier web03.html dans le www / répertoire et saisissez les lignes de codes suivantes.
Bonjour le monde
c'est un message
Ceci est un autre message
En-tête 2
Lorem ipsum Dolor Sit Amet Consectetur, Adipisicing Elit. Quibusdam
Eligendi Doloribus Sapiente, Molestias Quos Quae non nam incinto quictus
facilis magni officie alias neque atque fuga? Undep, aut natus?
c'est un pied de page
Une fois que vous avez terminé, enregistrez le web03.html fichier et le charger dans votre navigateur Web.
Disons que vous souhaitez sélectionner tout le div des éléments qui ont le classe nom conteneur1. Pour ce faire, vous pouvez utiliser le sélecteur XPATH // div [@ class = 'contener1']
Comme vous pouvez le voir, j'ai 2 éléments qui correspondent au sélecteur XPATH // div [@ class = 'contener1']
Pour sélectionner le premier div élément avec le classe nom conteneur1, ajouter [1] À la fin du XPATH SELECT, comme indiqué dans la capture d'écran ci-dessous.
De la même manière, vous pouvez sélectionner la seconde div élément avec le classe nom conteneur1 Utilisation du sélecteur XPATH // div [@ class = 'contener1'] [2]
Vous pouvez sélectionner des éléments par identifiant aussi.
Par exemple, pour sélectionner l'élément qui a le identifiant de bas de page-MSG, vous pouvez utiliser le sélecteur XPATH // * [@ id = 'footer-msg']
Ici le * avant [@ id = 'pied-msg'] est utilisé pour sélectionner n'importe quel élément quelle que soit leur balise.
C'est les bases du sélecteur XPATH. Maintenant, vous devriez pouvoir créer votre propre sélecteur XPATH pour vos projets de sélénium.
Conclusion:
Dans cet article, je vous ai montré comment trouver et sélectionner des éléments des pages Web à l'aide du sélecteur XPATH avec la bibliothèque Selenium Python. J'ai également discuté des sélecteurs XPath les plus courants. Après avoir lu cet article, vous devriez vous sentir assez confiant en sélectionnant des éléments à partir des pages Web en utilisant le sélecteur XPATH avec la bibliothèque Selenium Python.