前言
在前端自动化测试中，断言是非常重要的一部分。Cypress 是一个优秀的自动化测试工具，它提供了非常丰富的断言 API。本文将针对 Cypress 常见断言进行详细介绍，同时给出示例代码，帮助读者快速了解如何使用 Cypress 进行正确的断言。
Cypress 的官方文档比较详细，但是有些地方过于抽象，难以理解。所以在本文中，我们将采用更为直观、易于理解的语言进行讲解。
断言 API
Cypress 的断言 API 可以分为以下几类：
- 判断元素是否存在 / 可见
- 判断元素的属性 / 文本 / 值是否符合预期
- 判断操作是否触发了正确的效果
下面我们来逐个进行介绍。
判断元素是否存在 / 可见
元素的存在与可见性是测试中最基础的断言。Cypress 提供了以下 API 用于进行元素的存在性和可见性的断言：
// 判断元素是否存在
cy.get(selector).should('exist')
// 判断元素是否可见
cy.get(selector).should('be.visible')
cy.get(selector).should('not.be.hidden')其中，selector 表示元素的 CSS 选择器。 一般情况下，我们可以直接使用元素的标签名、类名、属性名等进行选择，也可以通过 data-* 或自定义属性等方式进行选择。
判断元素的属性 / 文本 / 值是否符合预期
除了元素的存在与可见性，我们还需要对元素的属性、文本或者值进行判断。Cypress 提供了以下 API 用于进行这类判断：
// 判断元素的属性值是否符合预期
cy.get(selector).should('have.attr', 'attributeName', 'expectedValue')
// 判断元素的文本内容是否符合预期
cy.get(selector).should('have.text', 'expectedText')
// 判断元素的值是否符合预期（比如 input 元素的 value 属性）
cy.get(selector).should('have.value', 'expectedValue')判断操作是否触发了正确的效果
最后，我们需要对页面上的交互操作进行测试。我们可以使用以下 API 进行判断：
// 判断点击按钮后，对应的输入框是否获得了焦点
cy.get('button').click()
cy.get('input').should('be.focused')
// 判断页面是否成功跳转
cy.location('pathname').should('equal', '/expectedPathname')示例代码
下面是一个完整的测试代码示例，以便读者更好地理解 Cypress 的断言 API：
-- -------------------- ---- -------
----------------- ------ -- -- -
------------- -- -
-- --------------
-------------------------------
--
---------- ------ ----------- -- -- -
----------------
----------------
------------------
----------------- ----------
----------------------
----------------
------------------
----------------- ----- -- -- ------- -------
-----------------
----------------
------------------
--------
----------------------------
---------------------
------------- --------
------------------------
----------------
------------------
--------
-----------------------
---------------- -----------
--
--上述示例代码中，我们针对一个示例页面进行了测试，测试了页面中的标题、描述、按钮、输入框，以及交互操作后的页面跳转情况。通过上述断言 API，我们可以保证测试的覆盖范围到达最大，在得到正确结果的情况下，能够极大提高开发效率。
结语
本文针对 Cypress 常见断言进行了详细介绍，在实际测试中应用酝酿了示例代码。断言在前端自动化测试中是不可或缺的组成部分，希望读者可以通过本文更好地理解并掌握 Cypress 的断言 API。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6794c0b4504e4ea9bd961bd6