如何使用 Cypress 和 Cucumber 来完成 BDD 自动化测试-JavaScript中文网-JavaScript教程资源分享门户

BDD（行为驱动开发）是一种测试方法，旨在使开发人员、测试人员和业务领域专家更紧密地协作，以确保他们在开发过程中都有相同的理解。 Cypress 是一个现代化的自动化测试框架，与 BDD 一起使用可以有效地推动测试的质量和可靠性。 Cucumber 是一个基于 BDD 的测试框架，它允许开发人员、测试人员和业务人员按照自己的角色编写可读性高的测试。

在本文中，我们将介绍如何使用 Cypress 和 Cucumber 来创建 BDD 自动化测试，以及如何编写并运行测试用例。

安装和配置

在开始使用 Cypress 和 Cucumber 进行 BDD 自动化测试之前，我们需要先安装它们。首先，我们需要安装和配置 Cypress：

npm install cypress --save-dev

接下来，我们需要安装和配置 Cucumber：

npm install cypress-cucumber-preprocessor --save-dev

在安装完成之后，请确保将 Cypress 和 Cucumber 配置到项目中。在 Cypress 的 cypress.json 文件中添加以下内容：

{
  "testFiles": "**/*.feature"
}

在 package.json 文件中添加以下内容：

"cypress-cucumber-preprocessor": {
  "nonGlobalStepDefinitions": true
}

如果您在运行时遇到了任何问题，请参阅完整安装文档。

编写测试用例

在创建 Cypress 和 Cucumber 框架后，我们可以编写测试用例了。我们首先需要编写特性文件，然后编写步骤定义文件。特性文件描述了可执行程序的行为，而步骤定义文件描述了如何与这些行为进行交互。

特性文件和步骤定义文件可以相互独立编写，因此开发人员和测试人员可以各自专注于他们的领域，并尽可能地将测试代码与应用代码隔离开来。特性文件以 .feature 扩展名结尾，而步骤定义文件以 .js 或 .ts 扩展名结尾。

编写特性文件

一个特性文件通常由多个场景组成，每个场景都描述了一种特定的行为。以下是一个简单的特性文件示例：

// javascriptcn.com code example
Feature: Login feature

  Scenario: User can login with valid credentials
    Given the user is on the login page
    When they enter valid username and password
    Then they are redirected to the dashboard

  Scenario: User cannot login with invalid credentials
    Given the user is on the login page
    When they enter invalid username or password
    Then they see an error message

Feature: Login feature 描述了这个特性是有关登录的。Scenario: User can login with valid credentials 描述了在用户使用有效凭据登录的情况下预期的行为。Given, When 和 Then 每个关键字描述了测试中的一个步骤。

编写步骤定义文件

步骤定义文件包含编写 BDD 测试案例的关键方法。以下示例中，我们编写了三个方法，分别对应于特性文件中的三个关键字：Given、When 和 Then。

// javascriptcn.com code example
import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'

Given('the user is on the login page', () => {
  cy.visit('/login')
})

When('they enter valid username and password', () => {
  cy.get('#username').type('testuser')
  cy.get('#password').type('password123')
  cy.get('#login-button').click()
})

Then('they are redirected to the dashboard', () => {
  cy.url().should('include', '/dashboard')
})

When('they enter invalid username or password', () => {
  cy.get('#username').type('invaliduser')
  cy.get('#password').type('invalidpassword')
  cy.get('#login-button').click()
})

Then('they see an error message', () => {
  cy.get('#error-message').should('be.visible')
})

Given('the user is on the login page') 创建了一个 Given 步骤，用于导航到登录页面。When('they enter valid username and password') 创建了一个 When 步骤，用于输入有效凭证并单击登录按钮。Then('they are redirected to the dashboard') 创建了一个 Then 步骤，用于验证用户是否已成功登录并被重定向到仪表板。其他测试用例遵循同样的模式。

运行测试用例

在编写了特性文件和步骤定义文件之后，我们可以使用以下命令来运行 Cypress 和 Cucumber 测试：

npx cypress run --spec "cypress/integration/*.feature"

这会启动测试运行器，并运行所有以 .feature 结尾的文件。

此外，您还可以使用交互式浏览器运行测试：

npx cypress open

这将打开 Cypress 测试运行器，并为您提供所有可用测试用例。

结论

使用 Cypress 和 Cucumber 进行 BDD 自动化测试，可以更紧密地协作，并减少开发和测试的时间和资源。通过编写可读性高的特性文件和步骤定义文件，我们可以确保测试案例的准确性和可靠性。在未来的开发项目中，我们建议尝试使用 Cypress 和 Cucumber，以提高测试质量和可靠性。

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