词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Add stable frontend test identifiers in Claude Code

Follow the project's existing test attribute and name actionable elements by business intent, retaining semantic labels.

中文

Install in Claude Code

A Claude Code project with existing UI components and test conventions. Inspect neighboring controls for their attribute convention.

  1. Review `.claude/skills/test-locators/SKILL.md` and its requirements at the pinned GitHub commit.
  2. Create `.claude/skills/test-locators/` in your project and save the reviewed file as `.claude/skills/test-locators/SKILL.md`.
  3. Start Claude Code from that project's root, then select `/test-locators` in the slash menu.

Example task

A filter panel adds a Print schedule button and adjacent components use data-testid. The fixture is `{action:'Print schedule',feature:'schedule',element:'button',purpose:'print'}`. A decorative border needs no locator.

What to check

Give the button `{attribute:'data-testid',value:'schedule-button-print',label:'Print schedule'}`. Keep the native button semantics and accessible name.

Original SKILL.md on GitHub · Updated

Frequently asked question

How can locator names avoid breaking when layout changes?

Match the existing attribute and name the feature, element, and purpose. Keep the accessible label and skip purely decorative elements.