Auffinden von Elementen durch CSS-Selektoren mit Selenium

Das Auffinden und Auswählen von Elementen auf der Webseite ist der Schlüssel zum Web-Scraping mit Selenium. Zum Auffinden und Auswählen von Elementen auf der Webseite können Sie CSS-Selektoren in Selenium verwenden.In diesem Artikel zeige ich Ihnen, wie Sie Elemente von Webseiten mithilfe von CSS-Selektoren in Selenium mit der Selenium-Python-Bibliothek finden und auswählen. Also lasst uns anfangen.

Voraussetzungen:

Um die Befehle und Beispiele dieses Artikels auszuprobieren, müssen Sie,

1) Eine auf Ihrem Computer installierte Linux-Distribution (vorzugsweise Ubuntu).
2) Python 3 auf Ihrem Computer installiert.
3) PIP 3 auf Ihrem Computer installiert.
4) Python virtuelle Umgebung Paket auf Ihrem Computer installiert.
5) Mozilla Firefox- oder Google Chrome-Webbrowser, die auf Ihrem Computer installiert sind.
6) Muss wissen, wie man den Firefox Gecko-Treiber oder den Chrome Web-Treiber installiert install.

Um die Anforderungen 4, 5 und 6 zu erfüllen, lesen Sie meinen Artikel Einführung in Selenium mit Python 3 bei Linuxhint.com.

Viele Artikel zu den anderen Themen finden Sie auf LinuxHint.com. Schauen Sie sie sich an, wenn Sie Hilfe benötigen.

Einrichten eines Projektverzeichnisses:

Um alles organisiert zu halten, erstellen Sie ein neues Projektverzeichnis Selen-css-Selektor/ wie folgt:

$ mkdir -pv selenium-css-selector/drivers

Navigieren Sie zum Selen-css-Selektor/ Projektverzeichnis wie folgt:

$ cd selen-css-selektor/

Erstellen Sie eine virtuelle Python-Umgebung im Projektverzeichnis wie folgt:

$ virtualenv .venv

Aktivieren Sie die virtuelle Umgebung wie folgt:

$ Quelle .venv/bin/aktivieren

Installieren Sie die Selenium Python-Bibliothek mit PIP3 wie folgt:

$ pip3 Selen installieren

Laden Sie alle erforderlichen Webtreiber herunter und installieren Sie sie im Fahrer/ Verzeichnis des Projekts. Den Vorgang zum Herunterladen und Installieren von Webtreibern habe ich in meinem Artikel erklärt Einführung in Selenium mit Python 3. Wenn Sie Hilfe benötigen, suchen Sie auf LinuxHinweis.com für diesen Artikel.

CSS-Auswahl mit dem Chrome Developer Tool abrufen:

In diesem Abschnitt zeige ich Ihnen, wie Sie mit dem integrierten Developer Tool des Google Chrome-Webbrowsers den CSS-Selektor des Webseitenelements finden, das Sie mit Selenium auswählen möchten.

Um den CSS-Selektor mit dem Google Chrome-Webbrowser zu erhalten, öffnen Sie Google Chrome und besuchen Sie die Website, von der Sie Daten extrahieren möchten. Drücken Sie dann die rechte Maustaste (RMB) auf einen leeren Bereich der Seite und klicken Sie auf Prüfen die öffnen Chrome-Entwicklertool.

Sie können auch drücken + Verschiebung + ich die öffnen Chrome-Entwicklertool.

Chrome-Entwicklertool sollte geöffnet werden.

Um die HTML-Darstellung Ihres gewünschten Webseitenelements zu finden, klicken Sie auf das Prüfen() Symbol wie im Screenshot unten markiert.

Bewegen Sie dann den Mauszeiger über das gewünschte Webseitenelement und drücken Sie die linke Maustaste (LMB), um es auszuwählen.

Die HTML-Darstellung des von Ihnen ausgewählten Webelements wird im Elemente Registerkarte von Chrome-Entwicklertool wie Sie im Screenshot unten sehen können.

Um den CSS-Selektor Ihres gewünschten Elements zu erhalten, wählen Sie das Element aus der Elemente Registerkarte von Chrome-Entwicklertool und Rechtsklick (RMB) darauf. Wählen Sie dann Kopieren > Auswahl kopieren wie im Screenshot unten markiert.

