一起使用 AskUI 和 Cucumber

一起使用 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)" ]
};
...

安裝 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();
    });

  });
});

運行工作流程

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

npm run askui

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

結論

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

以上是一起使用 AskUI 和 Cucumber的詳細內容。更多資訊請關注PHP中文網其他相關文章！