Claude Code 给前端控件加稳定测试标识
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/test-locators/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/test-locators/`，把核对后的文件保存为 `.claude/skills/test-locators/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/test-locators`。
中文摘要
沿用项目现有测试属性，按业务含义为需要操作或断言的控件命名，同时保留语义标签。
SKILL.md 中文导读
可复现示例
筛选面板新建可点的打印按钮，邻近组件统一使用 data-testid。需求给出 `{action:'Print schedule',feature:'schedule',element:'button',purpose:'print'}`，不需要标记装饰边框。工作步骤
- 检查相邻控件的测试属性，仅标记实际需要操作或核对的元素。
- 按用途命名并保留语义标签，确保测试能定位到目标按钮。
验收方法
给按钮 `{attribute:'data-testid',value:'schedule-button-print',label:'Print schedule'}`，测试可直接定位该作用；保留原有按钮语义与名称。
GitHub 原文 · 更新日期
适用环境
Claude Code 与已有 UI 组件及测试约定。先查看邻近控件采用哪一种属性。
常见问题
测试标识怎么命名才不随布局变化？
沿用邻近组件属性，按功能、元素和用途命名。保留可访问标签，装饰元素无需额外标识。