Standardize and preserve data-testid attributes across React/TSX UI components.
npx skills add https://github.com/dtyq/magic --skill ui-data-testid
Please help me install this Agent Skill. Skill: ui-data-testid Source: https://github.com/dtyq/magic/tree/main/frontend/magic-web/.agents/skills/ui-data-testid Command: npx skills add https://github.com/dtyq/magic --skill ui-data-testid
Data-testid attributes are often broken or dropped during UI refactors, translations, or design updates, causing fragile tests and flaky automation.
Add or preserve stable data-testid attributes for a new or refactored UI component to enable reliable tests.
High-intent search queries and answers about installing and using this skill.
Data-testid attributes break during refactors because dynamic values or text-based selectors change when components update. Standardizing stable, text-agnostic ids on root containers and interactive nodes prevents this test brittleness across React and TSX views.
Add stable data-testid attributes by applying lowercase, kebab-case naming conventions with semantic suffixes to primary interactive nodes like buttons and inputs. This forwards ids through config-driven renderers to support reliable unit and end-to-end tests.
Config-driven renderers in shadcn and antd-style components are fully supported. The process forwards and preserves data-testid values through wrappers and dropdown menu configs to maintain testability during design updates.
The best way to preserve test selectors is enforcing stable, text-agnostic data-testid ids on interactive flows. Applying semantic suffixes to menus and modals minimizes automation flakiness caused by translation or design changes.
Dynamic values for data-testid should be avoided entirely. Enforcing static, text-agnostic ids across interactive flows prevents test flakiness and ensures automation stability during UI component refactors.
Standardize data-testid attributes when establishing test automation for React or TSX views. Consistent naming conventions across root containers and interactive nodes ensure reliable unit and end-to-end test execution.
Prompt-or-Die-LabsGenerate typed React .tsx components with hooks, CSS modules, tests, and index exports.
redpanda-dataWrite and run Playwright end-to-end tests for Redpanda Console using testcontainers.
guichefferStandardize data-testid attributes with kebab-case naming for web testing.
wsbaserConstruct XCSS selectors from HTML markup and CSS/XPath for UnionInit attributes.
