BEM类名是测试定位首选，因其自带语义与作用域；data-testid仅作补充；避免使用标签选择器、模糊文本定位；需防范构建哈希、modifier误用及第三方组件内部节点问题。
自动化测试脚本失效，八成是因为定位器（locator）不稳；BEM 不是让测试“变快”，而是让 cy.get('.button--submit') 这类写法真正可靠——只要类名合规，它就只命中你要测的那个按钮，不会误选弹窗里的关闭按钮、表格里的操作按钮，或第三方组件里同名的 button 元素。
为什么 cy.get('button') 在真实项目里基本不可用
标签选择器在测试中等于放弃控制权：
-
button会匹配页面上所有<button></button>，包括 Ant Design 的Button、自定义封装的<mybutton></mybutton>渲染出的底层button，甚至被v-show隐藏但仍在 DOM 中的按钮 - 当多个模块共用同一语义（如“提交”），
button[type="submit"]依然可能跨表单误命中，且无法区分“搜索表单提交”和“注册表单提交” - Cypress 的
cy.contains('提交')看似语义化，但按钮文字常动态变化（“提交中…”、“重试”），或被 i18n 替换，定位立刻断裂
data-testid 和 BEM 类名，该选哪个做测试定位器
二者不互斥，但优先级明确：BEM 类名应是第一道稳定锚点，data-testid 仅用于极少数必须绕过样式逻辑的场景（如动画过渡态、条件渲染未挂载前的占位元素）：
- BEM 类名天然带语义和作用域：
search-form__submit表明它属于搜索表单模块，且是提交动作的触发器；而data-testid="submit-btn"只是字符串，无法表达归属，团队协作时容易重复或歧义 - 类名与样式、DOM 结构、组件文件强绑定，改样式常需同步改测试；若用
data-testid，样式重构时可能忘记更新测试定位器，导致“测试通过但 UI 已崩” - Playwright 支持
getByRole('button', { name: '提交' })，但前提是aria-label或可见文本稳定——BEM 推动你把状态写进类名（如search-form__submit--loading），再由 JS 同步控制aria-busy="true"，形成可验证闭环
哪些 BEM 类名在测试中实际会“消失”或失效
不是所有带双下划线的类名都适合当 locator。以下情况会让测试脚本找不到目标：
立即学习“前端免费学习笔记（深入）”；
- 构建后 CSS Modules 或 CSS-in-JS 自动哈希类名（如
search-form__submit_abc123），但测试仍写原始名——需确保测试环境启用localsConvention: 'camelCaseOnly'并使用styles['search-form__submit']导出，或统一用data-test属性兜底 - Modifier 被错误地单独使用：
cy.get('.button--disabled')失败，因为真实 DOM 是<button class="button button--disabled"></button>；BEM 要求基础块/元素类必须存在，否则状态无依附 - 用了非 BEM 命名的第三方组件内部节点，比如
ant-table-cell——此时应在它外层包一层 BEM 容器（如user-list__table-wrapper），测试只操作 wrapper，不深入第三方结构
BEM 对测试的价值，不在名字多长，而在于把“这个按钮属于哪个业务上下文”压缩进一个字符串里；一旦命名脱离真实模块、修饰符脱离基础类、或元素名变成视觉描述（form__bottom-bar），测试脚本就会开始猜谜——而自动化测试最怕的，就是需要人来猜。
