Cypress 是现代化的前端端到端测试工具，它可以对你的 Web 应用程序进行自动化的端到端测试，以确保你的应用在不同设备、浏览器、不同网络速度下都能正常工作。在测试过程中，我们经常需要进行异步操作的测试，本篇文章将为大家介绍 Cypress 如何进行异步测试。
什么是异步测试？
异步测试是指测试中的操作需要等待一段时间才能完成，比如等待 Ajax 请求返回、等待动画播放完毕等。在 Cypress 中需要进行异步测试的情况很多，比如当我们点击一个按钮时，需要等待页面重新渲染完成后才能进行下一步操作。
如何进行异步测试？
Cypress 支持多种方式进行异步测试。下面我们分别介绍这些方式是如何工作的。
使用 cy.wait() 命令
wait 命令是 Cypress 内置的等待函数，可以让 Cypress 在等待一段时间后再继续执行后续的操作。 wait 命令如下：
cy.wait(5000) // 等待 5 秒钟
使用 wait 命令等待函数执行的时间虽然简单，但它不可控且不优雅，如果在等待的时间内发生了其它操作，程序的执行时间就会变得很长。
使用 cy.get() 命令的回调函数
可以在 cy.get() 命令中使用回调函数，从而实现等待异步操作完成的效果。回调函数会在元素找到后执行：
cy.get('#my-button').then(($button) => { // 等待 Ajax 请求返回 cy.wait(5000); // 调用 Cypress 的 click 命令模拟按钮被点击 cy.wrap($button).click(); })
这种方式比使用 wait 命令更加可控，但是在复杂的测试场景中会变得越来越难以维护。
使用 cy.wrap 和 Cypress.Promise
Cypress 提供了类似于 Promises 的 Cypress.Promise 接口来处理异步操作。可以使用 cy.wrap() 命令将异步操作的结果包裹起来，并使用 .then()，.catch() 等方法进行处理。
cy.wrap(getData()) // 异步操作获取数据 .should('have.length', 3) // 确保数据的长度为 3 .then((data) => { // ... 对数据进行进一步的测试 });
这种方式相对稳定，但似乎面临的问题是通常大部分 JavaScript 开发者并不熟悉 Cypress.Promise，而且这种方式也很容易在复杂的测试场景中变得冗长。
使用 cy.clock() 命令
Cypress 提供了一个比较新颖的命令，叫做 cy.clock()。该命令可以模拟时间的流逝，从而方便测试异步操作。
cy.clock(); cy.get('#my-button').click(); cy.tick(60000); // 快进 60 秒
这种方式非常易读，但实际上执行时间与真实时间不同，可能导致测试不准确。
结论
有许多方式可以使用 Cypress 进行异步测试。不止是上面提到的这些方式，Cypress 还有许多其他方式。最重要的是选择适合你的测试场景的方法。在你的实际测试情况中，选择更具可读性、可控性和稳定性的方式进行测试。
示例代码
最后，我们提供一个关于 Cypress 异步测试的完整示例代码：
-- -------------------- ---- ------- ---------------- -- -- - ------ ---- ------ -- -- - ------------ --------------- -------------- ------------------------------------- ------------------- --------------------- ---------- -------------------------- --- --- ------ ---------- ---- -- -- - ----------- -------------- ----------------------------- --------------- --- ---展开代码
在第一个测试中，我们使用 cy.wait() 命令等待 ajax 请求返回。在第二个测试中，我们使用 cy.clock() 命令来进行异步测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e5b4ee9a7045d0d689ac9
