SelectorsHub

About

SelectorsHub - Auto-generate Playwright Locators, XPath & CSS Selectors
SelectorsHub is a powerful developer tool that automatically generates and verifies Playwright locators, XPath, and CSS selectors for web automation testing.

Key Features:
1. Auto-generation: Instantly generates multiple selector types including native Playwright locators, XPath, CSS selectors, IDs, names, and more.
2. Advanced element support: Works seamlessly with iframes, Shadow DOM, SVG elements, dynamic elements, dropdowns, and complex UI components.
3. Smart suggestions: Auto-suggests attributes, text values, and occurrences to help you build selectors faster—no more copying and pasting from the DOM.
4. Error detection: Provides clear error messages indicating what's wrong with your XPath or CSS selectors.
5. Element highlighting: Automatically highlights matching elements and scrolls them into view for easy verification.
6. XPath Healing: Verify all the xpath in one shot.
7. Locators Page: Generate Locator Page in one go.

How to Use:
1. Open Chrome DevTools (F12 or right-click > Inspect)
2. Navigate to the SelectorsHub tab in the DevTools sidebar, or click the SelectorsHub icon in your browser toolbar
3. Inspect any element to automatically generate all selector types
4. For Playwright locators, click the "Playwright Selectors" button, then inspect the element
5. Type or edit selectors in the input box—smart suggestions will help you complete them quickly
6. Press Enter to verify and highlight all matching elements on the page

Perfect for: 
a) QA Engineers and Test Automation professionals, 
b) Web developers working with Playwright, Selenium, Cypress, or other testing frameworks
c) Anyone who needs reliable, maintainable element selectors

Support:
Questions or feedback? Contact us at [email protected]