Cypress函数中异步set完成后如何正确返回获取到的结果值

Cypress 所有内置命令（cy.visit、cy.get等）都是异步入队执行的，不会阻塞后续同步代码运行。你写的同步return逻辑会在Cypress命令实际执行前就把初始值-10返回，才会出现控制台先打印返回值、后打印元素实际文本的错乱顺序。

不要用外部变量存值再同步返回，顺着Cypress的链式调用机制返回命令链，在用例里通过.then()拿到最终计算值即可。

改造取值函数 #

直接返回cy.get()生成的命令链，在链的回调里返回你要提取的元素文本：

function getValues(date) {
  cy.visit('http://localhost/page1');  
  return cy.get(".total").then((span) => {
    const totalValue = span.text().trim() // 建议加trim去掉文本前后多余空白
    console.log("Values: " + totalValue)
    return totalValue
  })
}

改造测试用例调用逻辑 #

不要用同步变量直接接函数返回值，在命令链的.then()回调里拿到实际值后，再执行后续断言、逻辑处理：

it('Testing values', () => {
  getValues(startDate).then(totalValues => {
    console.log("Total values: " + totalValues)
    // 所有依赖totalValues的逻辑、断言都要写在这个回调内
    // 示例断言：expect(Number(totalValues)).to.equal(2.5)
  })
})

• 不要强行给Cypress用async/await写法，Cypress自身的命令队列已经内置了时序管控，顺着链式调用写就不会出现时序错乱
• 所有依赖页面异步渲染、异步取值的逻辑，都必须放在对应命令的.then()回调内部，不要写到命令链外侧，否则一定会出现取值早于渲染完成的问题

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