在Cypress的commands.js中编写命令时如何避免回调金字塔结构

Cypress 本身有异步命令队列调度机制，所有命令会按书写顺序串行执行，不需要通过嵌套then保证执行时序，以下是两种常用的平级写法：

方案1：链式返回+外部变量存储 #

把上一步的执行结果通过return传到下一个平级then，跨步骤依赖的值提前声明变量存储即可：

Cypress.Commands.add("test", () => {
    let userId
    // 第一个请求
    cy.request("POST", url1)
        .its("body.user._id")
        .then(id => {
            userId = id
            // 返回第二个请求，链到下一层then
            return cy.request("POST", url2).its("body.accessToken")
        })
        // 平级then，接收上一步返回的token
        .then(adminAuth => {
            // 直接发第三个请求
            return cy.request({
                method: "POST",
                url: url,
                headers: { "x-access-token": adminAuth },
                body: { user: userId }
            })
        })
})

方案2：使用Cypress内置as()别名（官方推荐） #

Cypress 提供的别名机制专门用于跨命令存储上下文，不需要手动声明外部变量：

Cypress.Commands.add("test", () => {
    // 第一个请求，把userId存为别名
    cy.request("POST", url1)
        .its("body.user._id")
        .as("userId")
    // 第二个请求，把token存为别名，Cypress自动等待上一个命令执行完成
    cy.request("POST", url2)
        .its("body.accessToken")
        .as("adminAuth")
    // 取出两个别名的值发请求，注意此处不能用箭头函数，否则无法通过this访问别名
    cy.then(function() {
        return cy.request({
            method: "POST",
            url: url,
            headers: { "x-access-token": this.adminAuth },
            body: { user: this.userId }
        })
    })
})

注意：不建议直接用原生async/await包裹Cypress命令，Cypress内部有独立的异步调度队列，强制await会打乱命令执行顺序，引发不可预期的异常。

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