CSS-Selektoren sind ein leistungsstarkes Tool zum Auffinden von Elementen auf einer Webseite bei der Automatisierung von Browsertests mit Selenium. Mithilfe von CSS-Selektoren können Sie Elemente präzise und flexibel ansprechen. In diesem umfassenden Leitfaden behandeln wir alles, was Sie wissen müssen, um ein Profi beim Auffinden von Elementen per CSS-Selektor in Selenium zu werden.
Eine Einführung in CSS-Selektoren
Mit CSS-Selektoren können Sie HTML-Elemente basierend auf ID, Klasse, Attribut, Position im DOM-Baum und mehr auswählen. Hier sind einige der am häufigsten verwendeten CSS-Selektoren:
ID-Auswahl – Wählt ein Element anhand seiner eindeutigen ID aus. Zum Beispiel
#main-headerwählt das Element mit der ID = „main-header“ aus.Klassenauswahl – Wählt Elemente basierend auf dem Klassennamen aus. Zum Beispiel
.articlewählt alle Elemente mit class="article" aus.Attributauswahl – Wählt Elemente basierend auf einem bestimmten Attribut oder Attributwert aus. Zum Beispiel
input[type="text"]wählt alle Eingabeelemente mit type="text" aus.Nachkommenselektor – Wählt Elemente aus, die Nachkommen eines anderen angegebenen Elements sind. Zum Beispiel
div pwählt alle p-Elemente innerhalb von div-Elementen aus.Kinderauswahl – Wählt Elemente aus, die direkte untergeordnete Elemente eines anderen angegebenen Elements sind. Zum Beispiel
div > pwählt p Elemente aus, die direkte Kinder von div sind.Auswahl für benachbarte Geschwister – Wählt das gleichgeordnete Element aus, das unmittelbar auf ein anderes Element folgt. Zum Beispiel
h2 + pwählt das p-Element aus, das unmittelbar nach einem h2-Element kommt.Allgemeine Geschwisterauswahl – Wählt alle Geschwisterelemente aus, die einem anderen Element folgen. Zum Beispiel
h2 ~ pwählt alle p-Elemente aus, die nach einem h2-Element kommen.
Dies sind nur einige Beispiele der vielen CSS-Selektortypen. Sie können mehrere Selektoren kombinieren, um Elemente auf ganz bestimmte Weise anzusprechen.
Suchen von Elementen mit dem CSS-Selektor in Selenium
Selenium bietet zwei Hauptmethoden zum Suchen von Elementen mithilfe von CSS-Selektoren:
Driver.find_element_by_css_selector()
Diese Methode gibt das erste passende Element zurück.
element = driver.find_element_by_css_selector(‘#main-header‘)Driver.find_elements_by_css_selector()
Diese Methode gibt eine Liste aller übereinstimmenden Elemente zurück.
elements = driver.find_elements_by_css_selector(‘.article‘)Wenn Sie diese Methoden verwenden, übergeben Sie den CSS-Selektor als String. Hier sind einige Beispiele dafür, wie Sie Elemente mit unterschiedlichen Selektoren finden würden:
ById:
driver.find_element_by_css_selector(‘#signup-form‘)Nach Klasse:
driver.find_element_by_css_selector(‘.footer-links‘)Nach Attribut:
driver.find_element_by_css_selector(‘input[name="first_name"]‘)Nachfahre:
driver.find_element_by_css_selector(‘div#content p.summary‘)Kind:
driver.find_element_by_css_selector(‘ul.menu > li.active‘) Nachbargeschwister:
driver.find_element_by_css_selector(‘h1 + p.intro‘)Allgemeines Geschwister:
driver.find_element_by_css_selector(‘h2 ~ p.related-posts‘)Wie Sie sehen, bieten Ihnen CSS-Selektoren viele Möglichkeiten, Elemente auf unterschiedliche Weise gezielt anzusprechen.
Tipps zum Schreiben effektiver CSS-Selektoren
Hier sind einige Tipps, die Sie beim Schreiben von CSS-Selektoren zum Suchen von Elementen in Selenium befolgen sollten:
Seien Sie so spezifisch wie möglich – Verwenden Sie ID, Klasse, Attribute und mehrere Selektoren zusammen, um Elemente präzise anzusprechen. Dadurch werden falsch positive Übereinstimmungen vermieden.
Bevorzugen Sie die Klasse gegenüber dem Tag-Namen – Tag-Namen wie div, p, a usw. sind nicht sehr eindeutig. Klassen ermöglichen eine spezifischere Ausrichtung.
Verwenden Sie eindeutige Attribute wie Name oder Titel – Die Namens- und Titelattribute haben normalerweise eindeutige Werte, die ein einzelnes Element lokalisieren können.
Verwenden Sie Geschwisterselektoren sorgfältig – Benachbarte und allgemeine Geschwisterselektoren können mehr Elemente als beabsichtigt abgleichen, wenn sie nicht richtig geschrieben sind.
Vermeiden Sie komplexe verschachtelte Selektoren – die Verkettung vieler untergeordneter Selektoren kann dazu führen, dass Selektoren kaputt gehen. Versuchen Sie, jeden Selektor auf 3–4 verkettete Ebenen zu beschränken.
Teilen Sie lange Selektoren in mehrere Zeilen auf – CSS-Selektoren müssen nicht einzeilig sein. Die Aufteilung in mehrere Zeilen kann die Lesbarkeit verbessern.
Wenn Sie diese Tipps befolgen, können Sie robuste und wartbare CSS-Selektoren für die Automatisierung von Webtests schreiben.
Häufige Beispiele und Anwendungsfälle
Schauen wir uns nun einige gängige Beispiele an, wie CSS-Selektoren für Web Scraping und Browsertests mit Selenium verwendet werden:
Navigationslinks auswählen
Um die Hauptnavigationslinks auszuwählen, können wir einen Klassenselektor verwenden:
nav_links = driver.find_elements_by_css_selector(‘ul.main-nav > li > a‘)Formularfelder auswählen
Wir können Formulareingabefelder basierend auf dem Eingabe-Tag und dem Typattribut auswählen:
username = driver.find_element_by_css_selector(‘input[type="text"][name="username"]‘)
password = driver.find_element_by_css_selector(‘input[type="password"]‘)Auswählen von Tabellenzeilen und -spalten
CSS-Selektoren erleichtern die gezielte Ausrichtung auf bestimmte Zeilen und Zellen in einer HTML-Tabelle:
# Get second row
row = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2)‘)
# Get cell in specific row/column
cell = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2) td:nth-child(3)‘)Untergeordnete Elemente auswählen
Um nur direkte div-Kinder eines Containers auszuwählen, können wir den Kinderselektor verwenden:
children = driver.find_elements_by_css_selector(‘#container > div‘)Auswählen von Elementen basierend auf Text
Mit dem *-Selektor können wir Linktext teilweise zuordnen:
contact_link = driver.find_element_by_css_selector(‘a[href*="contact"]‘]Diese Beispiele zeigen, wie CSS-Selektoren in realen Testautomatisierungsszenarien verwendet werden können.
Verwendung von CSS-Selektoren in anderen Sprachen
In den bisherigen Beispielen wurde Python verwendet, CSS-Selektoren können jedoch in allen Sprachbindungen für Selenium verwendet werden:
Javac
// By.cssSelector
WebElement element = driver.findElement(By.cssSelector("div.main #login-form"));C#
// FindElement
IWebElement element = driver.FindElement(By.CssSelector("div.main #login-form"));JavaScript
// $
const element = await driver.$(‘div.main #login-form‘);Unabhängig davon, welche Sprache Sie verwenden, bieten CSS-Selektoren eine leistungsstarke und flexible Möglichkeit, Elemente gezielt auszuwählen.
Suchen von Elementen anhand des Klassennamens
Ein häufiger Anwendungsfall ist das Auffinden von Elementen anhand des Klassennamens. Hier sind einige Tipps für die Auswahl nach Klasse in Selenium:
Passen Sie den genauen Klassennamen an –
driver.find_element_by_class_name(‘primary-btn‘)Verwenden Sie einen CSS-Klassenselektor –
driver.find_element_by_css_selector(‘.primary-btn‘)Teilweise Übereinstimmung mit mehreren Klassen –
driver.find_element_by_css_selector(‘.primary.btn‘)Nachkomme mit Klasse abgleichen –
driver.find_element_by_css_selector(‘div .primary-btn‘)Verwenden Sie mehrere Klassen für Einzigartigkeit –
driver.find_element_by_css_selector(‘.primary-btn.large‘)
Der Abgleich nach Klassennamen ist sehr nützlich, aber achten Sie darauf, dass Sie auf Klassen abzielen, die auf der Seite eindeutig sind.
Suchen von Elementen anhand des Tag-Namens
Das Auffinden von Elementen anhand des HTML-Tag-Namens ist eine weitere häufige Selenium-Aufgabe. Hier sind einige Beispiele:
Erste Instanz des Tag-Namens finden:
element = driver.find_element_by_tag_name(‘button‘) Finden Sie alle Instanzen des Tag-Namens:
buttons = driver.find_elements_by_tag_name(‘button‘)Mit CSS-Selektor kombinieren:
submit_btn = driver.find_element_by_css_selector(‘form button[type="submit"]‘)Da Tag-Namen wie <div> und <span> sind häufig, versuchen Sie, auch IDs, Klassen oder Attribute zu verwenden, um das Element eindeutig zu identifizieren.
Suchen von Elementen nach Name oder ID
Wenn Elemente über ID- oder Namensattribute verfügen, ist die Suche nach Name oder ID die einfachste Option.
Suchen Sie anhand der genauen ID:
element = driver.find_element_by_id(‘signup-form‘)Suchen Sie nach dem genauen Namen:
element = driver.find_element_by_name(‘email‘) Die ID- und Namens-Locators stimmen nur mit den genauen Attributwerten überein. Dadurch sind sie sehr spezifisch, können aber auch beschädigt werden, wenn sich IDs oder Namen ändern.
Suchen von Elementen mit XPath vs. CSS Selector
XPath ist die andere gängige Elementlokalisierungsstrategie in Selenium. Wann sollten Sie also XPath- oder CSS-Selektoren verwenden?
Hier sind einige Unterschiede:
Ablesbarkeit – CSS-Selektoren sind für die meisten Entwickler besser lesbar und leichter zu verstehen.
Wartung – CSS-Selektoren sind im Vergleich zu langen, komplexen XPaths weniger anfällig und anfällig für fehlerhafte Änderungen.
Leistungen – XPath kann auf einige Elementeigenschaften zugreifen, die CSS-Selektoren nicht können, wie z. B. Textinhalte.
Leistung – CSS-Selektoren können von Browsern schneller abgeglichen werden als komplexe XPaths.
Im Allgemeinen bevorzugen Sie CSS-Selektoren aus Gründen der Wartbarkeit und Leistung. Verwenden Sie XPath nur bei Bedarf, um auf etwas zuzugreifen, das mit CSS nicht möglich ist.
Best Practices bei der Verwendung von CSS-Selektoren
Hier sind einige Best Practices, die Sie beim Auffinden von Elementen mit CSS-Selektoren befolgen sollten:
Bevorzugen Sie Einzigartigkeit gegenüber Komplexität – Vermeiden Sie nach Möglichkeit lange Ketten verschachtelter Selektoren.
Verwenden Sie IDs und Klassen anstelle von Tag-Namen und Verschachtelungen.
Versuchen Sie, 3 oder weniger verkettete Level zu finden – mehr Level erhöhen die Zerbrechlichkeit.
Vermeiden Sie universelle Selektoren wie
*– Diese sind anfällig für falsch positive Übereinstimmungen.Teilen Sie lange Selektoren in mehrere Zeilen auf – verbessert die Lesbarkeit.
Häufig verwendete Selektoren zwischenspeichern – Speichert wiederholte Selektorsuchen.
Verwenden Sie beschreibende Selektornamen – Hilft dabei, die Absicht zu verdeutlichen und vermeidet magische Zeichenfolgen.
Das Befolgen dieser Best Practices hilft dabei, robuste, lesbare und zuverlässige CSS-Selektoren für die Selenium-Automatisierung zu schreiben.
Tipps zum Debuggen von CSS-Selektoren
Das Debuggen von CSS-Selektoren ist eine wesentliche Fähigkeit für die Testautomatisierung. Hier einige Tipps zur Fehlerbehebung:
Verwenden Sie die Entwicklertools Ihres Browsers, um Selektoren zu testen – Chrome DevTools bietet einen praktischen Elementinspektor.
Übereinstimmende Elemente drucken und prüfen – Nach der Ausführung
find_elements()Drucken Sie die Ergebnisse aus, um zu sehen, welche Übereinstimmungen erzielt wurden.Ringen
NoSuchElementException– Wrap findet in einem Try/Except-Block, um abzufangen, wenn ein Element nicht gefunden wird.XPath aus Zielelement generieren – In vielen Browsern können Sie den XPath kopieren, was beim Erstellen des CSS-Selektors hilfreich sein kann.
Vereinfachen Sie komplexe Selektoren – Versuchen Sie, Attribute/Klassen/Verschachtelungen zu entfernen, bis der Selektor funktioniert.
Verwenden Sie bei Bedarf explizite Wartezeiten – Dynamische Seiten erfordern möglicherweise Wartezeiten, bis Selektoren verfügbar werden.
Überprüfen Sie die Selektorgenauigkeit – Stellen Sie sicher, dass der Selektor tatsächlich das gewünschte Element findet und nicht irgendein Element.
Sich die Zeit zu nehmen, Selektoren sorgfältig zu debuggen, wird sich durch stabilere Tests auszahlen.
Zusammenfassung
In diesem Leitfaden werden alle wichtigen Aspekte des Auffindens von Elementen mithilfe des CSS-Selektors in Selenium behandelt:
- Syntax und Typen des CSS-Selektors
- Verwendung mit Selenium
find_elementMethoden - Präzise und wartbare Selektoren schreiben
- Häufige Anwendungsfälle und Beispiele
- Vergleich mit XPath
- Debugging und Best Practices
CSS-Selektoren bieten eine leistungsstarke und flexible Möglichkeit, Elemente für Web Scraping und Testautomatisierung gezielt auszuwählen. Wenn Sie die hier gezeigten Techniken beherrschen, können Sie robuste Automatisierungsskripte schreiben, die resistent gegen Änderungen in der Benutzeroberfläche der Anwendung sind. Die ordnungsgemäße Verwendung von CSS-Selektoren ist ein Muss für jeden erfahrenen Selenium-Ingenieur.
