Cypress 自动化测试：如何使用 commands 自定义命令
作为一名前端工程师，测试是我们工作中非常重要的一部分。自动化测试是测试中的重要组成部分，可以大幅度提高测试效率和减少测试成本。而 Cypress 是目前前端领域使用非常广泛的自动化测试工具之一，它的易用性和实时的监控功能赢得了广大开发者的青睐。
在 Cypress 中，我们可以通过 commands 自定义命令，将一些常用的测试步骤封装为一个函数，方便重复使用。本文将对 Cypress 中如何使用 commands 进行详细介绍。
一、常规测试用例
在介绍 commands 如何使用之前，我们先来看一个常规的测试用例。假设我们需要测试一个登录页面。
-- -------------------- ---- -------
----------------- -- -- -
--------- ---- ------- ------------- -- -- -
------------------
---------------------------------------------------------
-------------------------------------------------
---------------------------------------
-------------------------- -------------
-------------------------------------------
--
--在这个测试用例中，我们先访问了登录页面，然后输入用户名和密码，点击登录按钮，最后断言是否跳转到了 dashboard 页面，并且页面中包含 Welcome 提示。
这是一个比较简单的测试用例，但是在实际工作中，我们往往会有非常多的这种重复的测试步骤，如果每次都重复书写这些步骤，会非常繁琐，并且容易出现错误。这时候，我们可以使用 Cypress 的 commands 功能统一封装这些测试步骤。
二、commands 的定义和使用
1、commands 的定义
在 Cypress 中，我们可以通过 Cypress.Commands.add() 方法来定义一个 command。
Cypress.Commands.add(name, callbackFn)
其中 name 表示 command 的名称，callbackFn 表示 command 的实现函数。我们可以将 command 实现函数看做一个普通的函数，其中可以写入任何 Cypress 支持的断言和操作。
下面我们来使用 commands 来优化上面的测试用例。
2、使用 commands
-- -------------------- ---- -------
----------------------------- ---------- --------- -- -
------------------
-----------------------------------------------
-----------------------------------------------
---------------------------------------
--
----------------- -- -- -
--------- ---- ------- ------------- -- -- -
---------------------------- -----------
-------------------------- -------------
-------------------------------------------
--
--在上面的代码中，我们定义了一个名为 login 的 command，并且将登录页面的测试步骤封装在了 login 函数中。在测试用例中，我们通过 cy.login('example@test.com', 'password') 来调用 login 函数，实现了代码的重用和简化。
三、commands 的更多用法
除了用于封装测试步骤之外，commands 还可以用于一些特殊的场景，比如模拟网络延迟或者重试等。下面给出一些例子。
1、模拟网络延迟
Cypress.Commands.add('loginSlowly', (username, password) => {
cy.visit('/login')
cy.get('input[name="username"]').type(username)
cy.wait(2000)
cy.get('input[name="password"]').type(password)
cy.wait(2000)
cy.get('button[type="submit"]').click()
})在上面的代码中，我们使用了 cy.wait() 方法来模拟网络延迟，可以更准确地测试用户体验。
2、重试失败用例
-- -------------------- ---- -------
---------------------------------- - ------------ ---- -- --------- -------- -- -
----- - ------- - -- -------- - ---- - - -------
-------- ------- -
------ ---------------
------------ -- -
---------
-- -------- - -- -
------ -----------------------------
-
----- ---
--
-
------ -------
--在上面的代码中，我们定义了一个 clickRetry 的 command，使用了递归的方式重试操作，可以更容易地测试一些不稳定的页面元素。
四、commands 的注意事项
在使用 commands 的时候，我们需要注意以下几个问题。
1、命名规范
命名应该遵守小驼峰命名法，并且尽量采用小写字母。
2、作用域
定义的 command 只能在当前测试脚本中使用，如果需要在多个测试脚本中使用，需要将其放置在一个统一的文件中，并通过 import/export 等方式进行引用。
3、命名冲突
定义的 command 的名称不能与 Cypress 内置命令名称相同。如果名称冲突，则自定义命令将覆盖 Cypress 原生命令。
4、不允许链式调用
由于定义的 command 本质上是一个函数，不是 Cypress 的原生命令。所以，我们不能在一个命令中使用另一个命令。
五、结语
在实际工作中，命令的使用可以大大减少测试代码的冗余和错误率，提高测试效率，并且可以有效地组织测试代码。除了 commands，Cypress 还有其他比较强大的功能，比如 Fixture 和 Alias 等。希望本文对大家能够有所帮助，也希望更多的前端开发者能够学习和使用 Cypress 来进行自动化测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67825077935627c90001a1c8
