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