Cypress 常见断言操作及使用技巧分享，让你的测试更加完善

Cypress 是一个基于 JavaScript 的前端自动化测试工具。与其他自动化测试工具不同，Cypress 可以直接运行在浏览器中，具有简单易用、强大的 API、快速稳定的执行速度等优点。在实际应用中，常常需要使用断言来验证测试结果是否符合预期，因此本文将介绍 Cypress 的常见断言操作及使用技巧，帮助开发人员更加顺利地完成前端自动化测试。

1. 断言基础知识

在开始讲解 Cypress 的断言操作之前，我们先要了解断言的基础概念。所谓“断言”，就是程序员写下的一些语句，用于验证程序运行的结果是否符合预期。当结果与预期不一致时，断言会抛出异常并提示异常信息，从而方便程序员排查错误。

以下是一个简单的断言示例：

const sum = (a, b) => a + b;
console.assert(sum(2, 3) === 5, 'Sum of 2 and 3 is not equal to 5');

上述代码中，我们定义了一个函数 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 是一个链式语句，用于验证某个元素的属性、文本内容和状态等是否符合预期。以下是一个简单的示例：

cy.get('button').should('be.visible');
cy.get('input').should('have.value', 'example');
cy.get('.navigation').should('not.have.class', 'hidden');

上述代码中，我们分别使用了三个 should 语句。第一个语句验证按钮是否可见，第二个语句验证文本框的值是否等于 'example'，第三个语句验证导航栏的类名是否不包含 'hidden'。

使用 should 链式语句时，注意以下几点：

• should 语句可以连续使用，也可以单独使用。
• should 语句可以接受一个或多个参数，每个参数都是一个操作符，用于判断某个属性或状态是否符合预期。
• should 语句的返回值是一个 Promise，用于异步等待验证结果是否符合预期。如果验证失败，则会抛出异常并终止测试用例执行。

2.2 expect 语句

Cypress 中的 expect 语句用于验证某个元素的属性、文本内容和状态等是否符合预期。与 should 语句不同，expect 语句返回的是一个断言对象，常常用于与 Jest 等测试框架结合使用。以下是一个简单的示例：

cy.get('button').then(($el) => {
  expect($el).to.have.text('Click Me');
  expect($el).to.have.attr('disabled');
});

上述代码中，我们使用了两个 expect 语句。第一个语句验证按钮的文本是否为 'Click Me'，第二个语句验证按钮是否被禁用。

使用 expect 语句时，注意以下几点：

• expect 语句可以搭配 cy.get 或 $ 等选择器使用，用于选中要验证的元素。
• expect 语句可以使用多个断言操作符，用于检查元素的多个属性和状态等。
• expect 语句的返回值是一个断言对象，与 Jest 等测试框架结合使用时，常常需要使用其返回值进行断言判断。

2.3 assert 语句

Cypress 中的 assert 语句用于验证某个变量或表达式是否符合预期。与 should 和 expect 语句不同，assert 语句不会返回 Promise 或断言对象，它会直接抛出异常并停止测试用例的执行。以下是一个简单的示例：

cy.get('input').then(($el) => {
  const value = $el.val();
  assert(value === 'example', 'Input value is not equal to "example"');
});

上述代码中，我们使用了 assert 语句，来验证一个输入框的值是否等于 'example'。

使用 assert 语句时，注意以下几点：

• assert 语句可以搭配 cy.get 或 $ 等选择器使用，用于选中要验证的元素。
• assert 语句可以接受一个或多个参数，第一个参数为待验证的变量或表达式，后面的参数为异常信息。
• assert 语句的返回值是 undefined，它会直接抛出异常并停止测试用例的执行。

3. 断言使用技巧

Cypress 的断言操作非常灵活，可以根据具体的需求进行组合使用。以下是一些常用的断言使用技巧。

3.1 显式等待操作

在测试用例执行过程中，可能会出现页面加载缓慢、异步操作等问题，导致元素的获取和操作失败。为了解决这个问题，我们可以使用 Cypress 的显式等待操作，等待元素和状态符合预期后再进行操作。以下是一个简单的示例：

cy.get('.loading').should('not.exist');
cy.get('.table').should('have.length', 10);
cy.get('button').click();
cy.get('.modal').should('be.visible').within(() => {
  cy.get('.confirm').click();
});

上述代码中，我们使用了 .should('not.exist')、.should('have.length', 10) 和 .should('be.visible') 等语句，来显式等待页面元素的出现、消失和状态变化。在 .within 语句中，我们又在弹窗中使用了 .get('.confirm').click() 语句，点击确认按钮。

使用显式等待操作时，注意以下几点：

• 显式等待操作需要配合 should 语句使用，来验证元素和状态是否符合预期。
• 显式等待操作可以在 get 和 find 等选择器中使用，也可以单独使用。
• 显式等待操作的超时时间可以在 cypress.json 或测试用例中进行配置。

3.2 重试操作

在某些情况下，元素的获取和操作可能会失败，但稍后重试可能会成功。为了解决这个问题，Cypress 提供了 retry 函数，可用于在失败后自动重试操作，直到成功或超时。以下是一个简单的示例：

cy.get('button').click().retry();
cy.get('.loading').should('not.exist', { timeout: 10000 }).retry(5);
cy.get('.table').should(($table) => {
  expect($table).to.have.length(10);
}).retry(3);

上述代码中，我们分别在点击按钮、验证加载条和验证表格长度时使用了 retry 函数进行重试操作。其中，第二个例子设置了 5 次重试和 10 秒超时时间，第三个例子设置了 3 次重试。

使用重试操作时，注意以下几点：

• 重试操作需要配合 should 和 expect 语句使用，来验证元素和状态是否符合预期。
• 重试操作可以在 .click()、should()、expect() 和自定义函数等场景中使用。
• 重试操作的超时时间可以在 cypress.json 或测试用例中进行配置，可以有不同的时限。

4. 总结

本文介绍了 Cypress 的常见断言操作及使用技巧，希望读者能够通过学习掌握前端自动化测试技能，并在实际应用中灵活运用。在实践过程中，还需要不断地积累经验、查阅文档和调试错误，才能将前端自动化测试做得更加完善。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65215d3595b1f8cacd8de162