DOMLens

Point at anything on a page and instantly get its CSS selector, XPath, or Playwright locator.

Features

• Smart selectors — Prioritizes test attributes (data-testid, data-cy), clean IDs, semantic data attributes, and ARIA labels
• Confidence scoring — Shows whether the selector is high, medium, or low confidence
• Three formats — CSS selectors, XPath, and Playwright locators (getByRole, getByLabel, etc.)
• Match counting — Warns if a selector matches multiple elements
• History navigation — Browse through previously picked elements
• Draggable panel — Position the UI anywhere on screen
• Keyboard shortcut — Alt+Shift+L to toggle

Install

From Source

1. Clone the repository
2. Open chrome://extensions/
3. Enable Developer mode (top right)
4. Click Load unpacked
5. Select the lens directory

From Release

Download the latest release from the Releases page and unpack it, then follow steps 2-5 above.

Usage

1. Press Alt+Shift+L or click the extension icon to start
2. Hover over any element to see its selector
3. Click to lock the selection and copy to clipboard
4. Use the format toggle (CSS / XPath / Playwright) to switch output formats
5. Press Escape to dismiss

Development

npm install
npm run lint      # ESLint
npm run format    # Prettier
npm test          # Run tests

License

MIT