Was ist ein CSS-Selektor? Definition & Beispiel

CSS-Selektor

Englisch: CSS selector

Auch genannt: CSS-Selektoren, CSS-Locator, CSS Locator, CSS Selectors

Definition

Ein Muster aus der Sprache CSS, das Elemente nach Tag, ID, Klasse, Attribut oder Position findet und als schneller, lesbarer Locator in UI-Tests weit verbreitet ist.

Ein CSS-Selektor ist dasselbe Muster, mit dem ein Stylesheet festlegt, für welche Elemente eine Regel gilt. Testtools nutzen es, um Elemente zu finden: Selenium über By.cssSelector, Playwright über page.locator(), Cypress über cy.get(). Selektoren werden vom Browser nativ ausgewertet, sind meist kürzer als das entsprechende XPath und können von den meisten Frontend-Entwicklern gelesen werden.

Beispiel

#email                          id
.alert.alert-error              element with both classes
button[type="submit"]           tag plus attribute
[data-testid="checkout"]        dedicated test attribute
form.login > button             direct child
ul.results li:nth-child(2)      second list item
a[href^="/invoices/"]           attribute starts with
input:not([disabled])           negation

driver.findElement(By.cssSelector("[data-testid='checkout']")).click();

await page.locator('[data-testid="checkout"]').click();

Unterschied zu XPath

Textsuche. Standard-CSS kann nicht nach Textinhalt selektieren. XPath kann das, und Playwright bringt eigene Text-Engines mit (getByText sowie die Pseudoklasse :has-text() innerhalb von page.locator()), doch das sind Playwright-Erweiterungen, kein CSS.
Richtung. Jahrelang konnte CSS nur nach unten navigieren. Die Pseudoklasse :has(), die aktuelle Browser inzwischen unterstützen, erlaubt es, ein Elternelement über seine Kinder zu finden (tr:has(td.overdue)), und schließt damit einen Großteil der Lücke.
Lesbarkeit. Für ID-, Klassen- und Attributsuche ist CSS kürzer und klarer.

Häufige Fehler

Styling-Klassen als Locators. .btn-blue ändert sich, wenn sich das Design ändert. Utility-Class-Frameworks verschärfen das Problem.
Lange strukturelle Ketten. div > div > div:nth-child(3) span kodiert das Layout und bricht, sobald ein Wrapper hinzukommt.
:nth-child mit :nth-of-type verwechseln. li:nth-child(2) bedeutet „ein li, das das zweite Kind seines Elternelements ist“, nicht „das zweite li“.

Wenn Sie das Markup kontrollieren, ist ein mit den Entwicklern vereinbartes data-testid-Attribut der stabilste CSS-Locator. Wenn nicht, bevorzugen Sie rollenbasierte Locators, sofern das Framework sie anbietet.