Cypress使用not.exist断言时目标路径提示存在导致超时错误如何解决？

问题原因 #

你现在的写法存在两个核心错误：

• Cypress 所有cy.开头的命令都是异步队列执行的，不会同步返回布尔值，你写的if (cy.get(...).should('not.exist'))判断逻辑完全不生效。代码执行时会先把所有cy命令加入执行队列，之后才按顺序执行，所以不管判断条件是什么，should('not.exist')一定会被执行，元素存在时就直接抛出断言错误。
• should断言本身只要不符合预期就会终止测试执行，根本不会进入你写的else分支。

解决方法 #

用Cypress封装的同步jQuery查询方法Cypress.$来判断元素是否存在，这个方法不会触发断言，只会同步返回当前DOM中匹配元素的集合，判断长度即可知道元素是否存在。

修正后代码 #

// 先等页面稳定后再判断元素是否存在，避免动态渲染导致判断错误，可根据实际情况调整等待逻辑
cy.wait(200)
const pathAlert = Cypress.$('.help-block > ul > li')
if (pathAlert.length === 0) {
  // Path Alert不存在，走跳过逻辑
  cy.log(data.rows[i].ExpectedResult)
  const ErrorSuggestion = cy.log('Not Alert or Alert Not Match').as('ErrorSuggestion')
} else {
  // Path Alert存在，走对比逻辑
  cy.get('.help-block > ul > li').should('be.visible').invoke('text').then((alertText) => {
    console.log(alertText)
    if (alertText.trim() === data.rows[i].ExpectedResult.trim()) {
      result = 'Pass'
      cy.log(result).as('Result')
    }
  })
}

// 公共的弹窗处理逻辑，不用重复写两遍
cy.get('#swal2-title').should('be.visible').invoke('text').then((text) => {
  if (text === 'พบข้อผิดพลาด!' || text === 'การเพิ่มสำเร็จ!') {
    cy.log(text).as('Alert_Popup')
    if (text === 'พบข้อผิดพลาด!') {
      result = 'Fail'
      cy.log(result).as('Result')
    }
    cy.get('.swal2-confirm').click()
  }
})

补充说明 #

• 如果Path Alert是异步渲染的，可以在判断前先加cy.get('body').should('be.visible')确保页面基础渲染完成，或者等待对应接口返回后再判断，避免误判元素不存在。
• 对比文本时建议加trim()去除两端空格，避免因为空格、换行符导致匹配失败。

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