DOM Element Highlighter

Visually identify and interact with testable DOM elements on web pages

Visually highlight testable DOM elements on any webpage, making it easy for developers and QA engineers to identify elements with data-id, data-testid attributes, or custom HTML tags. ✨ KEY FEATURES • Automatic Detection - Highlights elements with data-id and data-testid attributes • Smart Filtering - Only shows test IDs with hyphens (filters out auto-generated MUI IDs) • Custom Tags - Configure custom HTML tags to highlight • Keyboard Shortcut - Toggle highlighting with Ctrl+Shift+H (Cmd+Shift+H on Mac) • Non-Intrusive - Overlays don't interfere with page interactions • Smart Positioning - Overlays follow elements during scroll and hide when out of view • Dynamic Detection - Automatically detects newly added elements • Shadow DOM Support - Detects elements inside shadow roots • State Persistence - Remembers your settings across browser sessions 🚀 HOW TO USE 1. Click the extension icon in your toolbar 2. Toggle highlighting ON 3. See blue overlays on all testable elements! Use the keyboard shortcut (Ctrl+Shift+H) to quickly toggle highlighting without opening the popup. 🎯 WHAT GETS HIGHLIGHTED • Elements with data-id attribute (always shown) • Elements with data-testid attribute containing hyphens (filters out auto-generated IDs) • Custom HTML tags you configure Perfect for: • Frontend developers testing their applications • QA engineers identifying test selectors • Teams using data-testid or data-id conventions • Anyone working with automated testing frameworks 🔒 PRIVACY This extension stores your preferences locally in your browser. No data is collected, transmitted, or shared with third parties.