Cypress 是一个功能强大的前端自动化测试框架，它的命令集可以非常方便地对页面进行模拟操作，并且提供了非常详细的日志输出和错误信息，方便开发人员进行调试。但是在实际的开发中，有些操作可能比较复杂，需要多次调用，在这种情况下，我们可以通过自定义 Cypress 命令来实现方便的调用并提高代码的可读性。
定义自定义命令
Cypress 中的自定义命令很容易就可以定义，只要使用 Cypress.Commands.add() 方法即可，并且可以根据需要传递参数和返回结果。例如，我们要定义一个自定义命令来模拟用户登录：
----------------------------- ---------- --------- -- - ------------------------------------------- ------------------------------------------- ---------------------------------- --
上面的代码中，我们用 Cypress.Commands.add() 来定义了一个名为 login 的自定义命令，该命令接受两个参数：用户名和密码。在该命令体内，我们使用了 Cypress 本身提供的命令，如 cy.get()、cy.type() 和 cy.click()，来执行模拟用户登录的操作。最后，我们可以在测试用例中像调用普通 Cypress 命令一样调用该自定义命令：
----------------- -- -- -
---------- ----- -------------- -- -- -
------------------
---------------- -----------
--------------------- -----------------------------
--
--上面的测试用例中，我们先使用普通的 Cypress 命令 cy.visit() 来访问登录页面，然后调用自定义命令 cy.login()，传递用户名和密码，执行登录操作。最后，我们使用 cy.url() 来检查是否成功登录到了首页。
传递参数
自定义命令与普通的 Cypress 命令一样，可以传递任意个数的参数，例如，我们可以来实现一个自定义命令，该命令接受任意个数的参数，并依次打印出来：
----------------------------- --------- -- -
---------------- -- -
----------------
--
--在该自定义命令的实现中，我们使用了 ES6 的扩展运算符 ...args 来接受任意个数的参数，并使用 forEach 循环来依次打印出来。这样，在测试用例中，我们就可以传递任意个数的参数：
----------------- -- -- -
---------- ----- ------------ -- -- -
----------------- -------- ----
--
--上面的测试用例中，我们调用了自定义命令 cy.print()，传递了三个参数，并在控制台中打印出来。
返回结果
自定义命令除了可以接受任意个数的参数外，还可以返回任意类型的结果，例如，我们要定义一个自定义命令，该命令接受一个 CSS 选择器，返回选中元素的坐标和尺寸：
--------------------------------- -------- -- -
------ ------------------------------ -- -
----- - ----- ---- ------ ------ - - -----------------------------------
------ - ----- ---- ------ ------ -
--
--在该自定义命令的实现中，我们使用了 Cypress 命令 cy.get() 来选中指定的元素，并使用 Promise 来异步返回选中元素的坐标和尺寸，例如：
------------- -------- -- -- -
---------- --- ------ -- --- --------- -- -- -
-------------
--------------------------------- -- -
-------------------
--
--
--上面的测试用例中，我们首先通过 cy.visit() 命令访问了首页，然后调用了自定义命令 cy.getBounds()，传递了选择器 #logo，并在 Promise.then() 方法中得到了选中元素的坐标和尺寸，并打印出了来。
组合命令
自定义命令与 Cypress 命令之间可以组合使用，例如，我们要实现一个自定义命令，该命令接受两个 CSS 选择器，分别获取它们的位置和尺寸，并计算它们的中心点坐标：
--------------------------------- ----------- ---------- -- -
------ ------------------------------------ -- -
------ ------------------------------------ -- -
----- ------- - ------------- - ------------- - ------------ - -------------- - -
----- ------- - ------------ - -------------- - ----------- - --------------- - -
------ - -- -------- -- ------- -
--
--
--在该自定义命令的实现中，我们使用了 cy.getBounds() 命令来获取两个选择器对应元素的位置和尺寸，并在 Promise.then() 方法中进行了中心点坐标的计算，并返回了结果。例如，在下面的测试用例中，我们将两个按钮的中心点坐标计算出来，并模拟了一次鼠标单击事件：
----------------- -- -- -
---------- ----- --- ------ ----- -- --- --- ---------- -- -- -
-------------
------------------------ ----------------------- -- -
------------------------------ ---------
--
--
--上面的测试用例中，我们首先通过 cy.visit() 命令访问了首页，然后调用了自定义命令 cy.getCenter()，传递了两个选择器 #button1 和 #button2，并在 Promise.then() 方法中将两者中心点坐标计算出来，并用 cy.get() 命令获取了整个页面的 body 元素，并使用了 body.click() 方法模拟了一次鼠标单击事件。
结论
通过自定义 Cypress 命令，可以将多次重复的操作抽象成一个可复用的命令，提高代码的可读性和可维护性。自定义命令可以接受任意个数的参数并返回任意类型的结果，可以与普通 Cypress 命令和其他自定义命令进行组合使用，方便进行复杂的操作。上面的例子只是冰山一角，实际运用起来还有更多的能力和技巧等待我们去挖掘和探索。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/670f7fde5f5512810264e878