HTML语义化本身不直接提升定位成功率，但合理使用role、name、aria-label、data-testid等语义属性比依赖动态class或nth-child更稳定可靠，尤其在ID缺失或动态生成时。
HTML语义化本身不直接提升定位成功率，但用对了语义属性（如 role、name、aria-label、data-testid），比盲目依赖 class 或 div:nth-child(3) 稳定得多——尤其当 ID 缺失或动态时。
为什么 role + name 组合比 class 定位更可靠
很多前端框架生成的 class 名带哈希（如 Button_root__abc123），每次构建都变；而 ARIA 属性是开发者手动加的，只要遵循规范，就不会被构建工具篡改。
-
role="button"+name="submit"可精准锁定表单提交按钮，且兼容 Cypress 的cy.get('button[role="button"][name="submit"]')和 Selenium 的By.CSS_SELECTOR - 当元素没有
id，但有aria-label="搜索"，Cypress 可直接用cy.get('[aria-label="搜索"]')，Selenium 用By.CSS_SELECTOR, '[aria-label="搜索"]' - 注意：不要混用
role和标签名冲突，比如<div role="button">点我</div>是合法的，但<button role="link"></button>会破坏可访问性，测试脚本可能绕过校验但人工 review 会报错
data-testid 是语义化测试的“事实标准”
它不是 HTML 原生语义，但已成为前端团队协作中约定俗成的测试锚点，比业务 class 更可控、比自动生成 ID 更稳定。
- 必须由开发在写组件时显式添加，例如：
<input data-testid="login-username" /> - Cypress 默认支持：
cy.get('[data-testid="login-username"]')；Selenium 需用 CSS 或 XPath：By.CSS_SELECTOR, '[data-testid="login-username"]' - 禁止在生产环境移除该属性（可通过构建配置保留），否则 staging 测试通过、prod 失败——这是跨环境不一致的典型坑
文本内容定位（cy.contains() / By.XPATH）的适用边界
不是所有文案都适合做定位依据。只有当文案固定、无国际化切换、不随状态变化时，才可作为兜底手段。
立即学习“前端免费学习笔记（深入）”；
- Cypress 中
cy.contains('提交')能匹配任意含该文本的元素，建议加标签限定：cy.contains('button', '提交') - Selenium 中避免写
//*[contains(text(), '提交')]（太宽泛），改用//button[contains(., '提交')]，.表示节点所有文本子内容，容错更强 - 警惕文案被 i18n 工具抽离成变量（如
{{ t('common.submit') }}），此时 DOM 渲染前是空或占位符，需等翻译加载完成再查
真正难的不是选哪种语义属性，而是推动开发在写 UI 时就考虑测试可定位性——比如拒绝“用 class 模拟按钮行为”，坚持用 role + tabindex + aria-pressed 实现开关控件。否则测试层再怎么兜底，也架不住底层结构一变就全崩。
