Testing Tool - Attribute Highlighter

Portfolio

This extension was built to solve a real bottleneck in my previous team: we needed to add hundreds of data-testid across a large site, but it was hard to identify which elements already had them, which ones were missing, and in which components they were defined. The tool made it immediately visible which parts of the DOM had configurable attributes and allowed us to group those elements by their originating component. Together with the "Click to React Component" extension, we quickly mapped each UI element back to the actual component in code. That gave us a clear flow to iterate, locate elements, and maintain consistency across the entire application. We chose not to use AI at this stage because, although it could speed up parts of the process, it would have required equal or more work to verify and validate automatically generated changes. Before automating, it's essential to understand the system, its variants, and patterns. AI could introduce massive changes that are hard to audit. With a manual approach assisted by tooling, we ensured precision without increasing quality-control complexity. Thanks to the automation and the workflow we designed: - We added all data-testid across the site in just 2 days instead of weeks. - We standardized naming and avoided inconsistencies. - We made QA’s work easier and enabled more robust, reliable tests. - We improved coverage and eliminated time wasted finding elements or component locations. The tool became part of the team’s internal workflow and significantly accelerated testing-oriented development.

Technologies