在Cypress中使用async await获取元素值失败该如何解决

Cypress的所有命令都是异步排队执行的，不会按普通JS的同步顺序立即执行。你代码里外层的cy.log(timeValue)会先加入执行队列，这时候.then()里给timeValue赋值的逻辑还没运行，所以拿到的永远是初始值0。另外Cypress命令本身不支持直接用async/await处理，错误使用async/await也不会生效。

解决方法1：把后续依赖取值的逻辑全部放在.then()回调中 #

所有需要用到timeValue的测试步骤都要挪到取值完成的回调里，保证执行顺序正确：

it.only('should access Time Worked section and insert same Staff Complement value, but negative as Flexitime',  function () {
    cy.get('[data-tag="staff-complement-input"] > div > span').invoke('text').then(text => +text).then(timeValue => {
        // 所有依赖timeValue的逻辑都写在这里
        cy.log(timeValue) // 这里拿到的就是正确的420
        // 后续操作比如给Flexitime赋值的逻辑都放在这部分
        cy.get('[data-tag="flexitime-input"]').type(-timeValue) // 示例后续操作
    })
})

解决方法2：用Cypress别名存储取值，后续用cy.get('@别名')读取 #

如果不想嵌套太多回调，可以用别名机制存储异步获取的值：

it.only('should access Time Worked section and insert same Staff Complement value, but negative as Flexitime',  function () {
    // 取值后用as()存为别名
    cy.get('[data-tag="staff-complement-input"] > div > span').invoke('text').then(text => +text).as('timeValue')
    
    // 后续需要用到的地方用cy.get('@别名')读取
    cy.get('@timeValue').then(timeValue => {
        cy.log(timeValue) // 420
        // 执行后续操作
        cy.get('[data-tag="flexitime-input"]').type(-timeValue)
    })
})

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