Einführung in XPath und CSS-Selektoren

1. Was sind XPath und CSS-Selektoren?

Heute machen wir einen großen Schritt in Richtung Meisterschaft in der Web-Automatisierung mit Selenium und lernen XPath und CSS-Selektoren kennen. Diese kleinen, aber mächtigen Werkzeuge werden deine treuen Begleiter bei der Suche nach Elementen auf Webseiten. Lass uns gemeinsam in die Welt der Selektoren eintauchen und lernen, sie für eine präzisere und effektivere Suche zu nutzen.

Wenn ein HTML-Dokument ein dichter Wald wäre, dann wären XPath und CSS-Selektoren deine Karten-Schummelbögen. Sie ermöglichen es dir, den Weg zu dem gewünschten Baum (oder Element, wenn dir Programmierung lieber ist) zu bahnen. Diese Werkzeuge helfen, Elemente auf Webseiten zu finden, selbst wenn sie hinter Bergen von Code und Millionen von Tags versteckt sind.

XPath

XPath (XML Path Language) ist eine Sprache, die für die Navigation in XML-Dokumenten entwickelt wurde. Aber hat nicht jemand gesagt, dass HTML ein Hybrid aus XML ist, oder? Deshalb ist XPath so praktisch für HTML-Dokumente anzuwenden. Es kann buchstäblich jedes Element auf jedem Pfad erreichen, den du angibst.

CSS-Selektoren

CSS-Selektoren stammen aus der Welt der Cascading Style Sheets. Keine Sorge, um sie zu lernen, musst du kein Designer werden! Sie sind dazu gedacht, Elemente genau nach ihrem Typ, ihrer Klasse, ihrem Identifikator und sogar ihrem Zustand auszuwählen. Sie zu benutzen ist einfacher, als es scheint – wahrscheinlich hast du sie schon unbewusst beim Stylen von Webseiten verwendet.

2. Anwendung von XPath und CSS-Selektoren im Code

Nun, da du weißt, was diese Wunder sind – Selektoren, lass uns sofort in die Praxis einsteigen. Wir werden lernen, wie man sie zusammen mit Selenium verwendet und Wunder vollbringt!

Verwendung von XPath

Hier ist ein Beispiel, wie man XPath verwendet, um ein Element in Selenium zu finden:

from selenium import webdriver

# Einstellung des Treibers
driver = webdriver.Chrome()

# Öffnen der Seite
driver.get('https://example.com')

# Suche nach einem Element mit XPath
element = driver.find_element_by_xpath('//div[@id="menu"]/ul/li/a')

# Ausgabe des Textes des Elements
print(element.text)

# Schließen des Browsers
driver.quit()

Erklärung:

• //div[@id="menu"]/ul/li/a — das ist unser XPath. Es sagt: "Hey Treiber, finde mir ein Element a, das sich innerhalb von li befindet, das wiederum in ul liegt, das in div mit id="menu" ist."

Verwendung von CSS-Selektoren

Jetzt schauen wir uns an, wie man CSS-Selektoren verwenden kann:

from selenium import webdriver

# Einstellung des Treibers
driver = webdriver.Chrome()

# Öffnen der Seite
driver.get('https://example.com')

# Suche nach einem Element mit CSS-Selektor
element = driver.find_element_by_css_selector('div#menu > ul > li > a')

# Ausgabe des Textes des Elements
print(element.text)

# Schließen des Browsers
driver.quit()

Erklärung:

• div#menu > ul > li > a — unser CSS-Selektor. Es hat das Element ähnlich wie XPath gefunden, aber mit einer kompakteren Syntax.

3. Unterschiede zwischen XPath und CSS-Selektoren

Du fragst dich, was der Unterschied zwischen XPath und CSS-Selektoren ist? Gute Frage! Lass uns herausfinden, wann und was man verwenden sollte.

Flexibilität vs. Einfachheit

XPath ist flexibler: Mit ihm kann man im DOM-Baum "nach oben" navigieren und komplexe logische Bedingungen verwenden. Das macht ihn nützlich für anspruchsvollere Abfragen. Allerdings machen die Einfachheit und die Kürze der CSS-Selektoren sie manchmal bevorzugt. CSS-Selektoren sind leichter zu lesen und zu schreiben, besonders wenn ein Element nach Klasse oder Identifikator gefunden werden soll.

Unterstützung von Funktionen

XPath unterstützt die Verwendung von Funktionen – von der Überprüfung von Text bis hin zur Arbeit mit Attributen, wie z.B. contains() oder starts-with(). CSS-Selektoren haben hingegen keine derart umfassende Unterstützung.

Arbeitsgeschwindigkeit

In einigen Szenarien arbeiten CSS-Selektoren schneller. Das liegt daran, dass Browser ursprünglich für CSS-Selektoren optimiert sind, was sie für einfache Aufgaben zur Standardwahl macht.

Syntax

XPath hat eine komplexere Syntax, was sowohl ein Vorteil als auch ein Nachteil sein kann. CSS-Selektoren sind einfacher zu schreiben und zu lernen.

4. Praxisanwendung

Lass uns dieses Wissen auf eine reale Aufgabe anwenden. Angenommen, wir haben eine Webseite mit einer Produktliste, und wir müssen alle Produktnamen und ihre Preise erfassen. So könnte man das machen:

Beispiel mit XPath

from selenium import webdriver

# Einstellung des Treibers
driver = webdriver.Chrome()

# Öffnen der Seite
driver.get('https://example.com/products')

# Suche nach allen Produktelementen
products = driver.find_elements_by_xpath('//table[@class="product-table"]/tbody/tr')

# Extrahieren der Daten jedes Produkts
for product in products:
    name = product.find_element_by_xpath('.//td[@class="product-name"]').text
    price = product.find_element_by_xpath('.//td[@class="product-price"]').text
    print(f"Produkt: {name}, Preis: {price}")

# Schließen des Browsers
driver.quit()

Beispiel mit CSS-Selektoren

from selenium import webdriver

# Einstellung des Treibers
driver = webdriver.Chrome()

# Öffnen der Seite
driver.get('https://example.com/products')

# Suche nach allen Produktelementen
products = driver.find_elements_by_css_selector('table.product-table > tbody > tr')

# Extrahieren der Daten jedes Produkts
for product in products:
    name = product.find_element_by_css_selector('td.product-name').text
    price = product.find_element_by_css_selector('td.product-price').text
    print(f"Produkt: {name}, Preis: {price}")

# Schließen des Browsers
driver.quit()

5. Besonderheiten und typische Fehler

Wenn du XPath und CSS-Selektoren verwendest, gibt es einige Fallen, die du vermeiden solltest. Zum Beispiel, wenn du absolute Pfade in XPath verwendest, besteht die Gefahr, dass schon die kleinste Änderung in der HTML-Struktur dein Skript kaputt macht. Deshalb solltest du immer relative Pfade verwenden, um flexibel zu bleiben.

CSS-Selektoren hingegen können unleserlich sein, wenn sie zu kompliziert werden, daher ist es wichtig, ein Gleichgewicht zwischen Genauigkeit und Einfachheit zu finden.

Es ist auch erwähnenswert, Fehler zu behandeln. Wenn ein Element nicht gefunden wird, wirft Selenium eine NoSuchElementException. Nutze try-except Blöcke oder Warte-Methoden wie WebDriverWait, um damit umzugehen und deine Skripte zuverlässiger zu machen.

1

Опрос

Einführung in Selenium,  35 уровень,  4 лекция

недоступен

Einführung in Selenium

Einführung in Selenium

Открыть