Cypress中cy.then()与cy.wrap(null).then()的差异及异步等待方案

两种写法的差异 #

cy.then(() => myAsyncFunction()) 和 cy.wrap(null).then(() => myAsyncFunction()) 在核心功能上几乎没有区别：

• 两者都是将异步函数加入Cypress的命令队列，只要myAsyncFunction返回Promise，Cypress就会自动等待它执行完成后再继续后续命令。
• 唯一的细微区别是cy.wrap(null)多了一步将null包装为Cypress命令的操作，但这对异步等待的逻辑没有影响。在大多数场景下（包括你在beforeEach里的使用场景），用哪一种都能达到等待异步函数的效果。

解决beforeEach中依次执行异步函数的问题 #

你当前的写法会让两个异步函数并行执行，而且Cypress不会等待它们完成就直接启动测试。要实现先执行完myAsyncFunction1，再执行myAsyncFunction2，全部完成后才开始测试，可以用以下两种可靠方式：

方式一：用Cypress命令链串联 #

利用cy.then()的链式调用，Cypress会自动等待每个回调里的Promise完成后再执行下一个步骤：

beforeEach(() => {
  cy.then(() => myAsyncFunction1())
    .then(() => myAsyncFunction2());
});

方式二：使用async/await #

如果你的异步函数返回Promise，也可以直接在beforeEach里用async/await语法，写法更直观：

beforeEach(async () => {
  await myAsyncFunction1();
  await myAsyncFunction2();
});

注意：不管用哪种方式，都要确保myAsyncFunction1和myAsyncFunction2内部正确返回Promise，否则Cypress无法感知异步操作的完成状态。

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