TLDR; Nightwatch 现在有一个用于 Cucumber.js 的 新的集成测试运行器。查看示例 代码

简要介绍

行为驱动开发 (BDD)

行为驱动开发是一种软件开发技术,它源于 TDD(测试驱动开发),TDD 是一种方法或编程实践,开发人员仅在自动化测试用例失败时才编写新代码。BDD 鼓励团队使用具体示例来正式化对应用程序应如何在各个技术和非技术团队之间表现的共同理解。测试更侧重于用户,并基于系统的行为。在 BDD 中,“Given-When-Then” 是编写测试用例的建议方法。

Cucumber.js 和 Nightwatch

Cucumber 是一种开源框架,支持使用人类语言语法进行 BDD,并使用 Gherkin 作为解析器。Cucumber 在大多数 主流编程语言 中都有实现,包括 JS。Nightwatch 最近在 2.0 alpha 版本中为 Cucumber.js 引入了 新的集成测试运行器。除了 Cucumber 库 本身之外,无需其他插件。在本篇文章中,我们将编写并运行一些 BDD 测试,使用 Cucumber.js 和 Nightwatch 验证博物馆页面搜索结果。

💡
您可以阅读更多关于 Cucumber 和 BDD 的信息。

入门

  1. 安装 Nightwatch、Cucumber 和要测试的浏览器的驱动程序。确保浏览器驱动程序版本与本地浏览器版本相同。
npm i @cucumber/cucumber nightwatch chromedriver --save-dev

2. 在 nightwatch.conf 文件中将 Cucumber 设置为 test_runner。

{
  test_runner: {
    type: 'cucumber',
    options: {
      feature_path: '*/*.feature',
      ...
    }
  src_folders: ['features/step_definitions'],
  ...
}
nightwatch.conf

您可以阅读更多关于 使用 Nightwatch 配置 Cucumber 的信息。

编写 BDD 测试

Cucumber 使用 Gherkin 语法来创建人类可读的测试。Gherkin 使用一组特殊关键字来为可执行规范赋予结构和意义。让我们创建一个 features/rijksmuseum.feature 文件,并编写一些在 国立博物馆 网站上进行搜索的测试。

Feature: Rijksmuseum Search
Background: Goto website
  Given I open the Rijksmuseum page
  And I dismiss the cookie dialog
  Then the title is "Rijksmuseum Amsterdam, home of the Dutch masters"

我们将编写一些在每个场景之前执行的 背景。在本例中,我们将打开博物馆网站,关闭弹出窗口,并验证页面的标题。

场景 1

@search @nightwatch
Scenario: Searching for Night watch
  Given I search "night watch"
  Then Body contains "Operation Night Watch"
  Then Body contains "The Night Watch, Rembrandt van Rijn, 1642"

这里有两个标签,分别是 searchnightwatch,以便我们可以根据标签运行测试。此场景在博物馆搜索页面上搜索“night watch”,并验证搜索结果包含“Operation Night Watch”。

场景 2

@search @cucumber
Scenario: Searching for cucumber
  Given I search "cucumber"
  Then Body contains "Muskusroos (Rosa moschata) en komkommer (Cucumis sativus)"

这些场景非常清晰,并使用简单的语言。下一步是定义这些步骤对自动化测试的意义。

在幕后使用 Nightwatch

features/step_definitions/rijksmuseum.js 文件中,让我们编写步骤的定义。让我们从打开博物馆页面开始。

const {Given, Then, When} = require('@cucumber/cucumber')

Given('I open the Rijksmuseum page', function() {
  return browser.navigateTo('https://www.rijksmuseum.nl/en')
});

正如您所注意到的,我们在定义文件中可以访问 Nightwatch 的 browser 对象。此访问权限是由于新的 2.0 更新而启用的。我们还在配置中设置了 src_folders: ['features/step_definitions']。Cucumber 提供了一种编写 Cucumber 表达式 的方法,它是一种更直观的语法,可以替代正则表达式。

When('I search {string}', function(searchTerm) {
  browser.click('a[aria-label="Search"]')

  return browser.waitForElementVisible('#rijksmuseum-app')
    .setValue('input.search-bar-input[type=text]', [searchTerm, browser.Keys.ENTER])
})

Nightwatch 有一个内置的 可扩展的断言/验证库,它使用相同的方法,对元素进行断言。

Then('the title is {string}', function(title) {
  return browser.assert.titleEquals(title)
})

运行测试

Nightwatch 会根据已安装的驱动程序自动检测和配置测试运行器。由于我们手动添加了配置,让我们在 nightwatch.conf 文件中设置默认的 test_setting。您可以阅读更多关于默认配置的信息。以下代码片段显示了在 Chrome 中运行测试的简单设置。有关默认设置的更多信息,您可以阅读 测试环境文档配置文档

  test_settings: {
    default: {
      desiredCapabilities: { browserName: 'chrome' },
      webdriver: { start_process: true },
    },
  },
nightwatch.conf

让我们运行 Nightwatch 测试。

npx nightwatch

您可以使用 --parallel 2 标志在测试中添加更多并行性。或者,您可以使用 cucumber 标签标志 --tags @search 来运行特定测试。您可以从 Nightwatch 示例仓库开发者指南 中查看配置。

结论

我们已经介绍了 BDD 测试的基本知识,以及如何在 2.0 版本中使用 Cucumber 和 Nightwatch(由于新的集成测试运行器)编写您的第一个测试。现在就更新您的包,并开始使用 Cucumber。


我们热爱开源 - BrowserStack
BrowserStack 为开源项目提供免费的 Web 和移动测试。在我们的真实设备云上测试您的 Web 和移动应用。请提供项目详细信息以申请资格。