一起使用 AskUI 和 Cucumber
透過以 Gherkin 等結構化格式定義系統的行為，行為驅動開發 (BDD) 使團隊能夠彌合利害關係人、測試人員和開發人員之間的差距，避免誤解並減少返工。作為一種協作方法，BDD 鼓勵各方從一開始就共同努力，確保每個人都在
同一頁面並且準確地捕捉了需求。
在此過程中，Cucumber 是一種用於實現 BDD 的流行工具，使團隊能夠編寫清晰、可執行的測試，以確保系統按預期運行。
在這篇部落格文章中，我們將向您展示如何將 Cucumber 與 AskUI 結合使用，以使用 BDD 原則定義 AskUI 工作流程。
先決條件
準備設定
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)" ]
};
...
登入後複製
安裝 jest-cucumber
將 Jest 與 Cucumber 一起使用的最簡單方法是 npm-package jest-cucumber。讓我們使用以下命令安裝它：
npm install --save-dev jest-cucumber
登入後複製
建立基本特徵文件
建立一個資料夾 features，並在其中建立一個 Feature 檔案 NavigateToWebsite.feature
project_root/
├─ askui_example/
├─ features/
├─ NavigateToWebsite.feature
├─ node_modules/
├─ ...
登入後複製
將以下基本功能寫入此檔案：
Feature: Navigate to a website
Scenario: Entering the correct URL into the browser address bar
Given I am on the Google search page
When I type in the URL for AskUI practice page
Then I will land on the webpage
登入後複製
建立步驟定義實施
建立步驟定義檔asgui_example/navigate-to-url.step.ts，其中每個測試映射到特定場景。
import { defineFeature, loadFeature } from 'jest-cucumber';
import { aui } from './helpers/askui-helper';
// Load the feature file
const feature = loadFeature('features/NavigateToWebsite.feature');
defineFeature(feature, test => {
// Maps to 'Scenario' in your feature file
test('Entering the correct URL into the browser address bar', ({ given, when, then }) => {
given('I am on the Google search page', async () => {
await aui.moveMouse(500, 500).exec();
await aui.mouseLeftClick().exec();
await aui.pressTwoKeys('command', 't').exec();
});
when('I type in the URL for AskUI practice page', async () => {
await aui.typeIn('https://askui.github.io/askui-practice-page/').textfield().exec();
await aui.pressKey('enter').exec();
});
then('I will land on the webpage', async () => {
await aui.expect().text('Welcome to the AskUI Practice Page').exists().exec();
});
});
});
登入後複製
運行工作流程
全螢幕開啟瀏覽器並啟動工作流程：
您應該看到工作流程運行將開啟一個新分頁並導航到 AskUI 的練習頁面。
結論
將 AskUI 與 Cucumber 結合，讓您能夠以 BDD 風格編寫 AskUI 工作流程。像真正的人類用戶一樣執行測試將使測試對於每個利害關係人來說更加現實。
以上是一起使用 AskUI 和 Cucumber的詳細內容。更多資訊請關注PHP中文網其他相關文章！
