Cypress 是一个现代化的前端端到端测试工具，采用了略微不同的测试策略，该工具能够帮助测试员与开发人员检验 Web 应用程序中的各种交互行为以及重现 Bug。对于那些涉及时间基准线的行为，如等待、定时器和动画等，Cypress 的性能测试措施将十分有用。在本文中，我们将详细介绍如何在 Cypress 中测试与时间有关的行为，使您能够创建更稳健和高效的自动化测试。
等待和定时器
许多 Web 应用程序都涉及到各种等待事件和定时器，例如：等待 AJAX 响应、等待数据加载、定时器延时等。当需要等待一个精确定时，或者需要验证许多触发器甚至超时的行为，就要使用 Cypress 的 .wait() API 了。此方法接受一个数字参数，表示等待的毫秒数。
cy.get('#loading').should('not.exist')
cy.get('#start-button').click()
cy.wait(1000) //等待 1 秒钟
cy.get('#result').should('be.visible')然而，有时您必须等待一个不确定的时间之后才能操作元素。在这种情况下，您可以使用 .waitUntil() API，该 API 允许您定义一个在满足特定条件之前等待的函数。
cy.get('#start-button').click()
cy.waitUntil(() =>
cy.get('#result').then($el => $el.text() === 'Finished').should('be.true'),
{timeout: 5000},
{interval: 500}
)上面的代码将等待最多 5000 毫秒，直到 #result 元素包含 "Finished" 文本。它还使用 500 毫秒的间隔来轮询元素是否满足条件。这样能确保即便是在未来可能会有更高延迟的情况下，您的测试也可以顺利运行。
动画
随着 Web 应用程序变得更互动，动画也就变得更普遍。Cypress 具有管理动画效果的内置支持，但在某些情况下，你可能想要执行动画操作并进行验证。下面是一些常见的动画行为测试样例。
点击一个带有动画效果的元素
可能您会遇到一个带有动画效果的元素，当您通过点击它时，它会开启或者关闭某些东西。为了测试这一个行为，您需要检查动画是否已经完成，这可以使用 Cypress 的 .wait() API 配合情况。
cy.get('#menu-button').click()
cy.wait(500) // 等待 0.5 秒钟
cy.get('#menu-panel').should('be.visible')模拟鼠标悬浮效果
下面的代码片段演示了如何测试一个鼠标悬停效果的元素。首先，您需要在元素上调用 .trigger()，通过设置 'mouseover' 事件类型来触发这个效果，随后等待一定时间让其动画效果完成，然后进行验证。
cy.get('#menu-item').trigger('mouseover')
cy.wait(500) // 等待 0.5 秒钟
cy.get('#popup-menu').should('be.visible')示例测试
下面是一个更加完全的样例，演示了 Cypress 如何测试一段 JavaScript 代码，在按钮点击后，异步等 10 秒，然后检查实际插入到 DOM 中的元素是否正确。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ---- ---------------
-------
------
------- --------------------------------
---- -----------------
----
---------------
-----
------
--------
-------- ------------------ -
------ --- ----------------- ------- -- -
------------- -- -
-------------------
-- -------
---
-
----------------------------------------------------------------- ----- -- -- -
--- -
----- ----- - ----- -------------------
----- ---- - -----------------------------
-------------- - ------
------------------------------------ -----------------------
- -------- -
-----------------
-
---
---------
-------
-------在 Cypress 中测试上述代码的方法如下。
-- -------------------- ---- -------
-------------- --- ---------------- ---------- -- -- -
------------- -- -
-----------------------
--
----------- ------ -- -- -
-------------------------------
--------------
-------------------- -------------------------- --
-------------------- ------------------------------ ----------
--
--以上例子指导我们集中我们的关注点来测试我们在应用程序中编写的特定行为，而不是我们所猜测的实际行为。此外，为了测试一个好的脚本，您需要提供好的测试数据和上下文，正如您在上面看到的那样，我们可以肯定地说这段 JavaScript 代码已经经过了我们的测试。
结论 使用 Cypress 的 .wait() 和 .waitUntil() API，您可以轻松地控制您的测试时序。通过对动画效果进行小心处理，您可以检查它的结果和验证。Cypress 可以让您区分单元测试和效能测试，并且可以帮助您测试应用程序的真实行为。我们希望这篇文章能够让您更好地理解测试时间相关行为的需要，并在 Cypress 中实现这些测试的方法并提供一些有用的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674aba5ca1ce006354a1d49f