引言
Cypress 是一个流行的前端测试框架，它提供了丰富的 API 和工具，用于编写可靠的端到端测试。然而，编写端到端测试时，一个重要的部分就是对测试结果进行断言。
本文将介绍 Cypress 中的断言技巧和最佳实践，以帮助您写出更加可靠、易于维护的测试用例。
Cypress 中的断言
Cypress 已经提供了许多常见的断言函数，例如 assert、expect、should 等。这些断言函数可用于比较值、检查元素状态等。
assert
assert 函数是 Cypress 内置的断言函数之一，它可以用于检查一个条件是否为真。assert 函数的基本语法如下：
assert(condition, message);
其中，condition 是一个表达式，如果它的值为 false，则 assert 函数会抛出一个异常，导致测试用例失败。message 是一个可选参数，用于描述断言的具体内容。
下面是一个使用 assert 函数进行断言的例子：
it('should check the title', () => {
cy.visit('https://www.example.com');
cy.title().then((title) => {
assert.equal(title, 'Example Domain');
});
});在上面的例子中，我们使用 cy.title() 获取当前页面的标题，然后使用 assert.equal 函数来比较标题的值是否等于 'Example Domain'。如果不相等，则会抛出一个异常，导致测试用例失败。
expect
expect 函数是另一个常用的断言函数，它可以用于检查一个值是否符合预期。expect 函数的基本语法如下：
expect(value).matcher(expected);
其中，value 是要进行断言的值，matcher 是一个函数，用于比较 value 和 expected 之间的关系。
下面是一个使用 expect 函数进行断言的例子：
it('should check the button text', () => {
cy.visit('https://www.example.com');
cy.get('button[type="submit"]').should('have.text', 'Submit');
});在上面的例子中，我们使用 cy.get() 获取页面中的 button 元素，然后使用 should('have.text', ...) 函数链来检查按钮的文本是否为 'Submit'。如果不是，则会导致测试用例失败。
should
should 函数是另一个常用的断言函数，它可以用于检查一个元素的状态是否符合预期。should 函数的基本语法如下：
cy.get(selector).should('matcher', expected);其中，selector 是要进行断言的元素选择器，matcher 是一个函数，用于比较元素的状态和 expected 之间的关系。
下面是一个使用 should 函数进行断言的例子：
it('should check the disabled input', () => {
cy.visit('https://www.example.com');
cy.get('input[type="text"]').should('be.disabled');
});在上面的例子中，我们使用 cy.get() 获取页面中的 input 元素，然后使用 should('be.disabled') 函数链来检查元素是否被禁用。如果没有被禁用，则会导致测试用例失败。
断言技巧
除了基本的断言函数之外，我们还可以使用一些技巧来编写更加可靠、易于维护的测试用例。
重复断言
在写测试用例时，经常需要对同一个元素进行多次断言。例如，我们可能需要检查一个按钮是否存在、是否显示、是否可点击等等。
为了避免重复代码，我们可以使用重复断言技巧。具体来说，我们可以使用 cy.wrap() 包装元素，然后将多个 should 函数链一起使用。这样，我们就可以在一个函数中进行多个断言，从而避免重复代码。
下面是一个使用重复断言技巧进行多个断言的例子：
-- -------------------- ---- -------
---------- ----- --- -------- -- -- -
------------------------------------
------------------------------------------------ -- -
-------------------------
------------------------------
------------------------------
---------------------------------------
---
---在上面的例子中，我们使用一个函数来包装 button 元素，然后使用多个 expect 函数在同一个函数中进行断言。
定义自定义断言
在某些情况下，Cypress 内置的断言函数无法满足我们的需求。例如，我们可能需要检查一个元素的样式属性是否符合预期。为了满足这种需求，我们可以定义自定义断言函数。
具体来说，我们可以使用 Cypress 的 add() 函数来添加自定义的断言函数。add() 函数接受两个参数：断言函数的名称和实现函数。
下面是一个使用自定义断言函数的例子：
Cypress.Commands.add('have.css', { prevSubject: true }, (subject, property, value) => {
expect(subject).to.have.css(property, value);
});
it('should check the button styles', () => {
cy.visit('https://www.example.com');
cy.get('button[type="submit"]').should('have.css', 'background-color', 'red');
});在上面的例子中，我们使用 add() 函数添加了一个名为 'have.css' 的自定义断言函数。该函数用于检查元素的 CSS 样式属性是否符合预期。
处理异步断言
在某些情况下，我们可能需要对异步值进行断言。例如，我们可能需要检查异步操作的结果或者检查某个异步函数是否被调用。在这种情况下，我们需要处理异步断言。
具体来说，我们可以使用 Cypress 的 then() 函数来处理异步断言。使用 then() 函数可以捕获异步值，并在后续的断言中使用。
下面是一个使用 then() 函数处理异步断言的例子：
it('should check the search result', () => {
cy.visit('https://www.example.com');
cy.get('input[type="text"]').type('cypress');
cy.get('button[type="submit"]').click();
cy.get('.search-result').should('have.length', 10).then(($result) => {
expect($result.get(0)).to.have.text('Cypress');
});
});在上面的例子中，我们首先在输入框中输入 'cypress'，然后点击搜索按钮。接着，我们使用 should('have.length', 10) 来检查搜索结果是否有 10 个元素。最后，我们使用 then() 函数来捕获第一个搜索结果，并检查其文本是否为 'Cypress'。
结论
本文介绍了 Cypress 中的断言技巧和最佳实践。在编写测试用例时，我们应该灵活运用各种断言函数和技巧，以编写可靠、易于维护的测试用例。同时，我们也应该遵循最佳实践，例如重复断言、定义自定义断言和处理异步断言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6774cee76d66e0f9aaf0a07f