Cypress：如何点击列表中匹配指定文本的元素，解决click报错问题

你提供的代码本身存在语法错误：const textveg = $e1.find('h4.product-name').text() 后多余了一个无意义的左大括号，会导致逻辑执行异常，需要先删除该多余符号。

可能的报错原因 #

• 直接操作jQuery元素未转换为Cypress可识别对象：each回调中拿到的$e1是jQuery包装的DOM元素，直接调用jQuery原生的.click()方法不会走Cypress的事件绑定逻辑，会触发未绑定JS点击事件的提示。需要用cy.wrap()将目标元素转为Cypress元素后，再调用Cypress自带的.click()命令。
• Cypress 7交互前置校验不通过：Cypress 7版本强化了交互命令的前置检查，点击前会自动验证元素是否可交互，满足以下任意一种情况都会触发报错：
  • 目标按钮处于隐藏、透明、或被其他浮层元素遮挡的状态
  • 目标按钮带有disabled属性处于禁用状态
  • 点击逻辑触发时，按钮还未完成页面渲染
• 选择器匹配错误：如果.button选择器匹配到的是没有绑定点击事件的其他元素，也会触发该报错。

修正后的参考代码 #

cy.get('.products').find('.product').each(($e1, index, $list) => {
  const textveg = $e1.find('h4.product-name').text()
  if (textveg.includes('Cashews')) {
    cy.wrap($e1).find('.button').click()
  }
})

如果排查确认是元素遮挡等校验问题，可临时添加强制点击参数跳过校验（不建议作为正式方案使用）：

cy.wrap($e1).find('.button').click({force: true})

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