Selectors Made Eazy

Generate, test, and export CSS selectors and XPath locators from Chrome DevTools for web testing.

Selectors Made Eazy is a Chrome DevTools extension that streamlines web automation and DOM inspection. It adds a dedicated panel to DevTools where you can generate, inspect, and test CSS selectors and XPath expressions for elements on the active page. Whether you are a QA automation engineer building test suites or a web developer inspecting complex DOM structures, Selectors Made Eazy helps you find and validate locators without switching tools or manually trying selectors. KEY FEATURES • DevTools Integration: Work with locators in a dedicated DevTools panel alongside the Elements inspector. • Instant CSS and XPath Generation: Select an element in the Elements panel to generate CSS and XPath locators. Get warnings when a locator matches multiple elements. • Live Locator Testing: Enter a CSS selector or XPath and see its match count while matching elements are highlighted on the page. • Page Scanner: Find up to 50 common form controls, buttons, links, and data-testid elements on the current page. Resize the results panel to suit your workflow. • Appium Inspector Support: Enable Appium mode to scan mobile screen XML and generate XPath locators. BrowserStack and LambdaTest App Live Inspector pages are supported, including inspectors embedded in frames. The first scan asks for optional clipboard-read permission. • Relative XPath Builder: Pick a reference and target element to generate an XPath using their nearest shared ancestor. • Export for Automation: Export scanned web locators as Selenium Python, Selenium Java, or Playwright TypeScript code. Appium locators can be exported as Python or Java. • Copy and Inspect: Copy a locator or jump to its matching element in the DevTools Elements panel. • Duplicate Match Warnings: Identify locators that match multiple elements. • iFrame and SPA Support: Detect iFrame contexts and reset scanner results when navigating across single-page application routes. WHO IS THIS FOR? 1. QA and Automation Engineers: Create locators for Selenium and Playwright test workflows. 2. Web Developers: Inspect DOM structures, test selector matches, and troubleshoot element targeting. 3. Testers Learning Automation: Explore how CSS selectors and XPath expressions identify page elements. HOW TO USE 1. Open Chrome DevTools by pressing F12 or choosing Inspect from the page context menu. 2. Open the Selectors Made Eazy panel. 3. Select an element in the Elements panel or choose Scan Page to find interactive elements. 4. To scan a mobile screen, open the Appium Inspector page and enable Appium mode. On BrowserStack or LambdaTest App Live, the App Source panel must be present. Allow clipboard access when prompted. If automatic copying is unavailable, click the copy icon beside App Source, then choose Scan Screen again. 5. View generated CSS selectors and XPath values. Hover to highlight matching elements, or click to copy and focus an element in the DOM tree. 6. Use the Live Locator Tester to enter and test CSS selectors or XPath expressions against the active page. 7. Drag the resize handle below the scanner section to expand or collapse the results. 8. Use the Relative Locator Tracker to pick reference and target elements and generate an XPath based on their nearest shared ancestor. 9. Choose Python, TypeScript / Playwright, or Java / Selenium under Export As to download scanned locators in that format. Appium results are XPath-only and support Python or Java exports. LIMITATIONS 1. Shadow DOM: Elements inside closed Shadow DOM roots cannot be accessed or highlighted across shadow boundaries. 2. Cross-Origin iFrames: Element matching and DOM traversal inside cross-origin iframe contexts are restricted by browser security policies. 3. Dynamic Classes and IDs: Framework-generated hashes may produce fragile locators when stable attributes such as data-testid or id are missing. 4. Virtual Scrolling and Unrendered Elements: Match counts include only elements currently rendered in the active DOM tree. 5. Canvas and SVG Inner Elements: Elements inside canvas grids or complex inline SVG shapes cannot be targeted beyond their top-level element wrapper. PRIVACY Simple Locators runs in Chrome DevTools and evaluates locators against the current page. The extension does not request host permissions and does not send page content or browsing activity to an external service. Locators are based on the current DOM and may need adjustment when a site changes. Closed Shadow DOM and cross-origin iframe content are subject to browser restrictions.