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)" ]
};
...

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

プロジェクトルート/ §─askui_example/ §─ 特長／ §─ NavigateToWebsite.feature §─ ノードモジュール/ §─ ...

次の基本的な 機能
をこのファイルに書き込みます:

npm install --save-dev jest-cucumber

機能: Web サイトに移動します シナリオ: ブラウザのアドレス バーに正しい URL を入力する Google 検索ページにいるとします AskUI練習ページのURLを入力すると 次に、Webページにアクセスします

ステップ定義実装の作成

各テストが特定のシナリオにマップされるステップ定義ファイル askui_example/navigate-to-url.step.ts を作成します。

npm install --save-dev jest-cucumber

import {defineFeature,loadFeature} from 'jest-cucumber'; import { aui } から './helpers/askui-helper'; // 機能ファイルをロードします const feature =loadFeature('features/NavigateToWebsite.feature'); defineFeature(feature, テスト => { // 機能ファイルの「シナリオ」にマップします test('ブラウザのアドレス バーに正しい URL を入力します', ({ 与えられた、いつ、その後 }) => { Given('Google 検索ページを表示しています', async () => { aui.moveMouse(500, 500).exec(); を待ちます。 aui.mouseLeftClick().exec(); を待ちます。 aui.pressTwoKeys('command', 't').exec(); を待ちます。 }); when('AskUI 練習ページの URL を入力します', async () => { await aui.typeIn('https://askui.github.io/askui-practice-page/').textfield().exec(); aui.pressKey('enter').exec(); を待ちます。 }); then('Web ページにアクセスします', async () => { await aui.expect().text('AskUI 練習ページへようこそ').exists().exec(); }); }); });

ワークフローを実行する

ブラウザを全画面で開き、次のコマンドでワークフローを開始します:

npm install --save-dev jest-cucumber

npm ラン アスクイ

ワークフローを実行すると新しいタブが開き、AskUI の練習ページに移動することがわかります。

結論

AskUI と Cucumber を組み合わせると、BDD スタイルで AskUI ワークフローを作成できます。実際の人間のユーザーのようにテストを実行すると、すべての関係者にとってテストがより現実的なものになります。