A Chrome extension for QA and automation engineers. Click any element on any page and get ranked, human-readable XPath and CSS selectors — verified live against the DOM, ready to paste into your framework.
data-testid, data-cy, data-qa and friends outrank everything — if your team put an anchor there, that's the selector you get.
label
Selectors a human can read
Form fields anchor to their visible label — //input[@id = //label[.='Email']/@for] — and buttons to their text. Auto-generated IDs and hashed CSS-in-JS classes are detected and deprioritized.
verified
Checked against the live page
Every candidate is evaluated before you see it. Matches more than one element? You're told, and offered a pinned variant that matches exactly the one you picked. Hover any candidate to see everything it matches.
copy as
Your framework's syntax, not just a string
Copy any selector as Selenium (Python or Java), Playwright, or Cypress code — plus a Playwright tab with getByRole, getByLabel, and getByTestId locators.
tester
Debug the selector you already have
Paste any XPath or CSS into the panel and watch the live match count, with every match outlined on the page. The fastest answer to "why does CI say NoSuchElementException?"
Route
Three steps from element to selector
Arm the picker
Click the toolbar icon, press Alt + Shift + X, or right-click any element → Inspect with XPath Compass.
Click what you want
Elements highlight as you hover. Missed by one? Walk to the parent, sibling, or child from the panel — no re-picking.
Copy in your framework
Ranked candidates with honest notes on stability, one Copy button each, in whatever syntax your suite speaks.
Uncharted territory
Shadow DOM, where XPath can't go
XPath cannot cross these boundaries — at all — and most tools fail silently there. XPath Compass detects the boundary, tells you plainly, and charts a way through instead: a deep CSS selector for engines that pierce open roots, and a chained JS expression verified against the live page.
// picked two boundaries deep
document.querySelector('[data-testid="cart"]')
.shadowRoot.querySelector('inner-panel:nth-of-type(1)')
.shadowRoot.querySelector('#buy')
◉
Private by design
Runs only on pages where you invoke it (Chrome's activeTab model). No network requests, no analytics, history stored locally in your browser only.
XPath Compass
