LocateX — Smart XPath, CSS & DOM Inspector

Inspect any element on the page. Generate CSS and XPath instantly. Validate selectors live. Build reusable locator workflows without DevTools chaos. 🎯 Pick elements visually, generate smarter locators faster, and move from inspection to automation in one clean workflow. LocateX is a fast, polished locator toolkit for QA engineers, test automation engineers, and frontend developers who care about stable selectors, clean output, and a smoother workflow. No messy copy-paste loops, no brittle one-off locators, no bouncing between tabs - just inspect, validate, reuse, and keep shipping. 🧭 INSPECT DIRECTLY ON THE PAGE Most locator workflows are slow and fragmented. LocateX lets you inspect elements visually from a side panel and capture what matters in one click. You can instantly see: 🔥 CSS locator candidates 🔥 XPath locator candidates 🔥 Uniqueness and stability feedback 🔥 ARIA metadata 🔥 iframe and Shadow DOM context 🔥 Framework-ready output ⚡ GENERATE SMART LOCATORS, NOT JUST RANDOM SELECTORS LocateX doesn’t stop at one guessed selector. It builds multiple locator strategies so you can choose the one that is actually reusable. It can generate from: ✅ Stable IDs ✅ Test attributes like data-testid, data-test, data-cy, data-qa ✅ Generic data-* attributes ✅ ARIA attributes ✅ Stable class combinations ✅ Fallback DOM paths ✅ Text-based XPath when appropriate 🔎 VALIDATE SELECTORS LIVE ON THE ACTIVE PAGE Paste any CSS or XPath selector and verify it against the real DOM instantly. 🚀 Real-time match count 🎯 Highlight matched elements on the page ⚠️ Invalid selector feedback 🛠️ Faster debugging and refinement 🛡️ SEE STABILITY BEFORE IT BREAKS A selector that works once is not always a selector you want in a test suite. LocateX helps you spot fragile locators early: ⚠️ Dynamic IDs ⚠️ Deep DOM paths ⚠️ Positional selectors ⚠️ Class-based selectors likely to break after refactors ⚠️ Text-dependent XPath 🧩 BUILD REUSABLE LOCATOR TEMPLATES Premium users can build reusable XPath template unions from real DOM context instead of relying on hardcoded app-specific rules. LocateX can pull attributes from: 🔹 The selected element 🔹 Its ancestors 🔹 label[for] relationships 🔹 aria-labelledby relationships That makes it useful across admin panels, enterprise apps, design systems, and component-heavy products. 🛠️ HOW IT WORKS Open LocateX Click Pick Element Select any element on the page Review CSS and XPath candidates Validate or refine selectors live Save locators or generate reusable templates ✨ FREE FEATURES 🎯 Visual element picker 🧪 CSS locator generation 🧪 XPath locator generation 📍 Live selector validator 📊 Uniqueness and stability feedback ♿ ARIA metadata display 🪟 iframe and Shadow DOM hints 🎨 Clean side panel UI with light and dark themes 🚀 PREMIUM UPGRADE ($3 ONE-TIME) Supercharge your automation workflow: ⚙️ Framework Output — generate ready-to-paste code for Playwright, Cypress, Selenium JS, Selenium Python, and WebdriverIO 📚 Locator Collection — save, search, rename, import, and export reusable locators 🧩 Template Builder — create reusable XPath locator templates from real DOM context 🔒 PRIVACY-FIRST WORKFLOW LocateX is built for focused local inspection workflows. 🚫 No ads 🚫 No analytics dashboard bloat 🚫 No unnecessary background scanning 💾 Saved locators and templates stay in Chrome extension storage 🎛️ Page access is used only when you explicitly inspect or validate selectors ⚙️ TECHNICAL DETAILS Chrome Manifest V3 Vue 3 + TypeScript WXT build system Pinia state management Naive UI + Tailwind CSS Side panel workflow for modern locator inspection Built for teams who want faster locator creation, cleaner automation workflows, and selectors they can trust.