testid-adder

Add and standardize data-testid attributes across frontend source files.

Updated Nov 8, 2025

Search Tags:#automation #testing #frontend #playwright #mapping #testid

Ready to run

npx skills add https://github.com/10knamesmore/dotfiles --skill testid-adder

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: testid-adder
Source: https://github.com/10knamesmore/dotfiles/tree/main/general/skills/testid-adder
Command: npx skills add https://github.com/10knamesmore/dotfiles --skill testid-adder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures frontend testids are added and audited consistently across a codebase, enabling reliable automated tests without exposing sensitive information.

Core Features & Use Cases

Incremental testid coverage: scans components and updates essential data-testid attributes without altering DOM structure.
Semantic naming: enforces a page/component/element/interactWay style for testids to improve readability and reusability.
Documentation sync: updates or generates a centralized testid mapping document to reflect approved identifiers after changes.
Use Case: When expanding a React or Vue app, run this skill to attach testids to new interactive elements and produce a patch for review.

Quick Start

Run the testid-adder on your frontend project to audit and annotate testids, then review the proposed patch and commit.

Frequently Asked Questions about testid-adder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add data-testid attributes to frontend components without changing the DOM structure?▼

To add data-testid attributes without altering the DOM, this Skill locates root components and recursively annotates necessary child components, applying a semantic naming convention while strictly avoiding structural HTML changes.

What is the best way to standardize existing data-testid selectors for Playwright automation?▼

Standardizing data-testid selectors for Playwright involves enforcing a page/component/element/interactWay naming convention, checking for duplicates, and updating a centralized testid mapping document to ensure stable, semantic test selectors.

How do I audit frontend testids and avoid duplicate selectors in a React or Vue app?▼

Auditing frontend testids to avoid duplicates requires scanning source files to check existing data-testid attributes, enforcing a standardized naming spec, and coordinating updates through a patch-and-review flow using diff tooling.

Can I incrementally add testids to new interactive elements in my frontend project?▼

Yes, you can incrementally add testids to new interactive elements. The Skill scans components to attach essential data-testid attributes and produces a proposed patch for review without modifying the underlying DOM hierarchy.

Does adding data-testid attributes expose sensitive information in my frontend codebase?▼

No, adding data-testid attributes does not expose sensitive information. The Skill ensures frontend testids are added and audited consistently, enabling reliable automated tests while explicitly preventing the exposure of sensitive data.

When should I not use automated data-testid mapping for frontend test automation?▼

You should avoid automated data-testid mapping when your frontend components lack a clear root structure for recursive coverage, or when your project lacks a defined testid spec to enforce the required page/component/element/interactWay naming convention.