Beim Data Scraping besteht der erste Schritt darin, die Daten selbst zu finden. Dies kann auf viele Arten geschehen - über eindeutige Attribute, Klassennamen, id oder CSS-Selektoren. Manchmal wird es jedoch durch das Vorhandensein von dynamischen Elementen schwieriger, nach Daten zu suchen und HTML-Elemente zu identifizieren. An dieser Stelle kommt XPath ins Spiel.
Wenn eine Webseite in einem Browser geladen wird, erzeugt sie eine DOM-Struktur (Document Object Model). Zugleich ist XPath eine Abfragesprache, die Objekte im DOM abfragt. Damit ist XPath eine gute Möglichkeit, auch mit Selenium nach Webelementen auf einer Webseite zu suchen.
Inhaltsübersicht
Syntax von XPath
XML Path oder allgemein als XPath bekannt, ist eine Abfragesprache für XML-Dokumente. Sie ermöglicht es, einen XML-Dokumenten-Navigationsfluss zu schreiben, um nach einem beliebigen Webelement zu suchen.
Die XPath-Syntax besteht aus DOM-Attributen und -Tags, die es ermöglichen, jedes beliebige Element auf einer Webseite mithilfe des DOM zu finden. Im Allgemeinen beginnt XPath mit "//" und sieht wie folgt aus:
//tag_name[@Attribute_name = "Value"]/child nodesWobei tag name der Name des Knotens ist, @ der Anfang des Namens des ausgewählten Attributs und value hilft, die Ergebnisse zu filtern.
Ein Beispiel für XPath könnte das nächste sein:
//*[@id="w-node"]/div/a[1]Arten von XPath
Es gibt nur 2 Arten von XPaths in Selenium - absolute XPaths und relative XPaths.
Im Beispiel wird eine Webseite mit dem folgenden HTML-Code verwendet:
<!DOCTYPE html>
<html>
<head>
<title>Ein Mustershop</title>
</head>
<body>
<div class="product-item">
<img src="https://scrape-it.cloud/blog/example.com\item1.jpg">
<div class="product-list">
<h3>Stift</h3>
<span class="price">10$</span>
<a href="/de/example.com\item1.html/" class="button">Kaufen</a>
</div>
</div>
<div class="product-item">
<img src="example.com\item2.jpg">
<div class="product-list">
<h3>Buchen Sie</h3>
<span class="price">20$</span>
<a href="/de/example.com\item2.html/" class="button">Kaufen</a>
</div>
</div>
</body>
</html>Absoluter XPath
Die Verwendung des absoluten XPath hilft dabei, ein bestimmtes Element genau zu finden. Lassen Sie uns zum Beispiel einen absoluten XPath für den Produktnamen schreiben:
Absoluter XPath:
/html/body/div[1]/div/h3Um XPath aus Chrome DevTools zu kopieren (drücken Sie F12 zum Öffnen), inspizieren Sie einfach das Element (Strg+Umschalt+C oder unten inspizieren):
Klicken Sie dann mit der rechten Maustaste auf die hervorgehobene Zeile im Elementfenster und wählen Sie Kopieren - Vollständigen XPath kopieren:
Der resultierende XPath kann in der Konsole überprüft werden:
Hier können Sie auch den HTML-Code dieses Elements kopieren. Klicken Sie einfach mit der rechten Maustaste auf das Ergebnis und wählen Sie "Objekt kopieren":
Das Ergebnis:
<h3>Stift</h3>Diese Methode, die auch als Single-Slash-Suche bezeichnet wird, ist am anfälligsten für kleinere Änderungen in der Struktur der Seite.
Relativer XPath
Ein relativer XPath ist flexibler und hängt nicht von kleinen Änderungen in der Seitenstruktur ab. Der nächste relative XPath findet das gleiche Element wie ein absoluter XPath weiter unten:
//*[@class="product-list"]/h3Schauen wir nach:
Das Ergebnis:
[ {<h3>Stift</h3>}, {<h3>Buchen Sie</h3>} ]Relativer XPath kann überall in der DOM-Struktur mit der Suche beginnen. Außerdem ist er kürzer als Absolute XPath.
XPath VS CSS Selektoren
Jemand, der bereits über CSS-Selektoren gelesen hat, kann sich vielleicht nicht zwischen ihnen entscheiden. Der Hauptunterschied zwischen XPath und CSS-Selektoren besteht darin, dass man sich mit XPath sowohl vorwärts als auch rückwärts bewegen kann, während der CSS-Selektor sich nur vorwärts bewegt und keine übergeordneten Elemente sieht. XPath ist jedoch in jedem Browser anders, so dass sie nicht universell einsetzbar sind.
Daraus lässt sich schließen, dass CSS-Selektoren am besten verwendet werden, wenn es darum geht, Zeit zu sparen oder den Code zu vereinfachen. XPath hingegen ist besser für komplexere Aufgaben geeignet. Den vollständigen Artikel über CSS-Selektoren finden Sie hier.
XPath in Selenium verwenden
Für das Scraping von Daten mit Selenium wird die Klasse By verwendet. Es gibt zwei Methoden, die für die Suche nach Seitenelementen in Kombination mit der Klasse "By" zur Auswahl von Attributen nützlich sein können. Sie sind:
find_elementgibt die erste Instanz von mehreren Webelementen mit einem bestimmten Attribut im DOM zurück. Wenn kein Element gefunden wird, löst die Methode eine NoSuchElementException aus.find_elementsgibt einen leeren Wert zurück, wenn das Element nicht gefunden wird, oder eine Liste aller Webelement-Instanzen, die mit dem angegebenen Attribut übereinstimmen.
Also, für die Suche nach Produktnamen von Stiften mit XPath in Selenium:
from selenium.webdriver.common.by import By
driver.find_element(By.XPATH, '//*[@class="product-list"]/h3')Und für Liste enthält alle Produktnamen:
from selenium.webdriver.common.by import By
driver.find_elements(By.XPATH, '//*[@class="product-list"]/h3')Dynamischer XPath in Selenium
Um bestimmte Abfragen durchzuführen, können Sie spezielle Befehle und XPath-Operatoren verwenden.
XPath mit logischen Operatoren: OR & AND
Logische Operatoren werden benötigt, um genauer nach Elementen in Abhängigkeit von den angegebenen Bedingungen zu suchen. XPath kann 2 logische Operatoren verwenden: oder & und. Sie sollten bedenken, dass Groß- und Kleinschreibung beachtet werden muss. Die Verwendung von "OR" & "AND" ist also nicht korrekt.
Logischer Operator OR
Diese XPath-Abfrage gibt die untergeordneten Elemente zurück, die mit dem ersten Wert, dem zweiten Wert oder beiden übereinstimmen. Zum Beispiel:
//tag_name[@Attribute_name = "Value" or @Attribute_name2 = "Value2"]Sie wird zurückkehren:
| Attribut 1 | Attribut 2 | Ergebnis |
| Falsch | Falsch | Keine Elemente |
| Wahr | Falsch | Erträge A |
| Falsch | Wahr | Erträge B |
| Wahr | Wahr | Liefert beides |
Ändern wir das obige Beispiel und überprüfen wir die Funktion des logischen Operators oder. Stellen Sie sich vor, dass der Preis eines Kugelschreibers in einem Container gespeichert ist:
<span time-in="150" class="price">10$</span>Und Buchpreis:
<span time-in="100" class="price">20$</span>Verwenden Sie den logischen Operator oder:
//span[@time-in = "100" or @class = "price"]Das Ergebnis:
Die Abfrage ergab beide Produkte, da sie beide die Klasse "Preis" hatten.
Logischer Operator AND
Diese XPath-Abfrage gibt die untergeordneten Elemente zurück, die nur mit beiden Werten übereinstimmen. Zum Beispiel:
//tag_name[@Attribute_name = “Value” and @Attribute_name2 = “Value2”]Sie wird zurückkehren:
| Attribut 1 | Attribut 2 | Ergebnis |
| Falsch | Falsch | Keine Elemente |
| Wahr | Falsch | Keine Elemente |
| Falsch | Wahr | Keine Elemente |
| Wahr | Wahr | Liefert beides |
Um dies zu überprüfen, verwenden Sie einfach das obige Beispiel und ändern den Operator OR in AND:
XPath mit Starts-With()
Diese Methode hilft dabei, Elemente zu finden, die auf eine spezielle Art und Weise gestartet wurden. Lassen Sie uns zum Beispiel den Artikel "Web Scraping mit Python: von den Grundlagen zur Praxis" suchen.
Der XPath wird der nächste sein:
//a[starts-with(text(),'Web Scraping')]oder
//a[starts-with(text(),'Web')]Schauen wir nach:
Aber die nächste wird falsch sein:
//a[starts-with(text(),'Scraping with Python')]Diese Methode kann nicht nur für statische Elemente, sondern auch für dynamische (wie die Schaltfläche) verwendet werden. Zum Beispiel:
//span[starts-with(@class, 'read-more-link')]XPath mit Index
Diese Methode ist nützlich, wenn man ein bestimmtes Element im DOM finden muss. Zum Beispiel:
//tag[@attribute_name="value"][element_num]Kehren wir zum Beispiel mit dem Operator OR zurück und versuchen, nur das erste Ergebnis zu finden:
XPath mit Following
Diese Methode wird verwendet, um das oder die Webelemente zu finden, die auf ein bekanntes Element folgen. Die folgende Syntax ist die nächste:
//tag[@attribute_name="value"]//following::tagAber es sollte nicht neben einem bekannten Tag oder auf der gleichen Ebene liegen. Selenium wählt das nächstgelegene aus:
XPath mit Following-Sibling
Diese Methode findet das nächstgelegene Element mit demselben Elternteil. Sie hat die folgende Syntax:
//tag[@attribute_name="value"]//following-sibiling::tag
Das Ergebnis ist dasselbe wie im vorherigen Beispiel.
XPath mit Voranstellen
Die Methode Preceding findet alle Elemente vor dem aktuellen Knoten:
//tag[@attribute_name="value"]//preceding::tagSucht auf allen Ebenen nach dem nächstgelegenen Exemplar.
XPath mit Preceding-Sibling
Dasselbe wie vorher, aber Suche nach Elementen vor dem aktuellen Knoten mit demselben Elternteil:
//tag[@attribute_name="value"]//preceding-sibling::tagXPath mit Child
Diese Methode wird verwendet, um alle untergeordneten Elemente eines bestimmten Knotens zu finden:
//tag[@attribute_name="value"]//child::tag
XPath mit Parent
Diese Methode wird verwendet, um alle übergeordneten Elemente eines bestimmten Knotens zu finden:
//tag[@attribute_name="value"]//parent::tagXPath mit Nachkommenschaft
Diese Methode wird verwendet, um alle Nachkommen (Kindknoten, Enkelknoten usw.) eines bestimmten Knotens zu finden:
//tag[@attribute_name="value"]//descendants::tagXPath mit Vorfahren
Diese Methode wird verwendet, um alle Vorfahren (Eltern-, Großelternknoten usw.) eines bestimmten Knotens zu finden:
//tag[@attribute_name="value"]//ancestors::tagFazit und Schlussfolgerungen
XPath in Selenium kann also dabei helfen, Elemente für weiteres Scraping zu finden. Es kann mit statischen und dynamischen Daten arbeiten. Außerdem kann XPath im Gegensatz zu Selektoren auf allen Ebenen der DOM-Struktur arbeiten, einschließlich übergeordneter Elemente.
