DOM Element Highlighter

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.