Cypress页面操作前后调用取值函数对比结果返回异常问题

Cypress 所有命令都走异步队列调度执行，不会同步返回.then()回调里处理的业务值。你写的getVals没有返回完整的Cypress命令链，外部调用时拿到的是undefined，后续对比逻辑自然无法执行。

• 封装选择函数时，必须return整个从cy.get开始的命令链，让外部可以接入Cypress的执行队列
• 所有依赖DOM取值的逻辑，必须放在.then()回调内执行，不能用同步变量赋值的方式直接接收命令结果

修正后的可运行代码：

// 封装通用取值逻辑，返回完整命令链
const getVals = () => {
  return cy.get('[id="22"] span')
    .then($els => {
      return [...$els].map(el => el.innerText)
    })
}

// 方案1：通过别名缓存操作前的值
getVals().as('valsBeforeAction')

// 这里执行你的页面操作，比如点击、输入、跳转等
// cy.get('#trigger-btn').click()

// 取操作后的值做断言对比
getVals().then(valsAfter => {
  cy.get('@valsBeforeAction').should('deep.eq', valsAfter)
})

// 方案2：直接嵌套链式调用，不需要别名
getVals().then(valsBefore => {
  // 执行页面操作
  // cy.get('#trigger-btn').click()

  getVals().should('deep.eq', valsBefore)
})

注意：Cypress的执行顺序和普通同步JS代码不一样，你原来写的同步expect断言会在cy.get命令还没查询DOM的时候就执行，必然拿不到正确值，所有和DOM查询结果相关的断言要么放在.then()里，要么直接接在Cypress命令链上用内置的should断言。

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