Cypress测试中等待Cookie同步读取报错及规范写法求解

问题根因 #

所有cy.前缀的Cypress命令都采用异步队列机制执行：代码运行时只会把命令按顺序加入执行队列，不会同步立刻执行。
初始报错的代码中，cy.getCookie('abc').should('exist').then(c => cookieValue = c.value) 仅完成了命令入队，赋值逻辑要等队列调度到这条命令时才会触发。后续cy.wrap(cookieValue).should('not.equal', undefined)执行入队时，前面的赋值逻辑还没运行，cookieValue还是初始值undefined，因此抛出expected undefined to not equal undefined错误。
用async/await手动包装Promise的写法虽然能绕过问题，但违背Cypress的设计逻辑，会丢失Cypress内置的自动重试、等待能力，不符合官方编码规范。

符合Cypress规范的实现方式 #

Cypress官方推荐通过链式回调处理异步命令的返回值，不需要手动实现同步等待，有两种常用写法：

方式1：链式回调内处理依赖值（最推荐） #

所有依赖Cookie值的逻辑直接放在getCookie的then回调中，不需要额外声明外部变量存储值，是最通用的常规写法：

/// <reference types="cypress" />

describe('cookie', () => {
    beforeEach(() => {
        cy.setCookie('abc', 'def');
    });

    it('read', () => {
        cy.getCookie('abc')
          .should('exist')
          .then(cookie => {
                const cookieValue = cookie.value;
                // 所有需要用到cookieValue的断言、业务逻辑全部写在该回调内
                cy.wrap(cookieValue).should('not.equal', undefined);
          });
    });
});

方式2：用别名跨命令链共享值 #

如果需要在多个不连续的代码段中使用Cookie值，可以用Cypress内置的Alias别名机制存储值，不需要手动维护外部变量：

/// <reference types="cypress" />

describe('cookie', () => {
    beforeEach(() => {
        cy.setCookie('abc', 'def');
    });

    it('read', () => {
        // 提取Cookie值并存为别名
        cy.getCookie('abc')
          .should('exist')
          .its('value')
          .as('abcCookieValue');
        
        // 其他不依赖Cookie值的测试逻辑...

        // 需要使用Cookie值时，通过@前缀取别名，同样在回调内使用
        cy.get('@abcCookieValue').then(cookieValue => {
            cy.wrap(cookieValue).should('not.equal', undefined);
            // 后续使用cookieValue的逻辑
        })
    });
});

提示：不要尝试把Cypress异步命令改造成同步调用写法，Cypress的队列机制内置了自动等待、断言重试能力，脱离链式调用手动同步取值很容易出现偶发测试失败的问题。

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