簡単な紹介
振る舞い駆動開発 (BDD)
振る舞い駆動開発 (BDD) とは、テスト駆動開発 (TDD) から進化したソフトウェア開発手法です。TDDでは、自動テストケースが失敗した場合にのみ新しいコードを記述しますが、BDDでは、アプリケーションの動作に関する共通の理解を、技術チームと非技術チームの両方で具体例を用いて明確化することを重視します。テストは、よりユーザー中心で、システムの動作に基づいています。BDDでは、「Given-When-Then」がテストケース記述の推奨アプローチです。
Cucumber.jsとNightwatch
Cucumberは、人間が理解できる構文を用いたBDDをサポートするオープンソースフレームワークであり、Gherkinをパーサーとして使用します。Cucumberは、JSを含む多くの主要なプログラミング言語で実装されています。Nightwatchは、2.0アルファリリースで、新しい統合テストランナー (Cucumber.js用) を導入しました。この新しいアップデートでは、Cucumberライブラリ自身を除いて、他のプラグインは必要ありません。この記事では、Cucumber.jsとNightwatchを使用して、博物館のページの検索結果を確認するBDDテストを作成して実行します。
はじめに
- Nightwatch、Cucumber、およびテスト対象のブラウザのドライバをインストールします。**ブラウザドライバのバージョンがローカルのブラウザバージョンと同じであることを確認してください。**
npm i @cucumber/cucumber nightwatch chromedriver --save-dev2. `nightwatch.conf`ファイルで、テストランナーとしてCucumberを設定します。
{
test_runner: {
type: 'cucumber',
options: {
feature_path: '*/*.feature',
...
}
src_folders: ['features/step_definitions'],
...
}NightwatchでのCucumberの設定について詳しくはここを参照してください。
BDDテストの記述
Cucumberは、Gherkin構文を使用して、人間が理解しやすいテストを作成します。Gherkinは、実行可能な仕様に構造と意味を与える特殊なキーワードのセットを使用します。`features/rijksmuseum.feature`を作成し、Rijksmuseumウェブサイト内を検索するテストを記述しましょう。
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"各シナリオの前に実行されるBackgroundを記述します。この例では、博物館のウェブサイトを開き、ポップアップを閉じ、ページのタイトルを確認します。
シナリオ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"ここでは、タグ`search`と`nightwatch`の2つのタグを使用して、タグに基づいてテストを実行できるようにします。このシナリオでは、博物館の検索ページで「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 Expressionsを提供します。
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には、同じメソッドを持つ拡張可能なassert/verifyライブラリが組み込まれており、要素のアサーションを実行します。
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テストを実行しましょう。
npx nightwatch`--parallel 2`フラグを使用して、テストにさらに並列処理を追加できます。または、Cucumberのタグフラグ`--tags @search`を使用して、特定のテストを実行できます。Nightwatchのサンプルリポジトリと開発者ガイドで設定を確認できます。
結論
2.0リリースの新しい統合テストランナーのおかげで、BDDテストの基本と、CucumberとNightwatchを使用して最初のテストを作成する方法について説明しました。パッケージを更新して、Cucumberを使い始めましょう。
