关于Cypress异步命令与确定性执行的困惑

先看你给出的Cypress测试代码：

describe('Post Resource', () => {
  it('Creating a New Post', () => {
    cy.visit('/posts/new') // 1.

    cy.get("input.post-title") // 2.
      .type("My First Post"); // 3.

    cy.get("input.post-body") // 4.
      .type("Hello, world!"); // 5.

    cy.contains("Submit") // 6.
      .click(); // 7.

    cy.get("h1") // 8.
      .should("contain", "My First Post");
  });
});

你困惑的两个表述其实并不矛盾，核心是要理解Cypress命令队列的运行逻辑：

1. 为什么说Cypress命令是异步入队延迟执行？ #

当你写cy.visit()、cy.get()这些代码时，调用函数的瞬间并没有立刻执行对应操作，而是把这个命令添加到Cypress内部的命令队列里。此时你的普通JavaScript代码会正常执行（比如在命令间加console.log会先打印），等当前测试块里的所有同步代码跑完，Cypress才会开始逐个执行队列里的命令。这就是所谓的“异步、延迟执行”。

2. 为什么能保证确定性、一致执行？ #

Cypress的命令队列是严格按顺序串行执行的，而且每个命令都自带智能等待机制：

• 每个命令会等待前一个命令完全执行完成（比如type输入结束、页面跳转完成）
• 命令本身会自动等待目标条件满足（比如cy.get()会等待元素出现在DOM中，超时才失败；should()会等待断言条件成立）

拿你的例子拆解：

• cy.visit()会等待页面加载完成，才会执行下一个命令
• cy.get("input.post-title").type(...)先等目标输入框出现，完成输入后，才会执行下一个cy.get("input.post-body")
• 输入完“Hello, world!”后，才会去找“Submit”按钮并点击
• 最后cy.get("h1").should(...)会等待页面跳转完成、h1元素出现且包含指定文本，才算测试完成

简单说，Cypress的“异步”是指命令不会阻塞当前JS线程，但命令之间是串行依赖、自动等待的，所以能保证每次运行都按预期顺序执行，绝不会出现“还没输入完就点击提交”的情况。

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