Data Attribute Highlighter

Overview

Highlight and display data attributes on hover

A powerful Chrome extension for developers and QA testers that highlights HTML elements with data attributes on hover. ✨ KEY FEATURES: • Smart hover detection - automatically highlights elements with your specified data attribute • Beautiful tooltips - displays attribute names and values in an elegant gradient design • Keyboard shortcuts - toggle highlighting with Ctrl+Shift+H (Cmd+Shift+H on Mac) • Configurable attributes - works with data-testid, data-cy, data-qa, or any custom data attribute • Copy on demand - hold ⌘ (Mac) or Alt (Windows/Linux) and click to copy attribute values to clipboard • DOM tree search - intelligently searches parent elements to find data attributes • Zero interference - regular clicks work normally, only modified clicks trigger copy • Toggle on/off - easily enable or disable the highlighter with a click or keyboard shortcut • Modern UI - sleek popup with gradient design and smooth animations 🎯 PERFECT FOR: • Testing with Cypress, Playwright, or Jest • QA automation and test development • Frontend development and debugging • Inspecting data attributes on any webpage • Quick access to test IDs without opening DevTools 🚀 HOW IT WORKS: 1. Click the extension icon and configure your data attribute (default: data-testid) 2. Press Ctrl+Shift+H (or Cmd+Shift+H) to toggle highlighting on/off 3. Hover over elements to see purple highlights and tooltips 4. Optionally enable ⌘/Alt+Click to copy attribute values 5. Attribute values are instantly copied to your clipboard with a confirmation notification The extension enhances your workflow without interfering with normal page interactions.

0 out of 5
No ratings
Learn more about results and reviews.

Details

Version
1.3.0
Updated
October 14, 2025
Flag concern
Size
15.31KiB
Languages
English
Developer
INKAUST STUDIO Wojciech Chudzikowski
Norberta Barlickiego 31A Iława 14-200 PL
Website
Email
kontakt@teceer.com
Phone
+48 693 627 953
Trader
This developer has identified itself as a trader per the definition from the European Union and committed to only offer products or services that comply with EU laws.
D-U-N-S
674566243

Privacy

Manage extensions and learn how they're being used in your organization

The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

Not being sold to third parties, outside of the approved use cases
Not being used or transferred for purposes that are unrelated to the item's core functionality
Not being used or transferred to determine creditworthiness or for lending purposes

ClickHouse Trace Query

5.0

Query and visualize ClickHouse traces with fuzzy search capabilities

Salesforce Environment Indicator

5.0

Displays a visual indicator for different Salesforce environments

Element Selector

0.0

Select and highlight elements on a webpage

CSS Spacing Inspector

0.0

Hover to see margin, padding, and gap overlays with pixel values

XPath Inspector

5.0

Shows XPath and element information on hover

Layout Grid Visualizer

5.0

A Chrome extension to visualize and customize grid layouts on webpages

Element Inspector

0.0

Hover to inspect CSS properties of any element. Ideal for developers debugging and optimizing web styles.

HTML Attributes Editor

0.0

View and edit the attributes of an HTML element.

Developer DOM Inspector

5.0

Inspect DOM elements visually

NetSuite Field Highlighter

5.0

Highlight and identify field types in NetSuite

Element ID Highlighter

0.0

Highlights HTML elements with specific attributes like data-testid for easier debugging and testing

MDView - Markdown Viewer

0.0

Beautiful markdown file viewer with themes, syntax highlighting, and interactive Mermaid diagrams