DOM Path Finder laat u elk element op een pagina aanwijzen om de unieke CSS-selector, korte selector, XPath en klaar-om-in-te-plakken querySelector-fragment te onthullen. Klik om het element vast te zetten en navigeer vervolgens met Ouder/Kind/Broer/Zus-knoppen. Essentieel voor Selenium, Puppeteer, Playwright en Cypress gebruikers.
Automation tests, web scrapers of bookmarklets schrijven betekent selectors schrijven — maar een stabiele, unieke selector voor een specifiek element bepalen is vervelend. U opent DevTools, inspecteert, klikt met de rechtermuisknop, kopieert selector en hoopt dat het resultaat daadwerkelijk uniek en stabiel is. DOM Path Finder maakt dit één klik. Activeer het gereedschap en wijs elk element op de pagina aan — het wordt paars gemarkeerd wanneer u erover beweegt. Klik om het vast te zetten, en het paneel vult zich met vier selector-indelingen: een unieke, op pad gebaseerde CSS-selector, een korte selector (tag + klassen of id), een absolute XPath en een voorverpakt document.querySelector('...') fragment klaar om in een script in te plakken. Eenmaal vergrendeld, kunt u door de DOM-boomstructuur navigeren met Ouder / Eerste kind / Vorige broer/zus / Volgende broer/zus-knoppen zonder focus te verliezen. Data-testid-attributen worden gedetecteerd en geprioriteerd wanneer aanwezig — ideaal voor Playwright/Cypress die ze als ankers gebruiken. Het gereedschap toont ook tag, id, klassen, grensgrootte en display/positie-eigenschappen voor snelle context.
Beweeg uw muis over de pagina om elementen paars gemarkeerd te zien. Klik om vast te zetten — geen DevTools Inspector nodig.
Unieke CSS-pad, korte selector, absolute XPath en verpakte querySelector-fragment. Kies welke bij uw tooling past.
Eenmaal vergrendeld, kunt u met Ouder / Eerste kind / Vorig / Volgende knoppen door de DOM gaan zonder opnieuw te kiezen.
Elke selector heeft zijn eigen Copy-knop. Pak het formaat dat uw script nodig heeft en plak direct in uw test of scraper.
Toont tag, id, klassen, grootte, display en positie — snel overzicht zonder opnieuw in te spelen.
Als het element een id heeft, gebruikt de unieke CSS #id. Als een data-testid aanwezig is, wordt deze opgeserveerd voor Playwright/Cypress-gebruik.
Kies het element onder test, kopieer de selector en plak in uw testcode — geen gissen naar unieke paden meer.
Zoek de structurele selector voor lijstitems op een scrapingdoel. Gebruik korte of op pad gebaseerde selector afhankelijk van stabiliteitsvereisten.
Vergrendel een element en kopieer het pad om te onderzoeken waarom CSS niet van toepassing is — de unieke selector toont de volledige boomlocatie van het element.
Kopieer het voorverpakte document.querySelector(...) fragment direct naar DevTools Console voor snelle interactieve debugging.
Bij het controleren van toegankelijkheid, gebruik XPath om elementen in axe-core of andere a11y-tools in te voeren die XPath-referenties verwachten.
Klik op het pictogram Path Finder in de DevSuite Pro dock. Het gereedschap wordt onmiddellijk in pick-modus geactiveerd.
Beweeg uw muis over de pagina — elk element wordt paars gemarkeerd wanneer u erover beweegt. Scrol indien nodig om uw doel te vinden.
Klik op het element dat u wilt. De picker stopt en het paneel vult zich met selector-indelingen, context en Copy-knoppen.
Gebruik Ouder/Kind/Broer/Zus-knoppen om de selectie te verfijnen of klik op Element kiezen om opnieuw aanwijzen te starten.
Klik op Kopiëren naast het formaat dat u nodig hebt (CSS, XPath of querySelector). Plak direct in uw test, scraper of console.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
