Med DOM Path Finder kan du hålla muspekaren över valfritt element på en sida för att avslöja dess unika CSS-selektor, kort selektor, XPath och en färdig querySelector-snutt att klistra in. Klicka för att låsa elementet och navigera sedan med knapparna Parent/Child/Sibling. Ett måste för dig som använder Selenium, Puppeteer, Playwright och Cypress.
Att skriva automatiseringstester, webbskrapor eller bokmärkeslänkar innebär att skriva selektorer — men att hitta en stabil, unik selektor för ett specifikt element är tröttsamt. Du öppnar DevTools, inspekterar, högerklickar, kopierar selektorn och hoppas att resultatet faktiskt är unikt och stabilt. DOM Path Finder gör detta till ett enda klick. Aktivera verktyget och håll muspekaren över valfritt element på sidan — det markeras med lila när du rör muspekaren. Klicka för att låsa det, så fylls panelen med fyra selektorformat: en unik sökvägsbaserad CSS-selektor, en kort selektor (tagg + klasser eller id), en absolut XPath samt en färdiginlindad document.querySelector('...')-snutt redo att klistras in i ett skript. Efter låsning kan du navigera i DOM-trädet med knapparna Parent / First Child / Prev Sibling / Next Sibling utan att förlora fokus. Data-testid-attribut upptäcks och prioriteras när de finns — perfekt för Playwright/Cypress-användare som använder dem som ankare. Verktyget visar även tagg, id, klasser, storlek och display/position-egenskaper för snabb kontext.
Rör muspekaren över sidan för att se element markeras med lila. Klicka för att låsa — inget behov av DevTools Inspector.
Unik CSS-sökväg, kort selektor, absolut XPath och en inlindad querySelector-snutt. Välj det som passar din verktygskedja.
När elementet är låst kan du använda knapparna Parent / First Child / Prev / Next för att röra dig genom DOM:et utan att välja på nytt.
Varje selektor har en egen Kopiera-knapp. Ta det format ditt skript behöver och klistra in direkt i testet eller skrapan.
Visar tagg, id, klasser, storlek, display och position — snabb översikt utan att behöva inspektera igen.
Om elementet har ett id använder den unika CSS-selektorn #id. Finns ett data-testid visas det för användning i Playwright/Cypress.
Välj elementet som testas, kopiera dess selektor och klistra in i testkoden — inget mer gissande på unika sökvägar.
Hitta den strukturella selektorn för listobjekt på ett skrapningsmål. Använd kort eller sökvägsbaserad selektor beroende på hur stabilt du behöver det.
Lås ett element och kopiera dess sökväg för att undersöka varför CSS inte tillämpas — den unika selektorn visar elementets fullständiga trädposition.
Kopiera den färdiginlindade document.querySelector(...)-snutten direkt till DevTools Console för snabb interaktiv felsökning.
Vid tillgänglighetsgranskningar kan du använda XPath för att mata in element i axe-core eller andra a11y-verktyg som förväntar sig XPath-referenser.
Klicka på Path Finder-ikonen i DevSuite Pro-docken. Verktyget aktiveras direkt i väljarläge.
Rör muspekaren över sidan — varje element markeras med lila när du rör dig över det. Scrolla vid behov för att hitta ditt mål.
Klicka på elementet du vill ha. Väljaren stannar och panelen fylls med selektorformat, kontext och kopieringsknappar.
Använd knapparna Parent/Child/Sibling för att förfina valet, eller klicka på Pick Element för att börja peka igen.
Klicka på Kopiera bredvid det format du behöver (CSS, XPath eller querySelector). Klistra in direkt i test, skrapa eller konsol.
Installera DevSuite Pro gratis och lås upp 64+ utvecklarverktyg för din webbläsare.
