Cypress 测试中的断言技巧和经验-JavaScript中文网-JavaScript教程资源分享门户

Cypress 是一个非常流行的前端端到端测试框架，它的 API 提供了许多方便实用的方法和断言，简化了测试写作的过程，同时也让我们更容易管理测试用例。本文将着重介绍 Cypress 中的断言技巧和经验，旨在帮助读者更好地掌握 Cypress 的强大功能，并提高测试效率。

什么是断言？

在编写测试用例时，我们需要定义预期结果和实际结果之间的差异，从而判断测试结果的正确性。这个过程就是断言。Cypress 提供了一个强大的断言库，让我们可以轻松地编写各种类型的断言，包括文本、元素、URL 等。

常用的断言方法

Cypress 的断言方法通常具有名称相同的多个变体，以便我们在不同的场景下做出不同的断言。以下是一些常用的断言方法：

.should('be.visible')：检查元素是否可见。
.should('exist')：检查元素是否存在于 DOM 中。
.should('have.attr', 'attributeName', 'attributeValue')：检查元素是否具有特定的属性和属性值。
.should('have.class', 'className')：检查元素是否包含特定的类名。
.should('have.css', 'property', 'value')：检查元素的 CSS 样式是否与特定值匹配。
.should('have.text', 'textValue')：检查元素的文本内容是否与特定值匹配。
.should('have.value', 'value')：检查元素的值是否与特定值匹配。

断言的链式调用

为了使我们的测试用例更整洁，Cypress 具有链式调用断言方法的能力。通过对多个断言方法进行链接，我们可以在同一个测试用例中测试多个预期结果，而不必编写多个测试用例。以下是链式调用断言方法的示例：

cy.get('#username')
  .should('be.visible')
  .should('exist')
  .should('have.attr', 'required')
  .should('have.class', 'login-input')

在这个示例中，我们选择了登录表单中的用户名输入框，对其进行了多个断言。首先，我们检查输入框是否可见，并存在于 DOM 中。然后，我们检查是否具有“required”属性，并包含“login-input”类名。如果所有这些断言都通过，则测试用例将被视为成功。

避免使用硬编码

硬编码指的是在代码中直接使用具体的值或字符串而不是变量或常量。在测试代码中使用硬编码会使代码的可维护性降低，并可能导致错误的预期结果。因此，我们应该尽量避免使用硬编码，而是使用变量或常量来存储需要断言的值或属性。

以下是一个示例，其中硬编码被用于比较文本值：

cy.get('h1')
  .should('have.text', 'Welcome to Cypress')

要避免硬编码，我们可以使用一个变量来存储需要断言的文本值，例如：

const welcomeMsg = 'Welcome to Cypress'
cy.get('h1')
  .should('have.text', welcomeMsg)

这样可以提高代码的可维护性，尤其是当测试用例需要进行更改时。

使用自定义的断言方法

除了 Cypress 提供的断言方法外，我们还可以自定义断言方法来增强测试代码的重用性和可读性。自定义断言方法允许我们定义特定的条件，以便在测试中使用，例如比较两个元素的属性或值。以下是一个自定义断言方法的示例：

Cypress.Commands.add('inputValue', { prevSubject: true }, (subject, expectedValue) => {
  cy.wrap(subject)
    .should('have.value', expectedValue)
})

在这个示例中，我们定义了一个名为 inputValue 的自定义断言方法，该方法使用了 Cypress 的 prevSubject 选项，允许我们将前一个主题作为参数传递给该方法。该方法使用 wrap() 方法将前一个主题包装成 Cypress 对象，并使用 should() 方法断言其属性。然后我们可以在测试中使用这个自定义的断言方法：

cy.get('#username')
  .inputValue('john@mail.com')

该测试用例选择了用户名输入框，并使用我们定义的自定义方法来检查其值是否等于 "john@mail.com"。

使用重试断言

有时，当测试执行过程中出现网络延迟或其他原因时，断言可能会失败并导致测试失败。为了解决这个问题，Cypress 提供了重试断言机制，即在断言失败时重新尝试执行相同的断言。以下是一个使用 should() 方法进行重试断言的示例：

cy.get('#message-box')
  .should(($el) => {
    expect($el.text()).to.include('Hello World')
  })

在这个示例中，should() 方法将尝试多次执行实际断言，直到成功为止。如果文本 "Hello World" 不存在于消息框中，该方法将重新尝试执行。这样可以避免网络延迟或其他意外情况导致测试失败的情况。

编写可读性强的断言

在编写测试用例时，我们应该始终力求使代码易于阅读和理解。要实现这一点，我们可以通过格式化代码和命名主题的方式来使断言更易于理解。以下是一个可读性强的断言示例：

cy.get('.list-item')
  .eq(0)
  .should('have.text', 'Item 1')
  .and('have.class', 'checked')

在这个示例中，我们对待检元素进行了多个断言，并使用 and() 方法将它们链接在一起，以便以更清晰的方式表示实际断言。

结论

在这篇文章中，我们介绍了 Cypress 中的断言技巧和经验。通过使用链式调用、避免使用硬编码、自定义断言方法、重试断言和编写可读性强的断言，我们可以大幅提高测试代码的可读性、可维护性和可重用性。希望读者能够从本文中学到一些有用的知识和技巧，以便更好地掌握 Cypress 的强大功能。

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