掌握高级 BDD 自动化：WebdriverIO、JavaScript 与 Cucumber

Source: Dev.to

请提供您希望翻译的正文内容，我将为您翻译成简体中文并保留原有的格式、代码块和链接。

在当今快速发展的环境中，开发人员、测试人员和利益相关者之间的有效沟通是当务之急。

JavaScript 中的 Cucumber BDD 架起了技术与非技术团队成员之间的桥梁，提供了强大的解决方案。使用自然、易读的语言编写测试，帮助每个人从业务角度理解应用的行为。

在本博客中，我们将介绍：

• 在 JavaScript 中实现 Cucumber BDD
• 从零开始搭建环境
• 创建特性文件并执行
• 将 BDD 融入您的 JavaScript 测试自动化工作流

准备好了解 JavaScript 中的 Cucumber BDD 如何提升协作、增加测试覆盖率，并使您的测试过程更高效！

---

行为驱动开发（BDD）与 JavaScript 的 Cucumber

欲了解 BDD、Cucumber 基础以及环境搭建的概览，请参阅我们的博客 “Cucumber BDD in JavaScript.”

JavaScript 如何与 Cucumber 集成？

JavaScript 可以用来编写 Cucumber 测试，让 JavaScript 开发者能够使用 BDD 的功能。Cucumber‑JS 是 Cucumber 的 JavaScript 实现，允许你编写、运行和管理 BDD 测试。

将 JavaScript 与 Cucumber 集成的基本步骤

1. 使用 Gherkin 编写特性 – 特性文件使用 Gherkin 语法编写。系统的行为以纯英文（或其他自然语言）描述。
2. 步骤定义 – 在编写完特性后，JavaScript 步骤定义将 Gherkin 步骤映射到实际的 JavaScript 代码。
   示例: 对于步骤 Given I am on the homepage，相应的 JavaScript 实现导航到主页的操作。
3. 运行测试 – Cucumber‑JS 执行特性文件中的场景，并将每个步骤与其 JavaScript 定义匹配。
4. 断言 – 步骤定义使用 JavaScript 断言（例如 Chai 或 Jest）验证预期行为。

示例：Cucumber 与 JavaScript 的集成

功能文件 (login.feature)

Feature: User Login

  Scenario: Successful login with valid credentials
    Given I am on the login page
    When I enter a valid username and password
    And I click the login button
    Then I should be redirected to the dashboard
    And I should see a welcome message

步骤定义 (loginSteps.js)

const { Given, When, Then } = require('@cucumber/cucumber');
const { expect } = require('chai');
const LoginPage = require('../pages/LoginPage');

Given('I am on the login page', async () => {
  await LoginPage.open();
});

When('I enter a valid username and password', async () => {
  await LoginPage.login('validUser', 'validPass');
});

When('I click the login button', async () => {
  await LoginPage.submit();
});

Then('I should be redirected to the dashboard', async () => {
  const url = await browser.getUrl();
  expect(url).to.include('/dashboard');
});

Then('I should see a welcome message', async () => {
  const message = await LoginPage.getWelcomeMessage();
  expect(message).to.equal('Welcome, validUser!');
});

在本示例中

• Gherkin 以人类可读的格式定义行为。
• JavaScript 在 loginSteps.js 中提供实际的测试步骤，将每个 Gherkin 步骤映射到与应用交互的函数。
• Chai 断言验证测试是否按预期运行。

为什么在 JavaScript 中使用 Cucumber？

编写你的第一个 Cucumber 功能文件

Cucumber 使用纯文本语言（Gherkin）编写测试，技术和非技术的利益相关者都能阅读和理解。.feature 文件包含使用特定语法编写的测试场景。

创建 .feature 文件

功能文件是一个扩展名为 .feature 的普通文本文件。它包含：

• Feature – 对功能的简短描述。
• Scenario – 对功能应如何表现的具体示例。
• Steps – Given、When、Then、And 和 But 语句，用于描述前置条件、操作和预期结果。

示例：

Feature: Search functionality

  Scenario: Users can search for products
    Given the user is on the homepage
    When the user enters "laptop" into the search bar
    And the user clicks the search button
    Then the search results page should display items related to "laptop"

将其保存为 search.feature，放在项目的 features/ 目录下，使用 JavaScript 编写相应的步骤定义（step definitions），并通过 Cucumber‑JS 运行测试。

TL;DR

• Cucumber‑JS 让你可以用 JavaScript 编写 BDD 测试。
• 用 Gherkin 编写 功能文件，在 JavaScript 中映射为 步骤定义，使用 Cucumber‑JS 运行，并使用 Chai/Jest 进行断言。
• 这种方式提升协作效率，生成活文档，并能顺畅地与流行的 Web 与移动测试框架集成。

祝测试愉快！ 🚀

功能层级描述

所有展示功能应如何表现的场景都应放在 .feature 文件中。

如何构建 .feature 文件

简单特性文件示例

此特性文件使用 Gherkin 语法编写，描述用户使用有效凭证登录网站的行为。

包含 Given、When、Then 步骤的场景

您也可以使用 And 和 But 在单个步骤中组合多个条件：

在此示例中，And 为 “When” 和 “Then” 部分添加了更多步骤。

理解特性文件结构

一个典型的特性文件由以下几个关键组件组成：

• Feature（特性）: 你正在测试的特性的名称，后面可选地跟随简短描述。
  示例: Feature: User Login – 对该特性包含内容的简要说明。
• Scenario（场景）: 每个场景代表一个具体的测试用例或使用场景（BDD 中的“测试”部分）。
  提供特性应如何工作的具体示例。
• Steps（步骤）: 使用关键字 Given、When、Then、And 和 But 定义。
  解释正在发生或应该发生的行为。

包含多个场景的扩展示例

将 Cucumber 与 JavaScript 结合

使用 Gherkin，您可以以几乎可读的格式编写自动化验收测试。将这些测试与 JavaScript 步骤定义配合使用，即可在 JavaScript 环境中执行它们。

在接下来的章节中，您将学习如何：

1. 为 JavaScript 设置 Cucumber – 安装依赖并初始化项目。
2. 创建步骤定义 – 将 Gherkin 步骤映射到 JavaScript 函数。
3. 处理异步操作 – 使用 async/await 处理 Promise、API 调用等。

阅读完整博客

Connecting Cucumber with JavaScript – Full Guide