Cypress如何检查元素是否包含指定a标签并在存在时执行点击操作

你之前的写法出错核心是两个原因：

1. Cypress所有命令都是异步链式调用，cy.get()返回的是Cypress命令对象而非布尔值，不能直接放在if条件中做判断
2. contains()方法是用来匹配元素的文本内容，不是匹配HTML标签名，你写的.contains('a')是在找文本为「a」的元素，自然找不到目标a标签

实现代码 #

直接通过then()获取查询到的jQuery对象，用jQuery的find()方法检索后代a标签，判断长度即可：

cy.get('#description').eq(0).then($targetDiv => {
  // 检索当前div下所有后代a标签
  const $link = $targetDiv.find('a')
  // 存在a标签则执行点击
  if ($link.length) {
    cy.wrap($link).click()
  }
})

如果你确实需要用within()做上下文限定，也可以调整为如下写法：

cy.get('#description').eq(0).then($targetDiv => {
  if ($targetDiv.find('a').length) {
    cy.wrap($targetDiv).within(() => {
      cy.get('a').click()
    })
  }
})

补充说明 #

• jQuery的find()会检索所有后代元素，比仅检索直接子级的children()更符合你不确定a标签层级的场景
• 该写法不会因为a标签不存在抛出测试失败，不存在时会自动跳过点击逻辑

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