Mit dem DOM-Pfad-Finder können Sie über jedes Element einer Seite fahren, um dessen eindeutigen CSS-Selektor, Kurz-Selektor, XPath und ein kopierbereites querySelector-Snippet anzuzeigen. Klicken Sie, um das Element festzulegen, und navigieren Sie dann mit den Schaltflächen für Eltern/Kinder/Geschwister. Unverzichtbar für Anwender von Selenium, Puppeteer, Playwright und Cypress.
Das Erstellen von Automatisierungstests, Web-Scrapern oder Bookmarklets bedeutet das Schreiben von Selektoren — aber einen stabilen, eindeutigen Selektor für ein bestimmtes Element zu finden, ist mühsam. Sie öffnen die DevTools, untersuchen das Element, klicken mit der rechten Maustaste, kopieren den Selektor und hoffen, dass das Ergebnis tatsächlich eindeutig und stabil ist. Der DOM-Pfad-Finder macht dies zu einem einzigen Klick. Aktivieren Sie das Tool und fahren Sie über ein beliebiges Element auf der Seite — es wird lila hervorgehoben. Klicken Sie, um es zu fixieren, und das Panel füllt sich mit vier Selektorformaten: einem eindeutigen pfadgestützten CSS-Selektor, einem Kurz-Selektor (Tag + Klassen oder ID), einem absoluten XPath und einem fertigen document.querySelector('...') Snippet. Nach der Fixierung können Sie den DOM-Baum mit den Schaltflächen Eltern / Erstes Kind / Vorheriges Geschwister / Nächstes Geschwister navigieren, ohne den Fokus zu verlieren. data-testid Attribute werden erkannt und priorisiert — ideal für Playwright/Cypress. Das Tool zeigt außerdem Tag, ID, Klassen, Abmessungen und Anzeige/Positions-Eigenschaften für einen schnellen Kontext an.
Bewegen Sie die Maus über die Seite, um Elemente lila hervorzuheben. Klicken Sie zum Fixieren — kein DevTools-Inspektor nötig.
Eindeutiger CSS-Pfad, Kurz-Selektor, absoluter XPath und fertiges querySelector-Snippet. Wählen Sie, was zu Ihrem Tooling passt.
Nach dem Fixieren nutzen Sie die Tasten Eltern / Erstes Kind / Vorher / Weiter, um sich durch den DOM zu bewegen, ohne neu wählen zu müssen.
Jeder Selektor hat einen eigenen Kopier-Button. Erfassen Sie das Format für Ihr Skript und fügen Sie es direkt in Ihren Test oder Scraper ein.
Zeigt Tag, ID, Klassen, Größe, Anzeige und Position — eine schnelle Übersicht ohne erneute Inspektion.
Wenn das Element eine ID hat, nutzt der CSS-Pfad #id. Wenn ein data-testid vorhanden ist, wird dies für Playwright/Cypress bevorzugt angezeigt.
Wählen Sie das zu testende Element, kopieren Sie den Selektor und fügen Sie ihn in Ihren Testcode ein — kein Raten bei eindeutigen Pfaden mehr.
Finden Sie den strukturellen Selektor für Listeneinträge. Wählen Sie Kurz- oder Pfad-Selektoren je nach Stabilitätsanforderungen.
Fixieren Sie ein Element und kopieren Sie seinen Pfad, um zu untersuchen, warum CSS nicht angewendet wird — der Selektor zeigt die Baumposition.
Kopieren Sie das fertige document.querySelector(...) Snippet direkt in die DevTools-Konsole für schnelles interaktives Debugging.
Nutzen Sie bei Barrierefreiheits-Audits XPath, um Elemente an axe-core oder andere a11y-Tools zu übergeben, die XPath-Referenzen erwarten.
Klicken Sie auf das Pfad-Finder-Symbol im DevSuite Pro Dock. Das Tool wird sofort im Auswahlmodus aktiviert.
Fahren Sie mit der Maus über die Seite — jedes Element wird lila hervorgehoben. Scrollen Sie bei Bedarf, um Ihr Ziel zu finden.
Klicken Sie auf das gewünschte Element. Die Auswahl stoppt und das Panel zeigt Selektorformate, Kontext und Kopier-Buttons.
Nutzen Sie die Eltern/Kind/Geschwister-Tasten zur Verfeinerung oder klicken Sie auf Element wählen für eine neue Auswahl.
Klicken Sie auf Kopieren neben dem Format (CSS, XPath oder querySelector). Fügen Sie es direkt in Ihren Test, Scraper oder die Konsole ein.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 64+ Entwickler-Tools für Ihren Browser frei.