Ich habe den CSS-Selektor in einen Texteditor eingefügt. Der CSS-Selektor sieht wie im Screenshot unten gezeigt aus.

Holen Sie sich den CSS-Selektor mit dem Firefox-Entwicklertool:

In diesem Abschnitt zeige ich Ihnen, wie Sie den CSS-Selektor des Webseitenelements finden, das Sie mit Selenium auswählen möchten, indem Sie das integrierte Developer Tool des Mozilla Firefox-Webbrowsers verwenden.

Um den CSS-Selektor mit dem Firefox-Webbrowser zu erhalten, öffnen Sie Firefox und besuchen Sie die Website, von der Sie Daten extrahieren möchten. Drücken Sie dann die rechte Maustaste (RMB) auf einen leeren Bereich der Seite und klicken Sie auf Element prüfen (Q) die öffnen Firefox-Entwicklertool.

Firefox-Entwicklertool sollte geöffnet werden.

Um die HTML-Darstellung Ihres gewünschten Webseitenelements zu finden, klicken Sie auf das Prüfen() Symbol wie im Screenshot unten markiert.

Bewegen Sie dann den Mauszeiger über das gewünschte Webseitenelement und drücken Sie die linke Maustaste (LMB), um es auszuwählen.

Die HTML-Darstellung des von Ihnen ausgewählten Webelements wird im Inspektor Registerkarte von Firefox-Entwicklertool wie Sie im Screenshot unten sehen können.

Um den CSS-Selektor Ihres gewünschten Elements zu erhalten, wählen Sie das Element aus der Inspektor Registerkarte von Firefox-Entwicklertool und Rechtsklick (RMB) darauf. Wählen Sie dann Kopieren > CSS-Selektor wie im Screenshot unten markiert.

Der CSS-Selektor Ihres gewünschten Elements sollte in etwa so aussehen.

Extrahieren von Daten mit CSS Selector mit Selenium:

In diesem Abschnitt zeige ich Ihnen, wie Sie mit CSS-Selektoren mit der Selenium-Python-Bibliothek Webseitenelemente auswählen und Daten daraus extrahieren.

Erstellen Sie zuerst ein neues Python-Skript ex00.py und geben Sie die folgenden Codezeilen ein.

