随着前端应用的复杂度不断提高，我们越来越需要为我们的代码编写自动化测试。Cypress 是一个流行的前端自动化测试框架，它使用一个强大的命令体系来与应用程序交互，同时提供了灵活的 API 和钩子来进行测试。
在本文中，我们将深入探讨 Cypress 的测试命令体系，并了解如何使用它来测试我们的应用程序。我们将学习如何使用 Cypress 的命令中的选项、定制命令并结合它们构建复杂的测试场景。
Cypress 的命令体系
Cypress 提供了一些强大的命令，用于执行各种测试。这些命令是构建测试的基础，让我们先来了解 Cypress 的命令体系。
从本质上讲，Cypress 的命令都是异步函数，它们接受一些参数并返回一个 promise。命令有一个标准的格式，将命令名和参数按照以下方式组合在一起：cy.<command>()。其中 cy 是 Cypress 的全局对象，而 command 是命令名。例如，要访问应用程序中的某个 URL，可以使用以下命令：
-------------------------------
Cypress 支持许多不同的命令，包括 click、type、get、contains 等等。
Cypress 的命令选项
每个命令都有一系列的选项，可以用来进一步自定义命令的行为。例如，对于 cy.get 命令，可以使用以下选项：
timeout：设置超时时间。log：如果设置为true，则将命令日志记录到 Cypress 的控制台。withinSubject：命令应作用于哪个元素。
可以通过将选项作为第二个参数传递给命令来设置这些选项。例如，要使用 cy.get 命令获取某个元素，并将搜索范围限定在另一个元素的内部，可以使用以下命令：
-------------------- --------------- ----------------------
定制 Cypress 命令
Cypress 允许我们使用自定义命令来创建我们自己的命令。这些自定义命令可以调用 Cypress 自带的命令，并将其添加到测试中。这使我们能够编写更简洁、更模块化的测试代码，提高测试代码的可读性。
要定义一个自定义命令，请使用 Cypress.Commands.add 方法。这个方法可以接受两个参数：自定义命令名称和一个包装器函数。例如，要定义一个名为 login 的自定义命令，并调用 cy.get 命令来查找输入字段并输入用户名和密码，请使用以下代码：
----------------------------- ---------- --------- -- - ---------------------------------------- ---------------------------------------- -------------------------------- --
现在，我们就可以在测试中像这样使用 login 命令：
---------------------- -------------
我们可以创建更多自定义命令，以便在测试中复用常用的测试步骤，或对测试进行组织。
合并 Cypress 命令
另一个有用的 Cypress 测试技巧是将多个命令合并成一个新的命令。这使我们可以将多个命令组合成一个更简单、更明确的命令。
我们可以使用 Cypress 的 .then 和 .as 方法来创建一个新的命令。.then 方法将在前一个命令返回值的基础上执行新的命令，而 .as 方法将给前一个命令返回的对象赋予一个别名，以便后续操作。
例如，我们可以创建一个名为 getTodo 的命令，该命令将执行 cy.get 和 .then 方法，以获取待办事项列表的包装器元素。然后，我们使用 .as 方法将该元素赋予一个别名 todosWrapper，以便之后可以直接调用：
------------------------------- -- -- -
--------------------
----------- -- ------------------------------------
-------------------
--现在，我们就可以在测试中像这样使用 getTodo 命令：
------------ --------------------------------------------- --
在第二个命令中，我们从之前 getTodo 命令中的结果中获取了 todosWrapper 别名。
完美结合 Cypress 的测试框架妙用
在我们的应用程序中执行自动化测试时，我们要确保测试覆盖了所有必需的功能，并且容易阅读和维护。然而，测试代码自身也应该经受得住时间的考验，并能够自行进行管理。Cypress 提供了一些强大的测试工具和框架，可以帮助我们实现这一目标。
活动记录测试
使用 Cypress 可以实现活动记录测试。这意味着当测试运行时，Cypress 会记录测试运行期间的所有活动、命令和输出。这使我们能够更好地理解测试运行的过程，从而更准确地识别问题的根源。
要使用活动记录测试，请在 Cypress 测试运行时打开浏览器的 DevTools。一旦我们看到问题，就可以分析 DevTools 中记录的活动记录，以检查问题并修复它。
流程驱动测试
使用 Cypress 还可以实现流程驱动测试。这意味着我们可以根据应用程序的不同功能和流程来组织测试，使测试更加直观和可维护。例如，可以针对登录流程编写测试，并根据测试的成功或失败来决定后续操作。
要实现流程驱动测试，请使用 Cypress 的钩子(hooks)机制。Angular 中的 beforeEach() 钩子就是流程驱动测试的良好例子。我们可以使用 beforeEach() 钩子在每个测试之前执行一组特定的命令，以确保测试结果按预期执行。
Sandbox 环境
在 Cypress 的测试中，Sandbox 环境是一个具有令人惊叹的好处的概念。Sandbox 允许我们独立运行测试，并避免在测试期间向真实环境中插入测试数据。这使得我们可以更轻松、更快速地编写和运行测试。
要启用 Sandbox 环境，请使用 Cypress 的 cy.exec() 命令，并用它来运行我们需要的所有命令。这会使得 Cypress 在虚拟环境中运行命令，而不是在实际的应用程序环境中运行嵌套的功能。
例如，假设我们想要向应用程序中添加一个新的管理员帐户。我们可以使用以下代码将该用户添加到我们的测试中：
-------------------------
这个命令将在 Sandbox 环境中运行，并不会修改我们的真实环境。
结论
在本文中，我们深入探讨了 Cypress 的命令体系，了解了如何使用其选项和自定义命令，并结合使用 Cypress 的测试框架妙用来实现更加容易维护和理解的测试。我们希望这些技巧可以帮助您更好地使用 Cypress 并编写更好的测试代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672cac0eddd3a70eb6d8fa06