Localisation des éléments par des sélecteurs CSS avec sélénium
Conditions préalables:
Pour essayer les commandes et les exemples de cet article, vous devez avoir,
1) Une distribution Linux (de préférence Ubuntu) installée sur votre ordinateur.
2) Python 3 installé sur votre ordinateur.
3) PIP 3 installé sur votre ordinateur.
4) Python virtualv Package installé sur votre ordinateur.
5) Mozilla Firefox ou Google Chrome Web Browsers installé sur votre ordinateur.
6) 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 avec Python 3 à Linuxhint.com.
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-CSS-Selector / comme suit:
$ MKDIR -PV Selenium-CSS-Selector / DriversAccédez à la sélénium-CSS-Selector / Répertoire de projet comme suit:
$ CD Selenium-CSS-Selector /Créez un environnement virtuel Python dans le répertoire de projet comme suit:
$ virtualenv .venvActivez l'environnement virtuel comme suit:
$ source .Venv / bin / ActiverInstallez 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 avec Python 3. Si vous avez besoin d'aide, recherchez sur Linuxhint.com pour cet article.
Obtenez le sélecteur CSS à l'aide de Chrome Developer Tool:
Dans cette section, je vais vous montrer comment trouver le sélecteur CSS 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 CSS à 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 tabulation Outil de développeur chromé Comme vous pouvez le voir dans la capture d'écran ci-dessous.
Pour obtenir le sélecteur CSS 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 > Sélecteur de copie comme marqué dans la capture d'écran ci-dessous.
J'ai collé le sélecteur CSS dans un éditeur de texte. Le sélecteur CSS a l'air comme indiqué dans la capture d'écran ci-dessous.
Obtenez le sélecteur CSS à l'aide de Firefox Developer Tool:
Dans cette section, je vais vous montrer comment trouver le sélecteur CSS 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 CSS à 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 CSS 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 > Sélecteur CSS comme marqué dans la capture d'écran ci-dessous.
Le sélecteur CSS de votre élément souhaité devrait ressembler à quelque chose comme ça.
Extraction de données à l'aide du sélecteur CSS avec sélénium:
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 CSS avec la bibliothèque Selenium Python.
Tout d'abord, créez un nouveau script python ex00.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_css_selector ('h3.Texte-danger: nième enfant (3) ')
Imprimer ('Timestamp actuel:% S'% (horodatage.texte.Split (") [0]))
navigateur.fermer()
Une fois que vous avez terminé, enregistrez le ex00.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 active le 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 a les données d'horodatage de la page à l'aide du sélecteur CSS et les stocke dans le horodatage variable.
Ligne 13 analyse les données horodatrices de l'élément et les imprime sur la console.
C'est ainsi que la structure HTML des données d'horodatage Unix dans Unixtimestamp.com ressemble à.
La ligne 14 ferme le navigateur.
Exécutez le script Python ex00.py comme suit:
$ python3 ex00.pyComme vous pouvez le voir, les données d'horodatage sont imprimées à l'écran.
Ici, j'ai utilisé le navigateur.find_element (par, sélecteur) méthode.
Comme nous utilisons les sélecteurs CSS, le premier paramètre sera Par.CSS_Selector et le deuxième paramètre sera le sélecteur CSS lui-même.
Au lieu de navigateur.find_element () Méthode, vous pouvez également utiliser navigateur.find_element_by_css_selector (sélecteur) méthode. Cette méthode n'a besoin que d'un sélecteur CSS pour fonctionner. Le résultat sera le même.
Le navigateur.find_element () et navigateur.find_element_by_css_selector () Des méthodes sont utilisées pour trouver et sélectionner un seul élément dans la page Web. Si vous souhaitez trouver et sélectionner plusieurs éléments à l'aide des sélecteurs CSS, vous devez utiliser navigateur.find_elements () et navigateur.find_elements_by_css_selector () méthodes.
Le navigateur.find_elements () la méthode prend les mêmes arguments que le navigateur.find_element () méthode.
Le navigateur.find_elements_by_css_selector () la méthode prend le même argument que le navigateur.find_element_by_css_selector () méthode.
Voyons un exemple d'extraction d'une liste de noms à l'aide de sélecteurs CSS à partir du générateur de noms aléatoires.Info avec sélénium.
Comme vous pouvez le voir, la liste non ordonnée a le nom de classe liste de nom. Ainsi, nous pouvons utiliser le sélecteur CSS .Namelist Li Pour sélectionner tous les noms de la page Web.
Passons un exemple de sélection de plusieurs éléments dans la page Web à l'aide de sélecteurs CSS.
Créer un nouveau script Python ex01.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 (par.CSS_Selector, '.Namelist li ')
pour le nom dans les noms:
imprimer (nom.texte)
navigateur.fermer()
Une fois que vous avez terminé, enregistrez le ex01.py Script python.
La ligne 1-8 est la même que dans ex00.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 () méthode. Cette méthode utilise le sélecteur CSS .Namelist 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 ex01.py comme suit:
$ python3 ex01.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 () Méthode, vous pouvez également utiliser le navigateur.find_elements_by_css_selector () la méthode comme avant. Cette méthode n'a besoin que d'un sélecteur CSS pour fonctionner. Le résultat sera le même.
Bases des sélecteurs CSS:
Vous pouvez toujours trouver le sélecteur CSS d'un élément de page Web à l'aide de l'outil de développeur de Firefox ou Chrome Web Browser. Ce sélecteur CSS généré automatiquement n'est peut-être pas ce que vous voulez. Parfois, vous devrez peut-être écrire votre sélecteur CSS.
Dans cette section, je vais parler des bases des sélecteurs CSS afin que vous puissiez comprendre ce qu'un certain sélecteur CSS sélectionne dans une page Web et écrire votre sélecteur CSS personnalisé si nécessaire.
Si vous souhaitez sélectionner un élément dans la page Web à l'aide de l'ID message, Le sélecteur CSS sera #message.
Le sélecteur CSS .vert sélectionnera un élément à l'aide d'un nom de classe vert.
Si vous souhaitez sélectionner un élément (classe msg) à l'intérieur d'un autre élément (classe récipient), le sélecteur CSS sera .récipient .msg
Le sélecteur CSS .msg.succès sélectionnera l'élément qui a deux classes CSS msg et succès.
Pour sélectionner tous les p Tags, vous pouvez utiliser le sélecteur CSS p.
Pour sélectionner uniquement le p Tags à l'intérieur du div Tags, vous pouvez utiliser le sélecteur CSS div p
Pour sélectionner le p Tags qui sont les frères et sœurs directs du div Tags, vous pouvez utiliser le sélecteur CSS div> p
Pour sélectionner tous les portée et p Tags, vous pouvez utiliser le sélecteur CSS P, Span
Pour sélectionner le p Tag immédiatement après le div Tag, vous pouvez utiliser le sélecteur CSS div + p
Pour sélectionner le p Tag après le div Tag, vous pouvez utiliser le sélecteur CSS div ~ p
Pour sélectionner tous les p Tags qui ont le nom de classe msg, vous pouvez utiliser le sélecteur CSS p.msg
Pour sélectionner tous les portée Tags qui ont le nom de classe msg, vous pouvez utiliser le sélecteur CSS portée.msg
Pour sélectionner tous les éléments qui ont l'attribut href, vous pouvez utiliser le sélecteur CSS [href]
Pour sélectionner l'élément qui a l'attribut nom et la valeur du nom L'attribut est nom d'utilisateur, vous pouvez utiliser le sélecteur CSS [name = ”nom d'utilisateur"]
Pour sélectionner tous les éléments qui ont l'attribut alt et la valeur du alt attribut contenant la sous-chaîne vscode, vous pouvez utiliser le sélecteur CSS [alt ~ = ”vscode”]
Pour sélectionner tous les éléments qui ont le href attribut et la valeur du href L'attribut commence par la chaîne https, vous pouvez utiliser le sélecteur CSS [href ^ = ”https”]
Pour sélectionner tous les éléments qui ont le href attribut et la valeur du href l'attribut se terminant par la chaîne .com, vous pouvez utiliser le sélecteur CSS [href $ = ”.com ”]
Pour sélectionner tous les éléments qui ont le href attribut et la valeur du href L'attribut a la sous-chaîne Google, vous pouvez utiliser le sélecteur CSS [href * = ”google”]
Si vous souhaitez sélectionner le premier li Tag à l'intérieur du ul Tag, vous pouvez utiliser le sélecteur CSS UL LI: Premier enfant
Si vous souhaitez sélectionner le premier li Tag à l'intérieur du ul Tag, vous pouvez également utiliser le sélecteur CSS UL LI: nième enfant (1)
Si vous souhaitez sélectionner le dernier li Tag à l'intérieur du ul Tag, vous pouvez utiliser le sélecteur CSS UL LI: Last-Child
Si vous souhaitez sélectionner le dernier li Tag à l'intérieur du ul Tag, vous pouvez également utiliser le sélecteur CSS UL LI: nième-child (1)
Si vous souhaitez sélectionner la seconde li Tag à l'intérieur du ul Tag à partir du début, vous pouvez utiliser le sélecteur CSS UL LI: nième enfant (2)
Si vous souhaitez sélectionner le troisième li Tag à l'intérieur du ul Tag à partir du début, vous pouvez utiliser le sélecteur CSS UL LI: nième enfant (3)
Si vous souhaitez sélectionner la seconde li Tag à l'intérieur du ul Tag à partir de la fin, vous pouvez utiliser le sélecteur CSS UL LI: nième-child (2)
Si vous souhaitez sélectionner le troisième li Tag à l'intérieur du ul Tag à partir de la fin, vous pouvez utiliser le sélecteur CSS UL LI: nième-child (3)
Ce sont les sélecteurs CSS les plus courants. Vous vous retrouverez à les utiliser presque sur tous les projets de sélénium. Il y a beaucoup plus de sélecteurs CSS. Vous pouvez trouver une liste de tous dans les W3Schools.Référence des sélecteurs com CSS.
CNClusion:
Dans cet article, j'ai montré comment localiser et sélectionner des éléments de page Web à l'aide de sélecteurs CSS avec sélénium. J'ai également discuté des bases des sélecteurs CSS. Vous devriez pouvoir utiliser confortablement les sélecteurs CSS pour vos projets de sélénium.