簡短介紹
行為驅動開發 (BDD)
行為驅動開發是一種軟體開發技術，從 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 來驗證博物館頁面的搜尋結果。
開始使用
- 安裝 Nightwatch、Cucumber 和您要測試的瀏覽器的驅動程式。請確保瀏覽器驅動程式版本與您的本機瀏覽器相同。
npm i @cucumber/cucumber nightwatch chromedriver --save-dev2. 在 nightwatch.conf 檔案中將 Cucumber 設定為 test_runner。
{
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，以便我們根據標籤執行測試。此情境會在博物館搜尋頁面搜尋「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 有一個內建的可擴展的 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 範例儲存庫和開發人員指南中查看設定。
結論
我們已涵蓋 BDD 測試的基礎知識，以及如何使用 Cucumber 和 Nightwatch 撰寫第一個測試，這要歸功於 2.0 版本中的新整合測試執行器。因此，請立即更新您的套件並開始使用 Cucumber。
