DOM Path Finder lar deg holde musepekeren over et hvilket som helst element på siden for å avdekke dets unike CSS-velger, korte velger, XPath og en ferdig innlimbar querySelector-snutt. Klikk for å låse elementet, og naviger deretter med knappene Parent/Child/Sibling. Essensielt for brukere av Selenium, Puppeteer, Playwright og Cypress.
Å skrive automatiserte tester, web-skrapere eller bokmerker innebærer å skrive velgere — men å finne frem til en stabil, unik velger for et spesifikt element er kjedelig arbeid. Du åpner DevTools, inspiserer, høyreklikker, kopierer velger, og håper resultatet faktisk er unikt og stabilt. DOM Path Finder gjør dette til ett enkelt klikk. Aktiver verktøyet og hold musepekeren over et hvilket som helst element på siden — det markeres lilla mens du beveger deg. Klikk for å låse det, og panelet fylles med fire velgerformater: en unik sti-basert CSS-velger, en kort velger (tag + klasser eller id), en absolutt XPath, og en ferdig innpakket document.querySelector('...')-snutt klar til å limes inn i et skript. Når elementet er låst, kan du navigere DOM-treet med knappene Parent / First Child / Prev Sibling / Next Sibling uten å miste fokus. Data-testid-attributter oppdages og prioriteres når de finnes — ideelt for Playwright/Cypress-brukere som bruker dem som ankere. Verktøyet viser også tag, id, klasser, avgrensningsstørrelse og display-/posisjonsegenskaper for rask kontekst.
Beveg musen over siden for å se elementer markeres lilla. Klikk for å låse — ingen behov for DevTools Inspector.
Unik CSS-sti, kort velger, absolutt XPath og innpakket querySelector-snutt. Velg det som passer verktøyene dine.
Når elementet er låst, bruk knappene Parent / First Child / Prev / Next for å bevege deg gjennom DOM-en uten å plukke på nytt.
Hver velger har sin egen Kopier-knapp. Hent formatet skriptet ditt trenger og lim direkte inn i testen eller skraperen.
Viser tag, id, klasser, størrelse, display og posisjon — rask oversikt uten å måtte inspisere på nytt.
Hvis elementet har en id, bruker den unike CSS-en #id. Hvis en data-testid finnes, løftes den frem for bruk i Playwright/Cypress.
Plukk elementet som testes, kopier velgeren, og lim inn i testkoden — ikke mer gjetting på unike stier.
Finn den strukturelle velgeren for listeelementer på et skrapemål. Bruk kort eller sti-basert velger avhengig av stabilitetsbehov.
Lås et element og kopier stien for å undersøke hvorfor CSS ikke slår inn — den unike velgeren viser elementets fulle plassering i treet.
Kopier den ferdig innpakkede document.querySelector(...)-snutten rett inn i DevTools Console for rask, interaktiv feilsøking.
Under tilgjengelighetsrevisjon, bruk XPath til å mate elementer inn i axe-core eller andre a11y-verktøy som forventer XPath-referanser.
Klikk på Path Finder-ikonet i DevSuite Pro-dokken. Verktøyet aktiveres umiddelbart i plukkemodus.
Beveg musen over siden — hvert element markeres lilla når du passerer over det. Scroll etter behov for å finne målet ditt.
Klikk på elementet du ønsker. Plukkingen stopper, og panelet fylles med velgerformater, kontekst og kopieringsknapper.
Bruk knappene Parent/Child/Sibling for å finjustere valget, eller klikk Pick Element for å starte hold-over-plukking igjen.
Klikk Kopier ved siden av formatet du trenger (CSS, XPath eller querySelector). Lim direkte inn i testen, skraperen eller konsollen.
Installer DevSuite Pro gratis og lås opp 64+ utviklerverktøy for nettleseren din.