vom Selen-Import-Webtreiber
aus Selen.Webtreiber.verbreitet.Schlüsselimport Schlüssel
aus Selen.Webtreiber.verbreitet.per Import
Optionen = Webtreiber.ChromeOptions()
Optionen.kopflos = wahr
Browser = Webtreiber.Chrome(executable_path="./drivers/chromedriver", options=options)
Browser.bekommen("https://www.unixtimestamp.com/")
Zeitstempel = Browser.find_element_by_css_selector('h3.Text-Gefahr:n-tes-Kind(3)')
print('Aktueller Zeitstempel: %s' % (Zeitstempel.Text.split(")[0]))
Browser.schließen()

Wenn Sie fertig sind, speichern Sie die ex00.py Python-Skript.

Zeile 1-3 importiert alle benötigten Selenium-Komponenten.

Zeile 5 erstellt ein Chrome-Optionsobjekt und Zeile 6 aktiviert den Headless-Modus für den Chrome-Webbrowser.

Zeile 8 erstellt ein Chrome Browser Objekt mit dem Chromtreiber binär aus dem Fahrer/ Verzeichnis des Projekts.

Zeile 10 weist den Browser an, den Unixtimestamp der Website zu laden.com.

Zeile 12 findet das Element, das die Zeitstempeldaten von der Seite enthält, mithilfe des CSS-Selektors und speichert es im Zeitstempel Variable.

Zeile 13 parst die Zeitstempeldaten des Elements und gibt sie auf der Konsole aus.

So sieht die HTML-Struktur der UNIX-Zeitstempeldaten in unixtimestamp aus.com sieht aus wie.

Zeile 14 schließt den Browser.

Führen Sie das Python-Skript aus ex00.py wie folgt:

$ python3 ex00.py

Wie Sie sehen, werden die Zeitstempeldaten auf dem Bildschirm gedruckt.

Hier habe ich die Browser.find_element(Von, Selektor) Methode.

Da wir CSS-Selektoren verwenden, ist der erste Parameter Durch.CSS_SELECTOR und der zweite Parameter ist der CSS-Selektor selbst.

Anstatt von Browser.find_element() Methode können Sie auch verwenden Browser.find_element_by_css_selector(Selektor) Methode. Diese Methode benötigt nur einen CSS-Selektor, um zu funktionieren. Das Ergebnis wird das gleiche sein.

Das Browser.find_element() und Browser.find_element_by_css_selector() Methoden werden verwendet, um ein einzelnes Element auf der Webseite zu finden und auszuwählen. Wenn Sie mit den CSS-Selektoren mehrere Elemente finden und auswählen möchten, müssen Sie verwenden Browser.find_elemente() und Browser.find_elements_by_css_selector() Methoden.

Das Browser.find_elemente() -Methode verwendet die gleichen Argumente wie die Browser.find_element() Methode.

Das Browser.find_elements_by_css_selector() -Methode nimmt das gleiche Argument an wie die Browser.find_element_by_css_selector() Methode.

Sehen wir uns ein Beispiel für das Extrahieren einer Liste von Namen mit CSS-Selektoren aus dem Zufallsnamengenerator an.Infos mit Selen.

Wie Sie sehen können, hat die ungeordnete Liste den Klassennamen Namensliste. Wir können also den CSS-Selektor verwenden .Namensliste li um alle Namen von der Webseite auszuwählen.

Sehen wir uns ein Beispiel für die Auswahl mehrerer Elemente auf der Webseite mit CSS-Selektoren an.

Erstellen Sie ein neues Python-Skript ex01.py und geben Sie die folgenden Codezeilen ein.

vom Selen-Import-Webtreiber
aus Selen.Webtreiber.verbreitet.Schlüsselimport Schlüssel
aus Selen.Webtreiber.verbreitet.per Import
Optionen = Webtreiber.ChromeOptions()
Optionen.kopflos = wahr
Browser = Webtreiber.Chrome(executable_path="./drivers/chromedriver", options=options)
Browser.get("http://zufalls-name-generator.die Info/")
Namen = Browser.find_elements(Von.CSS_SELECTOR, '.Namensliste li')
für Namen in Namen:
drucken (Name.Text)
Browser.schließen()

Wenn Sie fertig sind, speichern Sie die ex01.py Python-Skript.

Zeile 1-8 ist die gleiche wie in ex00.py Python-Skript. Also werde ich sie hier nicht noch einmal erklären.

Zeile 10 weist den Browser an, den Random-Name-Generator der Website zu laden.die Info.

Zeile 12 wählt die Namensliste mit der Browser.find_elemente() Methode. Diese Methode verwendet den CSS-Selektor .Namensliste li um die Namensliste zu finden. Anschließend wird die Namensliste im Namen Variable.

In den Zeilen 13 und 14, a zum Schleife wird verwendet, um durch die Namen Liste auf und drucke die Namen auf der Konsole aus.

Zeile 16 schließt den Browser.

Führen Sie das Python-Skript aus ex01.py wie folgt:

$ python3 ex01.py

Wie Sie sehen, werden die Namen von der Webseite extrahiert und auf der Konsole gedruckt.

Anstatt die Browser.find_elemente() Methode können Sie auch die Browser.find_elements_by_css_selector() die Methode wie zuvor. Diese Methode benötigt nur einen CSS-Selektor, um zu funktionieren. Das Ergebnis wird das gleiche sein.

Grundlagen der CSS-Selektoren:

Sie können den CSS-Selektor eines Webseitenelements immer mit dem Developer Tool des Firefox- oder Chrome-Webbrowsers finden. Dieser automatisch generierte CSS-Selektor ist möglicherweise nicht das, was Sie wollen. Manchmal müssen Sie möglicherweise Ihren CSS-Selektor schreiben.

In diesem Abschnitt werde ich über die Grundlagen von CSS-Selektoren sprechen, damit Sie verstehen können, was ein bestimmter CSS-Selektor auf einer Webseite auswählt, und bei Bedarf Ihren benutzerdefinierten CSS-Selektor schreiben.

Wenn Sie ein Element von der Webseite mit der ID auswählen möchten Botschaft, der CSS-Selektor ist #Botschaft.

Der CSS-Selektor .Grün wählt ein Element mit einem Klassennamen aus Grün.

Wenn Sie ein Element auswählen möchten (Klasse Nachricht) innerhalb eines anderen Elements (Klasse Container), ist der CSS-Selektor .Container .Nachricht

Der CSS-Selektor .Nachricht.Erfolg wählt das Element aus, das zwei CSS-Klassen hat Nachricht und Erfolg.

Um alle auszuwählen p Tags können Sie den CSS-Selektor verwenden p.

Um nur die only auszuwählen p Tags innerhalb der div Tags können Sie den CSS-Selektor verwenden div p

Um die auszuwählen p Tags, die die direkten Geschwister des . sind div Tags können Sie den CSS-Selektor verwenden div > p

Um alle auszuwählen Spanne und p Tags können Sie den CSS-Selektor verwenden p, span

Um die auszuwählen p Tag direkt nach dem div Tag können Sie den CSS-Selektor verwenden div + p

Um die auszuwählen p tag nach dem div Tag können Sie den CSS-Selektor verwenden div ~ p

Um alle auszuwählen p Tags mit dem Klassennamen Nachricht, Sie können den CSS-Selektor verwenden p.Nachricht

Um alle auszuwählen Spanne Tags mit dem Klassennamen Nachricht, Sie können den CSS-Selektor verwenden Spanne.Nachricht

Um alle Elemente auszuwählen, die das Attribut haben href, Sie können den CSS-Selektor verwenden [href]

Um das Element auszuwählen, das das Attribut hat Name und der Wert der Name Attribut ist Nutzername, Sie können den CSS-Selektor verwenden [name=”Benutzername”]

Um alle Elemente auszuwählen, die das Attribut haben alt und der Wert der alt Attribut, das die Teilzeichenfolge enthält vscode, Sie können den CSS-Selektor verwenden [alt~=”vscode”]

Um alle Elemente auszuwählen, die das href Attribut und der Wert des href Attribut beginnt mit der Zeichenfolge https, Sie können den CSS-Selektor verwenden [href^=”https”]

Um alle Elemente auszuwählen, die das href Attribut und der Wert des href Attribut endet mit der Zeichenfolge .com, Sie können den CSS-Selektor verwenden [href$=".com“]

Um alle Elemente auszuwählen, die das href Attribut und der Wert des href Attribut hat die Teilzeichenfolge Google, Sie können den CSS-Selektor verwenden [href*=”google”]

Wenn Sie das erste auswählen möchten li tag in der ul Tag können Sie den CSS-Selektor verwenden ul li: erstes Kind

Wenn Sie die erste auswählen möchten li tag in der ul Tag können Sie auch den CSS-Selektor verwenden ul li:n.-Kind(1)

Wenn Sie das letzte auswählen möchten li tag in der ul Tag können Sie den CSS-Selektor verwenden ul li:letztes-kind

Wenn Sie die letzte auswählen möchten li tag in der ul Tag können Sie auch den CSS-Selektor verwenden ul li:n-letztes-Kind(1)

Wenn Sie die zweite auswählen möchten li tag in der ul Tag von Anfang an können Sie den CSS-Selektor verwenden ul li:ntes-Kind(2)

Wenn Sie das dritte auswählen möchten li tag in der ul Tag von Anfang an können Sie den CSS-Selektor verwenden ul li:nth-kind(3)

Wenn Sie die zweite auswählen möchten li tag in der ul Tag beginnend am Ende können Sie den CSS-Selektor verwenden ul li:n-letztes-Kind(2)

Wenn Sie das dritte auswählen möchten li tag in der ul Tag beginnend am Ende können Sie den CSS-Selektor verwenden ul li:n-letztes-Kind(3)

Dies sind die gängigsten CSS-Selektoren. Sie werden diese fast bei allen Selenium-Projekten verwenden. Es gibt noch viele weitere CSS-Selektoren. Eine Liste aller finden Sie in den w3schools.com CSS-Selektoren-Referenz.

Schlussfolgerung:

In diesem Artikel habe ich gezeigt, wie man Webseitenelemente mit CSS-Selektoren mit Selenium findet und auswählt. Ich habe auch die Grundlagen von CSS-Selektoren besprochen. Sie sollten CSS-Selektoren bequem für Ihre Selenium-Projekte verwenden können.