前言
在前端自动化测试中，断言是非常重要的一部分。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。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6794c0b4504e4ea9bd961bd6
