Über dieses Tool
Ein guter Locator trifft genau ein Element und funktioniert auch nach der nächsten UI-Änderung noch. Mit diesem Tester prüfen Sie einen Locator gegen echten Seitenquelltext, bevor er in einen Selenium-, Playwright- oder Cypress-Test wandert. Fügen Sie das HTML ein (aus den DevTools per „Copy outerHTML“), geben Sie einen XPath-Ausdruck oder CSS-Selektor ein und sehen Sie, wie viele Elemente passen, das Markup jedes Treffers und seine Position in einer gerenderten Vorschau. Die Vorschau ist ein Sandbox-Frame mit deaktivierten Skripten. Das Cheatsheet zeigt gängige XPath-Achsen und -Funktionen neben ihren CSS-Entsprechungen, sofern es welche gibt.
So funktioniert es
- Fügen Sie HTML ein oder klicken Sie auf „Load sample“ (Beispiel laden) für ein Login-Formular und eine Bestelltabelle.
- Geben Sie einen Locator ein. Ausdrücke, die mit / oder ( beginnen, gelten als XPath, alle anderen als CSS; mit dem Schalter erzwingen Sie eine Variante.
- Prüfen Sie die Trefferanzahl: Für ein Klick- oder Assertion-Ziel wollen Sie genau einen Treffer.
- Klicken Sie auf einen Selektor im Cheatsheet, um ihn gegen das Beispiel auszuführen.
FAQ zu XPath & CSS Selector Tester
Soll ich XPath oder CSS-Selektoren verwenden?
Bevorzugen Sie CSS oder Framework-Locators (etwa getByRole und getByTestId in Playwright), weil sie schneller und lesbarer sind. Greifen Sie zu XPath, wenn Sie etwas brauchen, das CSS nicht ausdrücken kann: Treffer über Text mit normalize-space(), der Weg nach oben zu einem Vorfahren oder eine Zelle relativ zu einem Label mit following-sibling::.
Warum funktioniert mein XPath in der Browserkonsole, aber nicht hier?
Browser unterstützen nur XPath 1.0, und das verwendet auch dieses Tool. Prüfen Sie, ob das eingefügte HTML dem entspricht, was der Browser tatsächlich gerendert hat: Per JavaScript hinzugefügte Inhalte oder Inhalte in einem iframe oder Shadow DOM stehen nicht im Seitenquelltext. Kopieren Sie outerHTML aus den DevTools, um das Live-DOM zu erhalten.
Warum trifft contains(@class, "btn") zu viel?
contains() prüft auf Teilstrings und trifft daher auch "btn-primary" und "submit-btn". Verwenden Sie in XPath contains(concat(' ', normalize-space(@class), ' '), ' btn ') oder in CSS einfach .btn, um einen vollständigen Klassennamen zu treffen.