DOM Path Finder lader dig holde musen over et hvilket som helst element på en side for at afsløre dets unikke CSS-selektor, korte selektor, XPath og en klar-til-indsætning querySelector-snippet. Klik for at låse elementet, og naviger derefter med knapperne Parent/Child/Sibling. Essentielt for brugere af Selenium, Puppeteer, Playwright og Cypress.
At skrive automatiseringstests, web-scrapere eller bookmarklets betyder at skrive selektorer — men at finde en stabil, unik selektor til et specifikt element er besværligt. Du åbner DevTools, inspicerer, højreklikker, kopierer selektoren, og håber, at resultatet rent faktisk er unikt og stabilt. DOM Path Finder gør det til ét klik. Aktivér værktøjet, og hold musen over et hvilket som helst element på siden — det markeres med lilla, mens du bevæger musen. Klik for at låse det, og panelet fyldes med fire selektorformater: en unik sti-baseret CSS-selektor, en kort selektor (tag + klasser eller id), en absolut XPath og en færdigpakket document.querySelector('...')-snippet, klar til at indsætte i et script. Når elementet er låst, kan du navigere i DOM-træet med knapperne Parent / First Child / Prev Sibling / Next Sibling uden at miste fokus. Data-testid-attributter registreres og prioriteres, når de findes — ideelt for Playwright/Cypress-brugere, der bruger dem som ankre. Værktøjet viser desuden tag, id, klasser, størrelse og display/position-egenskaber for hurtig kontekst.
Flyt musen hen over siden for at se elementer blive markeret med lilla. Klik for at låse — ingen grund til DevTools Inspector.
Unik CSS-sti, kort selektor, absolut XPath og en indpakket querySelector-snippet. Vælg det format, der passer til dit værktøj.
Når elementet er låst, kan du bruge knapperne Parent / First Child / Prev / Next til at bevæge dig gennem DOM'et uden at skulle vælge på ny.
Hver selektor har sin egen Kopiér-knap. Hent det format, dit script skal bruge, og indsæt det direkte i din test eller scraper.
Viser tag, id, klasser, størrelse, display og position — hurtigt overblik uden at skulle inspicere igen.
Hvis elementet har et id, bruger den unikke CSS #id. Hvis en data-testid er til stede, vises den til brug i Playwright/Cypress.
Vælg det element, der testes, kopiér dets selektor, og indsæt i din testkode — ikke mere gætteri om unikke stier.
Find den strukturelle selektor for listeelementer på et scraping-mål. Brug kort eller sti-baseret selektor afhængigt af stabilitetsbehov.
Lås et element, og kopiér dets sti for at undersøge, hvorfor CSS ikke bliver anvendt — den unikke selektor viser elementets fulde placering i træet.
Kopiér den færdigpakkede document.querySelector(...)-snippet direkte ind i DevTools Console til hurtig interaktiv fejlfinding.
Ved audit af tilgængelighed kan du bruge XPath til at fodre elementer ind i axe-core eller andre a11y-værktøjer, der forventer XPath-referencer.
Klik på ikonet Path Finder i DevSuite Pro-dockens. Værktøjet aktiveres straks i vælgertilstand.
Flyt musen hen over siden — hvert element markeres med lilla, mens du bevæger dig hen over det. Rul efter behov for at finde dit mål.
Klik på det element, du vil have. Vælgeren stopper, og panelet fyldes med selektorformater, kontekst og kopiér-knapper.
Brug knapperne Parent/Child/Sibling til at forfine valget, eller klik på Pick Element for at starte hover-valg igen.
Klik på Kopiér ved siden af det format, du har brug for (CSS, XPath eller querySelector). Indsæt direkte i din test, scraper eller konsol.
Installer DevSuite Pro gratis og lås op for 64+ udviklerværktøjer til din browser.
