Zum Inhalt springen
Tool

XPath online testen, auch hinter Shadow Roots

HTML einfügen, Ausdruck tippen, Treffer beim Tippen sehen. Deklaratives Shadow DOM wird geparst und durchsucht, und jeder Treffer bekommt einen zusammengesetzten Pfad, der sagt, unter welchem Host er liegt.

Links das HTML, rechts der Ausdruck, etwa //a[normalize-space()='Kündigen']. Es wird nichts hochgeladen.

Dieses Tool läuft im Browser und braucht JavaScript.

Beobachtungen, keine Urteile. Deine Eingabe wird für dieses Ergebnis verarbeitet und in ein Nutzungsjournal geschrieben, das die Datenschutzerklärung beschreibt; sonst wird nichts gespeichert.

Wie die Suche funktioniert und warum Shadow DOM ein Problem ist

Der Tester läuft vollständig in deinem Browser. Das eingefügte Markup wird in ein Dokument geparst, das nie in die Seite eingehängt wird, und der Ausdruck läuft durch die XPath-Engine des Browsers, dasselbe document.evaluate, bei dem auch ein Playwright- oder Selenium-Locator landet. Kein Server ist beteiligt; das Nutzungsjournal hält nur fest, dass das Tool geöffnet wurde.

XPath 1.0, nicht mehr

Browser können XPath 1.0. Du bekommst Achsen, Prädikate, contains(), normalize-space(), starts-with(), text() und Positionsfilter. Du bekommst kein matches(), kein ends-with() und nichts aus XPath 2.0 oder später. Ein Ausdruck aus einem XML-Werkzeug kann im Browser also scheitern, ohne falsch zu sein. Der Tester zeigt in dem Fall die Fehlermeldung der Engine.

Die Shadow-Grenze

Ein XPath-Ausdruck endet an einer Shadow-Grenze. Eine Web-Komponente, die ihren Button in einer Shadow Root rendert, ist für //button aus dem Dokument unsichtbar. Deshalb versagt ein Locator, der auf einer Seite läuft, auf einem Portal aus Komponenten. Mit deklarativem Shadow DOM, dem template-Element mit shadowrootmode, ist das inzwischen auch auf serverseitig gerenderten Seiten üblich, Behördenportale und Banken eingeschlossen.

Der Tester geht damit so um wie die Wahrnehmungsschicht von Browserberg: Der Ausdruck wird im Dokument ausgewertet und dann noch einmal in jeder Shadow Root. Ein Treffer in einer Root wird mit einem zusammengesetzten Pfad gemeldet, erst der Pfad zum Host-Element, dann der Pfad in dessen Baum. Das ist die Adresse, mit der ein Agent etwas anklickt, das ein einfacher XPath nicht erreicht.

Eindeutigkeit

Im Produkt ist ein XPath eine Sprosse auf einer fünfstufigen Leiter der Elementidentität. Wird ein gespeicherter Plan erneut ausgeführt, werden die Sprossen der Reihe nach probiert, die passende wird protokolliert, und ein Ausdruck, der auf mehr als ein Element passt, wird als mehrdeutig abgelehnt statt stillschweigend auf den ersten Treffer aufgelöst. Darum zeigt der Tester die Trefferzahl so prominent. Eins ist die Zahl, die du willst.

Was der Tester nicht beurteilt

Er sucht im eingefügten Markup, nicht auf einer lebenden Seite. Was ein Skript nach dem Laden ergänzt, fehlt, solange du nicht den gerenderten DOM einfügst. Er sagt nichts darüber, ob ein gefundenes Element sichtbar, aktiv oder tatsächlich klickbar ist; das ist Aufgabe der Agenten-Sicht, in der Klickbarkeit aus vier Signalen mit protokolliertem Grund besteht und Erreichbarkeit ein Treffertest ist, keine Rechteckgeometrie. Und er sagt nicht, ob der Ausdruck das nächste Deployment überlebt. Ein Pfad aus generierten Klassennamen passt heute und morgen nicht mehr. Text, Rollen und stabile Attribute halten länger.

Einen Ausdruck testen

  1. Markup einfügen

    Ein Ausschnitt aus den Entwicklerwerkzeugen reicht. Für eine Komponente mit Shadow DOM nimm das template mit shadowrootmode mit, so wie der Server es geschickt hat.

  2. Ausdruck schreiben

    XPath 1.0, so wie Browser es auswerten. Die Treffer werden bei jedem Tastendruck neu berechnet; ein Syntaxfehler steht an Ort und Stelle statt als leere Liste.

  3. Trefferliste lesen

    Jeder Treffer zeigt Tag, Text und den zusammengesetzten Pfad. Liegt er in einer Shadow Root, steht der Host dabei.

  4. Bis auf einen Treffer eingrenzen

    Zwei Treffer sind für einen Agenten mehrdeutig. Ergänze ein Prädikat auf Text, Attribut oder Position, bis die Zahl auf eins steht.

Fragen zu XPath im Browser

Wie teste ich einen XPath-Ausdruck?

In jedem Browser in der Konsole der Entwicklerwerkzeuge mit $x('//dein/ausdruck'), oder du fügst das Markup hier ein und siehst die Treffer beim Tippen, ohne die lebende Seite anzufassen.

Warum findet mein XPath nichts in einer Web-Komponente?

Das Element liegt in einer Shadow Root, und XPath überquert keine Shadow-Grenzen. Werte innerhalb der Root aus oder nimm ein Werkzeug, das Pfade über Hosts hinweg zusammensetzt, so wie dieser Tester.

Kann ich XPath-2.0-Funktionen nutzen?

Nein, weil Browser sie nicht können. matches(), ends-with() und reguläre Ausdrücke fehlen; contains(), starts-with() und normalize-space() sind da.

XPath oder CSS-Selektor?

Keins ist besser. XPath kann auf Textinhalt matchen und zum Elternelement hochlaufen, CSS nicht; CSS ist kürzer und schneller für Attribute und Klassen. Agenten nutzen beides, je Element.

Wird mein HTML an einen Server geschickt?

Nein. Parsen und Auswerten passieren im Browser-Tab. Einmal geladen, funktioniert die Seite auch offline.

Ausdrücke, die Redesigns überleben

Auf Text matchen


//button[normalize-space()='Weiter'] passt noch, wenn eine Spalte dazukommt. //div[3]/button[2] nicht.

Stabile Attribute


aria-label, name oder data-testid ändern sich seltener als Klassen aus einem Build-Werkzeug.

Generierte Klassen meiden


Ein Pfad über css-1x2y3z ist nach dem nächsten Deployment wertlos, ohne dass sich die Seite sichtbar geändert hat.

Genau ein Treffer


Ein Agent lehnt einen mehrdeutigen Ausdruck ab. Schränke ein, bis die Trefferzahl eins ist, nicht bis der erste Treffer zufällig stimmt.

Keine Selektoren mehr von Hand

Fünf Browserstunden, keine Karte. observe liefert dir Kandidaten samt Identität auf jeder Seite.