AskUI と Cucumber を併用する

AskUI と Cucumber を併用する

Gherkin のような構造化された形式でシステムの動作を定義することで、動作駆動開発 (BDD) を使用すると、チームは関係者、テスター、開発者の間のギャップを埋めることができ、誤解を回避し、手戻りを減らすことができます。協力的なアプローチとして、BDD はすべての関係者が最初から協力して作業することを奨励し、全員が確実に作業を進められるようにします
同じページであり、その要件が正確に把握されています。

このプロセスでは、Cucumber は BDD の実装に使用される一般的なツールであり、チームがシステムが期待どおりに動作することを確認する明確な実行可能なテストを作成できます。

このブログ投稿では、AskUI と連携して Cucumber をセットアップし、BDD 原則を使用して AskUI ワークフローを定義する方法を説明します。

前提条件

• AskUI がシステムにインストールされ、構成されています (Windows、Linux、macOS)

• 初期化後にaskui_example/my-first-askui-test-suite.test.tsを削除します

セットアップの準備

Cucumber は、AskUI のデフォルト設定ではまだ適切に動作しません (バージョン 0.20.3)。 AskUI がランナーとして Jest を使用するため、AskUI が Cucumber とうまく連携するには、2 つの小さな準備を行う必要があります。

1. Jest の testEnvironmentOptions を変更する

ファイルaskui_example/helpers/jest.config.tsで、コードが実行レポートに含まれることを無効にする必要があります。これを実現するには、addCodeInReport プロパティを false に設定して testEnvironmentOptions プロパティを追加します。

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

2. ステップ定義の実装を見つける場所を Jest に指示します。

askui_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

ステップ定義実装の作成

各テストが特定のシナリオにマップされるステップ定義ファイル askui_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 中国語 Web サイトの他の関連記事を参照してください。