一起使用 AskUI 和 Cucumber

透過以 Gherkin 等結構化格式定義系統的行為，行為驅動開發 (BDD) 使團隊能夠彌合利害關係人、測試人員和開發人員之間的差距，避免誤解並減少返工。作為一種協作方法，BDD 鼓勵各方從一開始就共同努力，確保每個人都參與
同一頁面並且準確地捕捉了需求。

在此過程中，Cucumber 是一種用於實現 BDD 的流行工具，使團隊能夠編寫清晰、可執行的測試，以確保系統按預期運作。

在這篇文章中，我們將向您展示如何將 Cucumber 與 AskUI 結合設置，以使用 BDD 原則定義 AskUI 工作流程。

先決條件

• 在您的系統（Windows、Linux、macOS）上安裝並設定了 AskUI

• 初始化後刪除asgui_example/my-first-askui-test-suite.test.ts

準備設定

Cucumber 與 AskUI 的預設設定（版本 0.20.3）還無法很好地配合。為了讓 AskUI 與 Cucumber 良好配合，您需要做兩個小準備，因為 AskUI 使用 Jest 作為其運行器。

1.更改Jest的testEnvironmentOptions

在檔案asgui_example/helpers/jest.config.ts中，您必須停用執行報表中包含的程式碼。您可以透過新增 testEnvironmentOptions 屬性並將 addCodeInReport 屬性設為 false 來實現此目的。

const config: Config.InitialOptions = {
  ...
  testEnvironment: '@askui/jest-allure-circus',
  testEnvironmentOptions: {
    addCodeInReport: false
  },
};
...

2. 告訴 Jest 在哪裡可以找到步驟定義的實現

另外，在asgui_example/helpers/jest.config.ts中，您需要擴充預設的testMatch屬性。它必須包含以 step.ts 結尾的文件，因為我們將在那裡儲存實作。

...
const config: Config.InitialOptions = {
  ...
  testEnvironment: '@askui/jest-allure-circus',
  testEnvironmentOptions: {
    addCodeInReport: false
  },
  testMatch: [ "**/__tests__/**/*.[jt]s?(x)", "**/?(*.) (spec|test|step).[jt]s?(x)" ]
};
...

s?(x)", "**/?(*.) (spec|test|step).[jt]s?(x)" ] }; ……

安裝 jest-cucumber

將 Jest 與 Cucumber 一起使用的最簡單方法是 npm-package jest-cucumber。讓我們使用以下命令安裝它：

npm install --save-dev jest-cucumber

npm install --save-dev jest-cucumber

建立基本特徵文件

建立一個資料夾 features，並在其中建立一個 Feature
檔案 NavigateToWebsite.feature

npm install --save-dev jest-cucumber

project_root/ ├─asgui_example/ ├─ 特徵/ ├─ NavigateToWebsite.feature ├─ 節點模組/ ├─ ...

將以下基本功能
寫入此文件：

npm install --save-dev jest-cucumber

功能：導覽至網站 場景：在瀏覽器網址列中輸入正確的URL 鑑於我在 Google 搜尋頁面上 當我輸入 AskUI 練習頁面的 URL 時 然後我就會登陸網頁

建立步驟定義實施

建立步驟定義檔asgui_example/navigate-to-url.step.ts，其中每個測試映射到特定場景。

npm install --save-dev jest-cucumber

從'jest-cucumber'導入{defineFeature，loadFeature}； 從 './helpers/askui-helper' 導入 { aui } ； // 載入特徵文件 const feature = loadFeature('features/NavigateToWebsite.feature'); 定義功能（功能，測試=> { // 對應到功能檔案中的“場景” test('在瀏覽器網址列輸入正確的 URL', ({給定, 當, 然後 }) => { Give('我在 Google 搜尋頁面', async () => { 等待 aui.moveMouse(500, 500).exec(); 等待 aui.mouseLeftClick().exec(); 等 aui.pressTwoKeys('command', 't').exec(); }); when('我輸入 AskUI 練習頁面的 URL', async () => { 等 aui.typeIn('https://askui.github.io/askui-practice-page/').textfield().exec(); 等 aui.pressKey('enter').exec(); }); then('我將登陸網頁', async () => { wait aui.expect().text('歡迎來到AskUI練習頁').exists().exec(); }); }); });

運行工作流程

全螢幕開啟瀏覽器並啟動工作流程：

npm install --save-dev jest-cucumber

npm run asgui

您應該看到工作流程運行將開啟一個新分頁並導航到 AskUI 的練習頁面。

結論

將 AskUI 與 Cucumber 結合可讓您以 BDD 風格編寫 AskUI 工作流程。像真正的人類用戶一樣執行測試將使測試對於每個利害關係人來說更加現實。