Cypress.io中如何点击与指定待办文本对应的同名markAsCompleted勾选图标

你编写的代码执行报错有两个核心原因：

• cy.get('[data-cy=markAsCompleted]')会匹配到页面上全部3个勾选span元素，Cypress默认禁止对存在歧义的多个元素直接执行操作
• 目标文本Fill Gas和勾选span是同级节点，同属于td元素的子内容，勾选span本身没有任何内部文本，因此调用.contains('Fill Gas')无法匹配到任何元素

最符合Cypress最佳实践的写法是先定位到包含Fill Gas文本的待办行，再在该行范围内查找勾选按钮：

cy.contains('[data-cy="todoItem"]', 'Fill Gas')
  .find('[data-cy="markAsCompleted"]')
  .click()

写法说明：

• cy.contains传入选择器+文本两个参数时，会直接返回包含指定文本的对应选择器元素，也就是Fill Gas对应的待办行节点，不会匹配到其他无关元素
• find方法只会在前面匹配到的单条待办行范围内查找元素，不会出现多元素匹配歧义的问题

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