Cypress如何正确断言页面元素文本存在于另一页元素文本数组中

你的代码核心问题出在异步逻辑处理、数组未重置两个点上，修复方案如下：

核心问题梳理 #

• 遍历list1元素的每次循环中，存储第二个页面文本的textsArray没有重置，上一次循环存入的旧文本会干扰本次断言
• 硬等待cy.wait(1000)可靠性差，容易因为页面加载延迟导致获取list2元素时拿到空值
• 用body.find()同步判断元素存在性，不适用于异步渲染的页面元素，容易误判
• 未对文本做首尾空格清理，元素自带的不可见空格、换行符会导致匹配失败

修复后的自定义命令代码 #

Cypress.Commands.add(
  'assertForOpenedElementVisible',
  (list1, list2, notDisplayedElementMsg) => {
    cy.get('body').then((body) => {
      if (body.find(list1).length === 0) {
        cy.log(notDisplayedElementMsg)
        return
      }
      
      cy.get(list1).each(($el, index) => {
        // 每次循环单独声明数组，避免旧数据残留
        const textsArray = []
        const targetText = $el.text().replace(', ', '').trim()

        cy.get(list1).eq(index).click()
        // 替换硬等待，确认第二个页面的目标元素已加载完成
        cy.get(list2).should('have.length.gte', 4)

        cy.get(list2)
          .each(($item) => {
            const itemText = $item.text().replace(', ', '').trim()
            textsArray.push(itemText)
          })
          .then(() => {
            // 此时数组已填充完成，直接断言即可
            expect(textsArray).to.include(targetText)
            // 如果需要循环验证所有list1元素，可在这里加返回上一页的逻辑：cy.go('back')
          })
      })
    })
  }
)

额外适配说明 #

如果点击list1元素后是打开新标签页的场景，需要额外补充标签页切换的逻辑，当前代码默认是在当前页跳转的场景。

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