Cypress 是一个功能强大的前端测试框架，它提供了丰富的该框架中内置许多常用的断言和DOM操作函数。同时也允许使用者自定义命令Commands，来封装业务操作。（本文主要介绍自定义命令Commands）
本教程将详细介绍如何使用自定义命令Commands来提高业务操作的复用性和减少重复代码的编写量，同时我们也将对一些开箱即用的cypress命令进行一些简单的回顾和比对，以便加深你对Cypress的理解并对cypress的使用更加得心应手。
Commands
定义：
Custom Commands是Cypress允许我们自定义的命令或函数，它类似于Javascript中的函数。Cypress内置了许多关键词和事件，我们在使用过程中会有一些重复性的代码，这个时候我们就可以封装这些代码到自定义命令中进行调用复用。优点：(1) 保证代码的一致性和可读性 (2) 减少代码冗余 (3) 复用代码。
有了自定义命令，我们可以把一些可重复的业务操作封装到一个函数中，然后在不同的测试用例中调用。
示例 - 鼠标操作
我们以鼠标操作为例，看看如何封装一个自定义命令。
假设我们的需求是在一个按钮和一个输入框之间切换，那么这个过程中我们需要在输入框上移动鼠标，然后等待一段时间，最后再单击按钮。
运行命令:
npm install cypress-real-events --save-dev来将cypress-real-events库安装加入到cypress中;在项目中新建一个命令脚本
cypress/support/commands.js，并在其中添加以下代码：
Cypress.Commands.add('interactElement', (selector) => {
const $ele = cy.get(selector);
return $ele
.realHover({tick: 200})
.wait(200)
.realClick({delay: 200})
})
该自定义命令封装了鼠标移动和单击操作，并且将等待200ms与移动间隔的时间设置为200ms，以保证操作能够正常执行。
- 在测试用例中，直接使用该自定义命令即可完成拖拽操作:
cy.interactElement('button');
cy.interactElement('input');如上所示，在测试用例中直接使用封装好的 interactElement()命令即可完成鼠标操作，可以看出这大幅度地减少了我们的代码量。
示例 - 请求接口
Cypress中提供了许多请求相关的命令，例如cy.request()，但是针对于某些经常使用的请求我们可能需要进行定制化的处理。例如，加入我们在请求接口时，需要传递一些公共参数，或者通过一些中间件或拦截器来对请求或响应做全局处理，这些都是需求很必要的操作。
如何实现？
- 在项目中新建一个命令脚本
cypress/support/commands.js，并在其中添加以下代码：
-- -------------------- ---- -------
--------------------------------- --------- -- -
----------- - ------------------------- - ----------- -- ------
-- ------------------ --- --------
----- ---------- - ------- - - -----------------------------------
-------------------------------- - ---------- -- --------
-
-- ---- ------------------
------ -------------------
--上述代码中，我的自定义命令myRequest封装了请求拦截器，通过调用该接口我可以自动化地添加token等。这样，其他工程师在调用测试用例时，便不需要单独为该功能再进行处理。
- 在测试用例中，直接使用该自定义命令来调用API接口：
-- -------------------- ---- -------
--------------
------- -------
---- -------------
----- -
--------- ---------------
--------- ----------
--
------------------ -- -
-- ---- ----------
---如此一来，在我们日常使用中，常常能够避免由于忘记携带token、在请求前做一些操作这些导致的问题。
通过上述两个不同的例子，可以看出，在特定场景下自定义命令的使用能够让Cypress的测试代码更加优雅，易于维护，提高测试用例的可读性。
总结
自定义命令是Cypress的一个非常强大的功能，我们可以通过一些基本的js语法进行封装业务代码，方便于测试用例的复用性和代码重用，最重要的是使得代码易于管理和维护。
在正式项目实践时，我们建议尽可能地将大量的相同的测试代码块封装为自定义命令，提高我们的开发效率，也为后面的团队维护和拓展做好准备。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486086448841e98944b315f