Javascript Cypress中的链接函数 上下文

我很难理解开发人员何时应该处理Cypress中的异步，何时不应该（因为它是在幕后处理的）

考虑以下两个测试：

（A）

（B）

• #soSection将包含“堆栈溢出”，直到我们单击该按钮。因此，这两条线应该同步运行
• （A） 使用，使您能够使用从上一个命令生成的主题。（B） 不使用它

---

到目前为止我都试过了 我已经运行了（A）和（B）两个测试。这两种方法都很好地工作，并且表现相同

---

怀疑

如果我们需要使用前面的主题，那么我们应该只使用方法（A）和链接表。是否有其他情况下我们必须使用（A）示例中的可链接项

请看（B）中的3行代码。我们希望这三条线路能够成功运行。然而，Cypress声称是异步运行的。因此，我们如何确保这3条生产线将按预期顺序运行

---

您应该阅读名为“核心概念”菜单下的页面，或者更一般地说，阅读“核心概念”菜单下的所有内容。其中大部分主题和概念都在这里进行了解释

命令产生 您的假设是正确的，如果您需要前面的主题，那么您需要使用

，因为Cypress是异步的，并且不返回主题。相反，它产生了它。这被称为：

Cypress命令不会返回他们的臣民，而是让他们离开。请记住：Cypress命令是异步的，并排队等待稍后执行。在执行过程中，从一个命令到下一个命令生成主题，并且在每个命令之间运行大量有用的Cypress代码，以确保一切正常

示例如下：

有些方法产生
null
，因此无法链接，例如
cy.clearCookies（）

有些方法，如
cy.get（）
或
cy.contains（）
，会生成一个DOM元素，允许将更多命令链接到它们上（假设它们需要一个DOM主题），比如
。再次单击（）
甚至
cy.contains（）

每个命令都会产生不同的结果。您可以在每个命令的文档中对此进行检查。例如，声明它返回一个DOM元素

从技术上讲，您甚至不需要在每个命令之前添加
cy.
，因为它们都返回
cy
，使每个命令都可以链接。通常，您只需要在命令链的开头使用
.cy
（如
然后
块的开头）。这更像是一个代码风格的问题

命令执行
当您运行3
cy.get
行时，命令本身不会被执行，它们只会被Cypress添加到队列中。Cypress将跟踪您的命令并按顺序运行它们。每个命令都有一个超时，并将在该时间范围内等待命令条件得到满足

正如该节所述：

Cypress命令在被调用的那一刻不做任何事情，而是将自己排队等待以后运行。这就是我们所说的Cypress命令是异步的

从技术上讲，我应该引用文档的整个页面，因为它的结构非常好，简洁而详细，有很多示例代码。我强烈推荐你读它

总结
简而言之，使用
cy.
调用队列命令以运行Cypress。如果您需要运行自己的同步代码，或者需要生成的主题，则应在Cypress命令后添加一个
。然后（）
，以运行该代码。您可以在
.then（）
中编写所有连续的命令，但这是不必要的，您只需重新创建JS
then
末日圣诞树。因此，如果需要上一个命令的主题或希望插入同步代码，请仅使用
then
。当然，在一些同步代码（如
if
条件）之后，您需要再次调用
cy.
，它们将在
中排队，然后
。您是将剩余的
cy.
命令添加到
then
中，还是添加上面的一个或多个级别，取决于您是否需要处理给定
then
块中发生的内容，或者您喜欢如何设置代码的样式。以下是为演示而修改的文档示例：

it（'test'，（）=>{
参观https://app.com')
//这些行将排队，并由Cypress按顺序运行
cy.get（'ul>li'）。等式（4）
cy.get（'.nav'）.contains（'About'））
//我们要使用.user字段的值
cy.get（“.user”）
。然后（$el）=>{
//该行在.then（）执行后求值
让username=$el.text（）
//决定运行哪些命令（排队）的同步代码
如果（用户名）{
//“排队”其他命令
cy.contains（用户名）。单击（）
cy.get（'ul>li'）。等式（2）
}否则{
cy.get（'My Profile'）。单击（）
}
})
//不依赖于'then'块中的数据的命令
cy.get（'.status'）。包含（'Done'））
})
您应该阅读名为的页面，或者更一般地说，阅读“核心概念”菜单下的所有内容。其中大部分主题和概念都在这里进行了解释

命令产生
您的假设是正确的，如果您需要前面的主题，那么您需要使用
，因为Cypress是异步的，并且不返回主题。相反，它产生了它。这被称为：

Cypress命令不会返回他们的臣民，而是让他们离开。请记住：Cypress命令是异步的，并排队等待稍后执行。在执行过程中，从一个命令到下一个命令生成主题，并且在每个命令之间运行大量有用的Cypress代码，以确保一切正常

示例如下：

有些方法产生
null
，因此无法链接，例如
cy.clearCook
it('stackoverflow example',() => {
    cy.get('#soSection').should('contain', 'Stack Overflow').then(() =>{
      cy.get('#soButton').click().then(() => {
        cy.get('#soSection').should('not.contain', 'Stack Overflow');
      });
    });
});

it('stackoverflow example',() => {
  cy.get('#soSection').should('contain', 'Stack Overflow');
  cy.get('#soButton').click();
  cy.get('#soSection').should('not.contain', 'Stack Overflow');
});