如何在Cypress中将变量从.within()方法传递到.then()方法

Cypress 的 .within() 命令默认会忽略回调函数的返回值，执行完成后始终会把前序 cy.get() 匹配到的 jQuery 元素传递给后续链式命令，这就是你拿到的 foo 是 jQuery 元素的原因。

下面是两种常用的实现值传递的方案：

方案1：使用 Cypress 别名存储（官方推荐） #

通过别名存储跨命令传递的值，适合多命令链路的场景：

cy.get('.some-selector')
    .within(() => {
        const foo = 'Some value'
        // 将值包装后存入别名
        cy.wrap(foo).as('sharedFoo')
    })

// 读取别名获取存储的值
cy.get('@sharedFoo').then((foo) => {
    console.log(foo)
})

方案2：外部作用域变量存储 #

适合单测试用例内的简单场景，注意要在异步回调中读取变量：

// 在测试用例作用域外层声明变量
let sharedFoo
cy.get('.some-selector')
    .within(() => {
        sharedFoo = 'Some value'
    })
    .then(() => {
        // 在后续.then回调中读取，确保已经完成赋值
        console.log(sharedFoo)
    })

注意：Cypress 所有命令都是异步入队执行的，不要在 .within() 调用之后同步读取外部变量，否则会拿到未赋值的初始值。

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