如何为网页中紧邻'Dont words'文本的按钮编写Cypress locator

核心思路是先锚定辨识度极高的'Dont words'文本节点，再通过DOM相对关系匹配相邻按钮，比硬写class、全层级路径的定位方式稳定很多，常见可用写法如下：

• 当按钮和'Dont words'是同级紧邻的兄弟节点时，直接用next()链式调用即可，这是最简洁的写法：

// 先匹配到文本为'Dont words'的元素，再取它紧挨着的下一个按钮元素
cy.contains('Dont words').next('button')

• 如果文本和按钮中间隔了少量其他无关节点、同属一个父容器，用siblings()筛选同层级按钮即可：

cy.contains('Dont words').siblings('button')

• 如果DOM结构嵌套较深，文本和按钮不在同一层级，建议先定位到二者共同的最近父容器，再向下查找按钮，这种写法抗DOM结构变动的能力最强：

cy.contains('Dont words')
  .closest('.shared-parent-selector') // 替换成页面上二者共同父容器的实际选择器即可
  .find('button')

调试定位时可以在定位链末尾加.should('be.visible')做断言，Cypress会自动重试直到匹配到元素或者超时，能快速排查选择器是否生效。优先用DOM相对关系做定位，不要用nth-child、固定下标、动态生成的class名这类脆弱的定位规则，避免后续页面小迭代就导致用例失效。

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