reliable test id generator

The problem

Frontend tests frequently break because developers rely on brittle CSS selectors, text labels, or DOM structure that changes during refactors. Manually managing data attributes across large codebases often leads to naming collisions and inconsistent attribute conventions.

What it does

• Scans your repository to identify existing testing conventions like data-testid, data-cy, or data-qa.
• Generates unique, kebab-case IDs based on semantic intent rather than unstable properties like array indexes or translated text.
• Maintains a centralized registry file to prevent ID collisions and track selector targets.
• Handles complex UI patterns including portaled modals, conditional branches, and dynamic lists using stable domain keys.
• Refactors brittle test queries to use the new, stable identifiers.

Frameworks & tools

Works with any frontend framework including React, Vue, and Angular. Compatible with testing libraries like Jest, Vitest, Cypress, Playwright, and Testing Library.

Why this beats prompting it yourself

Standard LLM prompts often suggest random IDs or use array indexes which break on sort/filter. This skill enforces a strict registry-first workflow, ensuring every ID is unique, documented, and follows your project's specific attribute naming convention without manual oversight.

Use cases

• Adding stable selectors to a legacy codebase before writing integration tests.
• Standardizing testing attributes across a monorepo with multiple contributors.
• Ensuring dynamic list items have predictable, non-index-based IDs for automation.
• Updating test suites to survive UI refactors and design system migrations.

Known limitations

Requires an existing registry file or permission to create a JSON/markdown registry. Validation scripts must be dependency-free to run during the process.