Cypress如何校验DOM元素是否包含指定字符串文本

你当前写的判断逻辑不可行，核心问题出在对Cypress命令的返回值理解错了：

• cy.contains() 是Cypress的异步链式命令，返回值是Cypress可链式调用的对象，不是布尔值，不管有没有匹配到对应文本，这个对象在if判断里永远是真，根本不会走到else分支
• Cypress命令是异步排队执行的，你直接在同步的if条件里调用它，拿不到实际的匹配结果，判断逻辑完全不生效

你完全可以实现文本校验需求，下面给两种可直接用的写法，其中第二种就是你问的原生querySelector实现方式： #

写法1：Cypress 原生推荐写法（稳定性更高） #

Cypress内置了jQuery，不需要额外写自定义元素存在校验，直接在同一个上下文里判断DOM状态即可，自带重试机制不容易受页面渲染延迟影响：

cy.get('body').then($body => {
  // 先找是否存在匹配目标文本的提示元素
  const targetAlert = $body.find('[data-testid=alert-content]:contains("Your basket has been updated. Please refresh the basket to continue.")')
  if (targetAlert.length > 0) {
    console.log("refresh site")
    // 这里放刷新页面的对应逻辑
  } else if ($body.find('[data-testid=alert-content]').length > 0) {
    console.log("different error")
    // 这里放其他错误类型的处理逻辑
  } else {
    cy.log("Checked for error no error found")
  }
})

写法2：原生querySelector实现 #

如果要完全用原生JavaScript的DOM API实现，只要注意在拿到真实document对象后再调用querySelector即可，不要直接在Cypress命令外层做同步判断：

cy.document().then(currentDoc => {
  const alertElement = currentDoc.querySelector('[data-testid=alert-content]')
  // 元素不存在直接走无错误分支
  if (!alertElement) {
    cy.log("Checked for error no error found")
    return
  }
  // 取元素文本做匹配，trim掉前后多余空格避免页面换行/缩进导致匹配失败
  const matchText = "Your basket has been updated. Please refresh the basket to continue."
  if (alertElement.textContent.trim().includes(matchText)) {
    console.log("refresh site")
  } else {
    console.log("different error")
  }
})

注意：所有需要根据DOM实际状态走分支判断的逻辑，都要在.then()回调里拿到真实DOM对象后，用同步的DOM方法/jQuery方法判断，不要直接把cy.get、cy.contains这类Cypress命令放在if条件里，否则一定会出现判断失效的问题。

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