Suchen Sie Elemente nach CSS -Selektoren mit Selen
Voraussetzungen:
Um die Befehle und Beispiele dieses Artikels auszuprobieren, müssen Sie haben,
1) Eine Linux -Verteilung (vorzugsweise Ubuntu), die auf Ihrem Computer installiert ist.
2) Python 3 auf Ihrem Computer installiert.
3) PIP 3 auf Ihrem Computer installiert.
4) Python virtualenv Paket auf Ihrem Computer installiert.
5) Mozilla Firefox oder Google Chrome -Webbrowser auf Ihrem Computer installiert.
6) Muss wissen, wie man den Firefox Gecko -Treiber oder den Chrome -Web -Treiber installiert.
Lesen Sie meinen Artikel, um die Anforderungen 4, 5 und 6 zu erfüllen Einführung in Selen mit Python 3 bei LinuxHint.com.
Sie können viele Artikel zu den anderen Themen unter LinuxHint finden.com. Schauen Sie sich sie an, wenn Sie Hilfe benötigen.
Einrichten eines Projektverzeichnisses:
Um alles organisiert zu halten, erstellen Sie ein neues Projektverzeichnis Selenium-CSS-Selector/ folgendermaßen:
$ mkdir -pv Selenium-CSS-Selektor/TreiberNavigieren zum Selenium-CSS-Selector/ Projektverzeichnis wie folgt:
$ cd selencss-selector/Erstellen Sie eine virtuelle Python -Umgebung im Projektverzeichnis wie folgt:
$ virtualenv .VenvAktivieren Sie die virtuelle Umgebung wie folgt:
$ Quelle .Venv/bin/aktivierenInstallieren Sie die Selenium Python Library mit PIP3 wie folgt:
$ pip3 Selen installierenLaden Sie den gesamten erforderlichen Web -Treiber herunter und installieren Sie sie in der Treiber/ Projektverzeichnis. Ich habe den Prozess des Herunterladens und Installierens von Webtreibern in meinem Artikel erläutert Einführung in Selen mit Python 3. Wenn Sie Hilfe benötigen, suchen Sie nach LinuxHint.com Für diesen Artikel.
Holen Sie sich CSS -Selektor mit Chrome Developer Tool:
In diesem Abschnitt werde ich Ihnen zeigen, wie Sie den CSS-Selektor des Webseitenelements finden, das Sie mit Selen über das integrierte Entwickler-Tool des Google Chrome-Webbrowsers auswählen möchten.
Um den CSS -Selektor mit dem Google Chrome -Webbrowser zu erhalten, öffnen Sie Google Chrome und besuchen Sie die Website, aus der Sie Daten extrahieren möchten. Drücken Sie dann die rechte Maustaste (RMB) auf einem leeren Bereich der Seite und klicken Sie auf Prüfen um die zu öffnen Chrome Developer Tool.
Sie können auch drücken + Schicht + ICH um die zu öffnen Chrome Developer Tool.
Chrome Developer Tool sollte geöffnet werden.
Um die HTML -Darstellung Ihres gewünschten Webseitenelements zu finden, klicken Sie auf die Prüfen() Symbol wie im Screenshot unten markiert.
Drücken Sie dann ü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 in der hervorgehoben Elemente Tab von Chrome Developer Tool Wie Sie im Screenshot unten sehen können.
Um den CSS -Selektor Ihres gewünschten Elements zu erhalten, wählen Sie das Element aus dem aus Elemente Tab von Chrome Developer Tool und klicken Sie mit der rechten Maustaste (RMB) darauf. Dann auswählen Kopieren > Kopierauswahl wie im Screenshot unten markiert.
Ich habe den CSS -Selektor in einem Texteditor eingefügt. Der CSS -Selektor sieht wie im Screenshot unten gezeigt aus.
Holen Sie sich CSS -Selektor mit Firefox Developer Tool:
In diesem Abschnitt werde ich Ihnen zeigen, wie Sie den CSS-Selektor des Webseitenelements finden, das Sie mit Selen mit dem integrierten Entwickler-Tool des Mozilla Firefox-Webbrowsers auswählen möchten.
Um den CSS -Selektor mit dem Firefox -Webbrowser zu erhalten, öffnen Sie Firefox und besuchen Sie die Website, aus der Sie Daten extrahieren möchten. Drücken Sie dann die rechte Maustaste (RMB) auf einem leeren Bereich der Seite und klicken Sie auf Element inspizieren (q) um die zu öffnen Firefox Developer Tool.
Firefox Developer Tool sollte geöffnet werden.
Um die HTML -Darstellung Ihres gewünschten Webseitenelements zu finden, klicken Sie auf die Prüfen() Symbol wie im Screenshot unten markiert.
Drücken Sie dann ü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 in der hervorgehoben Inspektor Tab von Firefox Developer Tool Wie Sie im Screenshot unten sehen können.
Um den CSS -Selektor Ihres gewünschten Elements zu erhalten, wählen Sie das Element aus dem aus Inspektor Tab von Firefox Developer Tool und klicken Sie mit der rechten Maustaste (RMB) darauf. Dann auswählen Kopieren > CSS -Selektor wie im Screenshot unten markiert.
Der CSS -Selektor Ihres gewünschten Elements sollte ungefähr so aussehen.
Extrahieren von Daten mit CSS -Selektor mit Selen:
In diesem Abschnitt werde ich Ihnen zeigen, wie Sie Webseitenelemente auswählen und Daten mit CSS -Selektoren mit Selenium Python Library extrahieren.
Erstellen Sie zunächst ein neues Python -Skript Ex00.py und geben Sie die folgenden Codes -Zeilen ein.
vom Selenium importieren WebdriverAus Selen.Webdriver.gemeinsam.Schlüssel importieren Schlüsseln
Aus Selen.Webdriver.gemeinsam.durch Import durch
Optionen = Webdriver.ChromeOptions ()
Optionen.Kopflos = wahr
browser = webdriver.Chrome (ausführbarer_path = "./Treiber/Chromedriver ", Optionen = Optionen)
Browser.Get ("https: // www.Unixtimestamp.com/")
TIMESTAMP = Browser.find_element_by_css_selector ('H3.Textdanger: N-te Kind (3) ')
drucken ('aktueller Zeitstempel: % s' % (Zeitstempel.Text.split (") [0]))
Browser.schließen()
Sobald Sie fertig sind, speichern Sie die Ex00.py Python -Skript.
Zeile 1-3 importiert alle erforderlichen Selenkomponenten.
Zeile 5 erstellt ein Chrome -Optionsobjekt und Zeile 6 ermöglicht den Kopflosenmodus für den Chrome -Webbrowser.
Zeile 8 erzeugt ein Chrom Browser Objekt mit dem Chromedriver binär von der Treiber/ Projektverzeichnis.
Zeile 10 teilt dem Browser an, die Website Unixtimestamp zu laden.com.
Zeile 12 findet das Element, das die Zeitstempeldaten von der Seite mithilfe von CSS -Selektor enthält, und speichert sie in der Zeitstempel Variable.
Zeile 13 analysiert die Zeitstempeldaten aus dem Element und druckt sie auf der Konsole aus.
So wie die HTML -Struktur der Unix -Zeitstempeldaten im Unixtimestamp.com sieht aus wie.
Zeile 14 schließt den Browser.
Führen Sie das Python -Skript aus Ex00.py folgendermaßen:
$ python3 ex00.pyWie Sie sehen können, werden die Zeitstempeldaten auf dem Bildschirm gedruckt.
Hier habe ich die benutzt Browser.find_element (von, selector) Methode.
Da wir CSS -Selektoren verwenden, ist der erste Parameter Von.CSS_SELECTOR und der zweite Parameter ist der CSS -Selektor selbst.
Anstatt Browser.find_element () Methode können Sie auch verwenden Browser.find_element_by_css_selector (Selector) Methode. Diese Methode benötigt nur einen CSS -Selektor, um zu arbeiten. Das Ergebnis wird das gleiche sein.
Der 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_elements () Und Browser.find_elements_by_css_selector () Methoden.
Der Browser.find_elements () Methode nimmt die gleichen Argumente wie die Browser.find_element () Methode.
Der Browser.find_elements_by_css_selector () Methode nimmt das gleiche Argument 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 Randomnamen-Generator sehen.Info mit Selen.
Wie Sie sehen können, hat die ungeordnete Liste den Klassennamen Namensliste. Wir können also den CSS -Selektor verwenden .Namelist Li So wählen Sie alle Namen auf der Webseite aus.
Lassen Sie uns ein Beispiel für die Auswahl mehrerer Elemente auf der Webseite mithilfe von CSS -Selektoren durchgehen.
Erstellen Sie ein neues Python -Skript Ex01.py und geben Sie die folgenden Codes -Zeilen darin ein.
vom Selenium importieren WebdriverAus Selen.Webdriver.gemeinsam.Schlüssel importieren Schlüsseln
Aus Selen.Webdriver.gemeinsam.durch Import durch
Optionen = Webdriver.ChromeOptions ()
Optionen.Kopflos = wahr
browser = webdriver.Chrome (ausführbarer_path = "./Treiber/Chromedriver ", Optionen = Optionen)
Browser.Get ("http: // random-name generator.die Info/")
Namen = Browser.find_elements (von.CSS_SELECTOR, '.Namelist Li ')
Für den Namen in Namen:
Druck (Name.Text)
Browser.schließen()
Sobald Sie fertig sind, speichern Sie die Ex01.py Python -Skript.
Zeile 1-8 ist dasselbe wie in Ex00.py Python -Skript. Also werde ich sie hier nicht wieder erklären.
Zeile 10 teilt dem Browser an.die Info.
Zeile 12 wählt die Namensliste mit dem aus Browser.find_elements () Methode. Diese Methode verwendet den CSS -Selektor .Namelist Li Um die Namensliste zu finden. Dann wird die Namensliste in der gespeichert Namen Variable.
In den Zeilen 13 und 14 a für Schleife wird verwendet, um durch die zu iterieren Namen Listen Sie die Namen auf der Konsole auf und drucken Sie sie aus.
Zeile 16 schließt den Browser.
Führen Sie das Python -Skript aus Ex01.py folgendermaßen:
$ python3 ex01.pyWie Sie sehen können, werden die Namen auf der Webseite extrahiert und auf der Konsole gedruckt.
Anstatt die zu verwenden Browser.find_elements () Methode können Sie auch die verwenden Browser.find_elements_by_css_selector () die Methode wie zuvor. Diese Methode benötigt nur einen CSS -Selektor, um zu arbeiten. Das Ergebnis wird das gleiche sein.
Grundlagen von CSS -Selektoren:
Sie finden immer den CSS -Selektor eines Webseitenelements mit dem Entwickler -Tool von Firefox oder Chrome -Webbrowser. 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, was ein bestimmter CSS -Selektor aus einer Webseite auswählt, und bei Bedarf Ihren benutzerdefinierten CSS -Selektor schreiben.
Wenn Sie mit der ID ein Element auf der Webseite auswählen möchten Nachricht, Der CSS -Selektor wird sein #Nachricht.
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) In einem anderen Element (Klasse Container) Der CSS -Selektor wird sein .Container .Nachricht
Der CSS -Selektor .Nachricht.Erfolg Wählt das Element mit zwei CSS -Klassen aus Nachricht Und Erfolg.
Um alle auszuwählen P Tags können Sie den CSS -Selektor verwenden P.
Um nur die auszuwählen P Tags in der div Tags können Sie den CSS -Selektor verwenden div p
So wählen Sie die aus P Tags, die die direkten Geschwister der 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
So wählen Sie die aus P Tag unmittelbar nach der div Tag, Sie können den CSS -Selektor verwenden div + p
So wählen Sie die aus P Tag nach dem div Tag, Sie können den CSS -Selektor verwenden Div ~ p
Um alle auszuwählen P Tags, die den Klassennamen haben Nachricht, Sie können den CSS -Selektor verwenden P.Nachricht
Um alle auszuwählen Spanne Tags, die den Klassennamen haben Nachricht, Sie können den CSS -Selektor verwenden Spanne.Nachricht
So wählen Sie alle Elemente mit dem Attribut aus href, Sie können den CSS -Selektor verwenden [href]
So wählen Sie das Element aus, das das Attribut hat Name und der Wert der Name Attribut ist Nutzername, Sie können den CSS -Selektor verwenden [name = "Benutzername"]
So wählen Sie alle Elemente mit dem Attribut aus Alt und der Wert der Alt Attribut, das das Substring enthält VSCODE, Sie können den CSS -Selektor verwenden [Alt ~ = ”VSCODE”]
Um alle Elemente auszuwählen, die die haben href Attribut und der Wert der href Attribut beginnt mit der Zeichenfolge https, Sie können den CSS -Selektor verwenden [href^= ”https”]
Um alle Elemente auszuwählen, die die haben href Attribut und der Wert der href Attribut endet mit der Zeichenfolge .com, Sie können den CSS -Selektor verwenden [href $ = ”.com ”]
Um alle Elemente auszuwählen, die die haben href Attribut und der Wert der href Attribut hat das Substring Google, Sie können den CSS -Selektor verwenden [href*= ”google”]
Wenn Sie den ersten auswählen möchten li Tag in der ul Tag, Sie können den CSS -Selektor verwenden Ul Li: Erstkind
Wenn Sie den ersten auswählen möchten li Tag in der ul Tag, Sie können auch den CSS -Selektor verwenden Ul li: nth-Kind (1)
Wenn Sie das letzte auswählen möchten li Tag in der ul Tag, Sie können den CSS -Selektor verwenden Ul Li: Last-Kind
Wenn Sie das letzte auswählen möchten li Tag in der ul Tag, Sie können auch den CSS -Selektor verwenden Ul li: n-te-last-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: nth-Kind (2)
Wenn Sie den dritten 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 ab Ende können Sie den CSS -Selektor verwenden Ul Li: N-te-last-Kind (2)
Wenn Sie den dritten auswählen möchten li Tag in der ul Tag ab Ende können Sie den CSS -Selektor verwenden Ul Li: N-te-last-Kind (3)
Dies sind die häufigsten CSS -Selektoren. Sie werden diese fast bei jedem Selen -Projekt verwenden. Es gibt noch viele weitere CSS -Selektoren. Sie finden eine Liste von allen in den W3schools.Com CSS -Selektoren Referenz.
Cnclusion:
In diesem Artikel habe ich gezeigt, wie Sie Webseitenelemente mit CSS -Selektoren mit Selen suchen und auswählen. Ich habe auch die Grundlagen von CSS -Selektoren besprochen. Sie sollten in der Lage sein, CSS -Selektoren bequem für Ihre Seleniumprojekte zu verwenden.