如何用Cypress精准定位文本为Continue的按钮，解决通用选择器返回多结果问题

稳定的Cypress按钮定位方案 #

你可以通过「data-testid + 文本匹配」的组合实现更稳定的定位，完全不依赖页面层级、临时class，后续只要按钮的测试ID和文本不变，就算页面结构调整也不会失效，共有两种常用写法：

• 直接使用contains关联测试ID和目标文本，精准匹配「文本为Continue的按钮文本节点」：

  // 基础写法，匹配包含Continue文本的元素
  cy.contains('[data-testid="cc-button__text"]', 'Continue').click()
  
  // 进阶正则写法，可忽略文本前后的空白字符，匹配更精准
  cy.contains('[data-testid="cc-button__text"]', /^\s*Continue\s*$/).click()
  

• 如果需要定位按钮本身的元素而非文本节点，可以结合filter做筛选：

  cy.get('[data-testid="cc-button__element"]')
    .filter(':contains("Continue")')
    .click()
  

以上两种写法的稳定性远高于工具生成的带.block类的层级选择器：工具生成的选择器依赖外层class和固定层级结构，后续前端调整样式类名、修改DOM嵌套结构都会导致选择器失效，而上述方案仅依赖页面开发者预设的、专门用于测试的data-testid属性和按钮业务文本，抗页面变更能力强很多。

内容的提问来源于stack exchange，提问作者JairVega91