skills.rest
williamthorsen
williamthorsenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

add-test-ids

Adds data-test-id attributes to new and modified React components.

1|1|Updated Feb 25, 2026
Search Tags:#testing#test automation#frontend#react#jsx#selectors#data-test-id
One-click install
npx skills add https://github.com/williamthorsen/codeassembly --skill add-test-ids-williamthorsen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-test-ids
Source: https://github.com/williamthorsen/codeassembly/tree/main/packages/agents/content/skills/add-test-ids
Command: npx skills add https://github.com/williamthorsen/codeassembly --skill add-test-ids-williamthorsen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React components often lack stable selectors for automated testing, forcing QA engineers to rely on fragile CSS classes or DOM structure. This Skill systematically adds data-test-id attributes to components in your current task scope, creating reliable test hooks without altering existing markup. ## Core Features & Use Cases - Scoped Attribute Injection: Adds data-test-id only to components declared in the current task scope, leaving unrelated code untouched. - Kebab-Case Naming Convention: Automatically converts component names like HelpPanel into data-test-id="help-panel" for consistent, predictable selectors. - Preservation Rules: Never modifies existing data-test-id values and skips components that do not support the attribute. - Use Case: While building a new UserProfileCard component, the Skill places data-test-id="user-profile-card" on the root element so your end-to-end tests can target it immediately. ## Quick Start Ask the AI to add data-test-id attributes to the React components you are currently editing.

Frequently Asked Questions about add-test-ids

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

FAQPage Schema
How do I add data-test-id attributes to React components?▼

Add the data-test-id attribute to the root JSX element of each component, using a kebab-case version of the component name. For example, HelpPanel becomes data-test-id="help-panel". This Skill automates that process for components in your current task scope.

What naming convention should test IDs use in React?▼

Use kebab-case derived from the component name, so UserProfileCard becomes user-profile-card. This keeps selectors consistent, readable, and easy to predict when writing test queries.

Will adding test IDs change existing data-test-id values?▼

No. The Skill explicitly preserves any existing data-test-id values and only adds attributes to components that lack them. It also skips components that do not support the attribute.

Where should the data-test-id attribute be placed in a component?▼

Place it on the root element of the component's rendered JSX. This gives tests a single stable anchor per component and avoids scattering selectors across nested children.

When should I not add data-test-id attributes?▼

Skip components that do not support the attribute, such as fragments or third-party components that do not forward arbitrary props to the DOM. Also avoid touching components outside your current task scope.

Related Skills

Explore More Software Engineering Skills→
alexgorbatchevalexgorbatchev
1

react-development

Enforce JSX usage and test-id contracts in React components.

Community
Advanced
exceptionlessexceptionless
2.5k

e2e-testing

Create and run Playwright end-to-end browser tests with Page Object Models.

Official
Intermediate
VilnaCRM-OrgVilnaCRM-Org
1

frontend-component-development

Builds and modifies React components, hooks, and forms following profile-configured architecture and quality gates.

Official
Advanced
whitebearditwhitebeardit
12

frontend-qa-friendly

Guide frontend markup to use semantic HTML and data-testid attributes for stable Playwright testing.

Official
Basic