Cypress 是一个基于 JavaScript 的前端自动化测试工具。与其他自动化测试工具不同，Cypress 可以直接运行在浏览器中，具有简单易用、强大的 API、快速稳定的执行速度等优点。在实际应用中，常常需要使用断言来验证测试结果是否符合预期，因此本文将介绍 Cypress 的常见断言操作及使用技巧，帮助开发人员更加顺利地完成前端自动化测试。
1. 断言基础知识
在开始讲解 Cypress 的断言操作之前，我们先要了解断言的基础概念。所谓“断言”，就是程序员写下的一些语句，用于验证程序运行的结果是否符合预期。当结果与预期不一致时，断言会抛出异常并提示异常信息，从而方便程序员排查错误。
以下是一个简单的断言示例：
----- --- - --- -- -- - - -- --------------------- -- --- -- ---- -- - --- - -- --- ----- -- ----
上述代码中，我们定义了一个函数 sum，用于计算两个数的和。接下来，使用 console.assert 来断言 sum(2, 3) 的返回值是否等于 5。若断言成功，则控制台不会有任何输出，否则会输出 'Sum of 2 and 3 is not equal to 5'。
2. Cypress 断言操作
Cypress 提供了一系列的断言操作，方便开发人员验证测试用例的执行结果。下面我们将介绍 Cypress 的常见断言操作及使用技巧。
2.1 should 链式语句
Cypress 中的 should 是一个链式语句，用于验证某个元素的属性、文本内容和状态等是否符合预期。以下是一个简单的示例：
-------------------------------------- ------------------------------------ ----------- ---------------------------------------------- ----------
上述代码中，我们分别使用了三个 should 语句。第一个语句验证按钮是否可见，第二个语句验证文本框的值是否等于 'example'，第三个语句验证导航栏的类名是否不包含 'hidden'。
使用 should 链式语句时，注意以下几点：
should语句可以连续使用，也可以单独使用。should语句可以接受一个或多个参数，每个参数都是一个操作符，用于判断某个属性或状态是否符合预期。should语句的返回值是一个 Promise，用于异步等待验证结果是否符合预期。如果验证失败，则会抛出异常并终止测试用例执行。
2.2 expect 语句
Cypress 中的 expect 语句用于验证某个元素的属性、文本内容和状态等是否符合预期。与 should 语句不同，expect 语句返回的是一个断言对象，常常用于与 Jest 等测试框架结合使用。以下是一个简单的示例：
--------------------------- -- - ------------------------------- ----- ------------------------------------- ---
上述代码中，我们使用了两个 expect 语句。第一个语句验证按钮的文本是否为 'Click Me'，第二个语句验证按钮是否被禁用。
使用 expect 语句时，注意以下几点：
expect语句可以搭配cy.get或$等选择器使用，用于选中要验证的元素。expect语句可以使用多个断言操作符，用于检查元素的多个属性和状态等。expect语句的返回值是一个断言对象，与 Jest 等测试框架结合使用时，常常需要使用其返回值进行断言判断。
2.3 assert 语句
Cypress 中的 assert 语句用于验证某个变量或表达式是否符合预期。与 should 和 expect 语句不同，assert 语句不会返回 Promise 或断言对象，它会直接抛出异常并停止测试用例的执行。以下是一个简单的示例：
-------------------------- -- - ----- ----- - ---------- ------------ --- ---------- ------ ----- -- --- ----- -- ------------ ---
上述代码中，我们使用了 assert 语句，来验证一个输入框的值是否等于 'example'。
使用 assert 语句时，注意以下几点：
assert语句可以搭配cy.get或$等选择器使用，用于选中要验证的元素。assert语句可以接受一个或多个参数，第一个参数为待验证的变量或表达式，后面的参数为异常信息。assert语句的返回值是undefined，它会直接抛出异常并停止测试用例的执行。
3. 断言使用技巧
Cypress 的断言操作非常灵活，可以根据具体的需求进行组合使用。以下是一些常用的断言使用技巧。
3.1 显式等待操作
在测试用例执行过程中，可能会出现页面加载缓慢、异步操作等问题，导致元素的获取和操作失败。为了解决这个问题，我们可以使用 Cypress 的显式等待操作，等待元素和状态符合预期后再进行操作。以下是一个简单的示例：
--------------------------------------- -------------------------------------- ---- ------------------------- ----------------------------------------------- -- - --------------------------- ---
上述代码中，我们使用了 .should('not.exist')、.should('have.length', 10) 和 .should('be.visible') 等语句，来显式等待页面元素的出现、消失和状态变化。在 .within 语句中，我们又在弹窗中使用了 .get('.confirm').click() 语句，点击确认按钮。
使用显式等待操作时，注意以下几点：
- 显式等待操作需要配合
should语句使用，来验证元素和状态是否符合预期。 - 显式等待操作可以在
get和find等选择器中使用，也可以单独使用。 - 显式等待操作的超时时间可以在
cypress.json或测试用例中进行配置。
3.2 重试操作
在某些情况下，元素的获取和操作可能会失败，但稍后重试可能会成功。为了解决这个问题，Cypress 提供了 retry 函数，可用于在失败后自动重试操作，直到成功或超时。以下是一个简单的示例：
--------------------------------- -------------------------------------- - -------- ----- ------------ -------------------------------- -- - ---------------------------------- ------------
上述代码中，我们分别在点击按钮、验证加载条和验证表格长度时使用了 retry 函数进行重试操作。其中，第二个例子设置了 5 次重试和 10 秒超时时间，第三个例子设置了 3 次重试。
使用重试操作时，注意以下几点：
- 重试操作需要配合
should和expect语句使用，来验证元素和状态是否符合预期。 - 重试操作可以在
.click()、should()、expect()和自定义函数等场景中使用。 - 重试操作的超时时间可以在
cypress.json或测试用例中进行配置，可以有不同的时限。
4. 总结
本文介绍了 Cypress 的常见断言操作及使用技巧，希望读者能够通过学习掌握前端自动化测试技能，并在实际应用中灵活运用。在实践过程中，还需要不断地积累经验、查阅文档和调试错误，才能将前端自动化测试做得更加完善。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65215d3595b1f8cacd8de162