DOM Path Finder lets you hover any element on a page to reveal its unique CSS selector, short selector, XPath, and ready-to-paste querySelector snippet. Click to lock the element, then navigate with Parent/Child/Sibling buttons. Essential for Selenium, Puppeteer, Playwright, and Cypress users.
Writing automation tests, web scrapers, or bookmarklets means writing selectors — but figuring out a stable, unique selector for a specific element is tedious. You open DevTools, inspect, right-click, copy selector, and hope the result is actually unique and stable. DOM Path Finder makes this a single click. Activate the tool and hover any element on the page — it highlights purple as you move. Click to lock it, and the panel fills with four selector formats: a unique path-based CSS selector, a short selector (tag + classes or id), an absolute XPath, and a pre-wrapped document.querySelector('...') snippet ready to paste into a script. Once locked, you can navigate the DOM tree with Parent / First Child / Prev Sibling / Next Sibling buttons without losing focus. Data-testid attributes are detected and prioritized when present — ideal for Playwright/Cypress who use them as anchors. The tool also shows tag, id, classes, bounding size, and display/position properties for quick context.
Move your mouse over the page to see elements highlight purple. Click to lock — no need for DevTools Inspector.
Unique CSS path, short selector, absolute XPath, and wrapped querySelector snippet. Pick whichever fits your tooling.
Once locked, use Parent / First Child / Prev / Next buttons to move through the DOM without re-picking.
Each selector has its own Copy button. Grab the format your script needs and paste directly into your test or scraper.
Displays tag, id, classes, size, display, and position — quick overview without re-inspecting.
If the element has an id, the unique CSS uses #id. If a data-testid is present, it's surfaced for Playwright/Cypress use.
Pick the element under test, copy its selector, and paste into your test code — no more guessing at unique paths.
Find the structural selector for list items on a scraping target. Use short or path-based selector depending on stability needs.
Lock an element and copy its path to investigate why CSS isn't applying — the unique selector shows the element's full tree location.
Copy the pre-wrapped document.querySelector(...) snippet straight into DevTools Console for quick interactive debugging.
When auditing accessibility, use XPath to feed elements into axe-core or other a11y tools that expect XPath references.
Click the Path Finder icon in the DevSuite Pro dock. The tool activates in picking mode immediately.
Move your mouse over the page — each element highlights purple as you pass over it. Scroll as needed to find your target.
Click the element you want. The picker stops and the panel fills with selector formats, context, and copy buttons.
Use Parent/Child/Sibling buttons to refine the selection, or click Pick Element to start hover-picking again.
Click Copy next to the format you need (CSS, XPath, or querySelector). Paste directly into your test, scraper, or console.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
