AutoMate: Locator Generator – CSS, XPath, Playwright, Cypress, Selenium

Generate CSS, XPath locators & ready-to-paste Playwright, Cypress, Selenium code. Pick elements visually. Highlight to validate.

🔹AutoMate – CSS, XPath locators for Playwright, Cypress & Selenium Generate reliable CSS selectors & XPath locators instantly. Pick elements visually, copy in one click, and validate locators by highlighting them. No DevTools. No trial-and-error. AutoMate is a Chrome extension built for QA engineers, SDETs, and test automation engineers to quickly generate stable CSS and XPath locators for web elements. Finding unique and maintainable locators is one of the most time-consuming and error-prone parts of UI automation. AutoMate simplifies this by allowing users to visually pick elements directly from the page and instantly receive well-ranked locator suggestions. 🚀 **New in v1.5.0:** - 🧩 **One-click code generation** — every locator card can be copied as a ready-to-paste **Playwright**, **Cypress**, or **Selenium-JS** snippet. Pick a `<button>` → get `await page.locator("…").click();`. Pick an `<input>` → get `.fill("sample text")`. Pick a `<select>` → get `.selectOption("value")` / `.select("value")` / `Select.selectByValue("value")` depending on framework. Selection persists across picks (`chrome.storage.local`). - 🎯 **Framework switcher in the modal** — segmented control at the top (`Raw / Playwright / Cypress / Selenium`). Switching frameworks re-renders the visible locator text on every card so what you see is what you copy. - 🪟 **New floating, draggable, resizable modal** — replaces the full-height right-side panel. Defaults to 560×560 px in the bottom-right corner. Drag the blue header to reposition, drag the bottom-right corner to resize. Position **and** size persist in `chrome.storage.local` across sessions. A real **✕ close** button now lives in the header. - 🎨 **Popup UI polish** — tabbed layout (`🎯 Pick` / `🔍 Test`), header-level `?` help drawer, consolidated styles (no more inline `<style>` in `popup.html`), and a friendlier in-page launcher pill ("AutoMate is ready · Click Pick to start"). - 🧠 **Smarter Playwright XPath** — no unnecessary `xpath=` prefix; relies on Playwright's auto-detection for selectors starting with `//`. - 📌 **Cypress XPath note** — a small inline tip appears when you select Cypress + view XPath locators, reminding you to install the `cypress-xpath` plugin. 🛠 **Fixed in v1.4.1:** - 🟦 **Reliable keyboard navigation after *Start Pick Mode*.** Pick Mode now shows a blue **“Click to start picking”** launcher on the page; clicking it hands keyboard focus to the page so `↑` / `↓` / `Enter` work consistently on every site, including ones with aggressive global hotkey libraries (e.g. github.com, GitLab, Notion, Jira). *Pick another / Pick Parent / Pick Child* are unaffected. 🚀 New in v1.4.0: - 🌳 Pick Parent / Pick Child buttons in the results panel — instantly regenerate locators for the parent or first child of the picked element without re-entering pick mode. - ⌨️ Keyboard DOM walking (`↑`/`↓`) with `Enter` to confirm the highlighted element. - 🎯 Smarter element promotion for `<img>`/`<svg>`/wrappers, ancestor-relative fallbacks, and intelligent `href` slug locators for stable cross-environment selectors. - 🎨 Polished 2×2 button grid with style isolation (won't be hijacked by host-page CSS), two-step "Did you leave a rating?" confirmation flow, and persistent usage tracking via `chrome.storage`. 🎯 Also in v1.3.0: AutoMate allows you to highlight elements directly on the page by providing a CSS selector or XPath expression, making it easier to validate locators instantly. 🔹 How It Works • Open the AutoMate Chrome extension • Click Locator Genius to activate pick mode • Hover over any element on the page to highlight it • Click the element to generate CSS and XPath locator suggestions • Copy the desired locator with a single click 🔹Highlight Elements (New Feature – v1.3.0) • Paste a CSS selector or XPath • Click Highlight • AutoMate highlights the matched element(s) instantly This is useful for validating locators before using them in UI automation frameworks such as Selenium, Playwright, or Cypress. 🔹 Key Features ✅ Visual element picker ✅ Smart CSS & XPath locator generation ✅ Ranked locators (Best / Good / Weak) ✅ One-click copy to clipboard ✅ Highlight elements using CSS selector or XPath (v1.3.0) ✅ Works smoothly on modern SPAs ✅ Clear messages when no reliable locator is found 🔹Compatible With • Selenium • Playwright • Cypress • TestNG • JUnit • UI automation frameworks using CSS selectors or XPath 🔹Enterprise-Safe by Design AutoMate is designed with enterprise security standards in mind. • Uses only activeTab permission • No background execution • No automatic page injection • No DevTools dependency AutoMate runs entirely in the browser and: • Does not collect, store, or transmit any data • Does not make any network requests • Executes only after explicit user action • Contains no analytics or tracking Some enterprise-managed devices may restrict third-party Chrome extensions and may require IT approval. 🔹 Why AutoMate • Saves hours by eliminating manual locator trial and error • Produces stable locators that reduce UI test flakiness • Designed for real-world applications, including modern SPAs • Beginner-friendly while remaining powerful for experienced automation engineers Whether you are working with Selenium, Playwright, Cypress, or other UI automation frameworks, AutoMate acts as a trusted productivity tool in your daily testing workflow. 🔹 Licensing • AutoMate is free to use • Any future license changes will not apply retroactively to existing users Happy automating 🚀