Cypress 是一个现代化的前端自动化测试工具，它不仅可以测试 UI 行为，还可以测试网络调用等异步操作。然而，在编写 Cypress 测试用例时，我们会遇到许多异步代码的问题。这篇文章将会介绍 Cypress 如何处理异步代码，让你能够更加优雅地编写测试代码。
Cypress 隐式等待
在 Cypress 中，默认情况下，所有的测试命令都会被 Cypress 解释成异步命令。Cypress 会自动添加一个隐式等待（Implicit Wait）时间，等待页面加载完成或元素出现，然后才会执行后面的操作。这意味着，如果某个元素需要一段时间才会出现，那么 Cypress 就会一直等待，直到元素出现或者时间到了才会继续执行下一步操作。
// 点击按钮后，等待 5 秒钟，然后断言某个元素是否存在
cy.get('#button').click()
cy.wait(5000)
cy.get('#element').should('exist')然而，这种隐式等待可能会导致以下两个问题：
- 不清楚 Cypress 到底在等待什么，这会导致调试困难。
- 每个命令都需要等待一段时间，浪费了测试的时间。并且如果页面或元素比默认的等待时间长，就会造成测试失败。
为了避免这些问题，我们可以使用显式等待（Explicit Wait）。
Cypress 显式等待
显式等待是在代码中故意等待某个状态或条件，直到这个状态或条件被满足后才继续执行后续操作。Cypress 提供了几种方法来实现显式等待。
cy.wait()
我们可以使用 cy.wait() 命令来实现显式等待。它会等待指定的毫秒数，然后继续执行后续命令。当需要等待一个固定的时间时，cy.wait() 是比较有用的。
cy.get('#button').click()
cy.wait(5000)
cy.get('#element').should('exist')但是，等待固定的时间往往是笨重的。因此，Cypress 还提供了其他方法来等待某个条件。
cy.get()
我们可以使用 cy.get() 命令来等待某个元素出现。默认情况下，cy.get() 命令会一直等待，直到元素出现或者超时时间到了才会继续执行后面的命令。你可以通过传递 timeout 选项来修改等待的时间。
cy.get('#element', { timeout: 10000 }).should('exist')cy.contains()
cy.contains() 命令也是等待某个元素出现，并且可以等待元素的文本内容。它也可以通过传递 timeout 选项来修改等待的时间。
cy.contains('按钮', { timeout: 10000 }).click()
cy.contains('成功', { timeout: 10000 }).should('exist')cy.intercept()
如果你需要等待某个网络请求完成，你可以使用 cy.intercept() 命令来拦截网络请求，然后等待它完成。你可以指定拦截的 URL 或方法，并且可以修改等待的时间。
cy.intercept('POST', '/api/login').as('login')
cy.get('#button').click()
cy.wait('@login', { timeout: 10000 }).its('response.statusCode').should('eq', 200)Cypress Promise
在 Cypress 中，所有的测试命令都会返回 Promise 对象。如果你需要在测试命令之间进行一系列异步操作，你可以使用 Promise 的 then() 和 catch() 方法，这些方法可以使你的测试代码更加的模块化和易于维护。
-- -------------------- ---- ------- --------------------------------- -- - ---------------------------------- -- ----------------------------- -- - ----- ---- - ---------- ------ --------------------- -------------- -- - ------------------------------- ------- --
总结
本文介绍了 Cypress 如何处理异步代码的问题。通过使用显式等待和 Promise 的方法，可以使我们的测试代码更加优雅和易于维护。在实际的测试过程中，你需要根据不同的场景选择合适的方法，以避免测试失败和浪费时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647b1cd2968c7c53b06ad01e