Accel Studio テスト機能でワークフローをE2Eテストする方法

2025年4月15日 最終更新日時 : 2025年4月15日 dev-portal_admin

このCookBookでは、Accel Studio テスト機能でワークフローをテストする方法について紹介します。

前提

このCookBookを実施するためには、以下の環境が必要です。

  • 2025 Spring 版以降の intra-mart Accel Platform であること。
  • サンプルデータをインポートしていること。
  • Accel Studio テスト機能のセットアップが完了していること。
  • セットアップ手順で発行する OAuth APIキー のスコープに IM-Workflow REST API へのアクセスが含まれていること。

セットアップ方法については、下記のリンクを参照してください。

Accel Studio テスト機能とは

Accel Studio テスト機能は、E2Eテストの自動化ツールです。
Playwright を利用して、ブラウザを操作することで、テストの自動化を行います。
Playwrightは、Microsoft によって開発された、オープンソースのブラウザテストの自動化ライブラリです。

以下の機能を提供します。

  • Accel Studio のリソースとしてのテストシナリオ管理
  • Accel Studio アプリケーションに対するテスト実行管理
  • Accel Studio アプリケーションに対するテスト結果管理
  • Accel Studio アプリケーションをテストする上で最適なテスト支援機能

Accel Studio テスト機能を使うメリットと活用場面

以下の場合に、Accel Studio テスト機能を利用することで、テストに費やす時間を短縮できます。

  • intra-mart Accel Platform のアップデート時
  • Accel Studio アプリケーションの変更時
  • ブラウザのアップデートや実行環境変更時

完成イメージ

ワークフローの申請画面、確認画面、承認画面を Accel Studio テスト機能を用いて完了することを確認します。

  • ワークフローのフロー図とテスト定義の関係

cookbook235699_01_00_01

完成サンプル

以下のリンクから完成サンプルをダウンロードできます。このサンプルは、2025 Spring 版以降でインポートできます。

Accel Studio アプリケーションインポートデータ：cookbook_235699_app.zip

インポート後、以下のデータが登録されます。

  • Accel Studio アプリケーション定義: cookbook_235699_app
  • ワークフロー定義: cb_235699_flow

レシピ

  1. ワークフローを作成
  2. テストケースを作成
  3. テストケースを実行
  4. テスト結果の確認

1. ワークフローを作成

テスト対象となるワークフローを作成します。
サンプルの Accel Studio アプリケーションにはワークフローのコンテンツ定義が含まれています。
今回はサンプルのワークフローを使用します。

テスト対象のワークフロー情報

  • フロー図
    cookbook235699_01_00_01

  • 各ノードの申請者と処理者は下記の通りです。

    • 申請対象者: 青柳 辰巳
    • 処理対象者: 上田 辰男
    • 確認対象者: 林 政義

  • 申請画面
    cookbook235699_01_00_02

2. テストケースを作成

Accel Studio テスト機能 を使用して、ワークフローのテストケースを作成します。
テストケースは JavaScript で記述します。

テストコード上では IM-Workflow API を利用して、案件の状態を確認するために必要な、システム案件IDなどを簡単に取得するメソッドを提供しています。
システム案件IDや案件情報を取得する際に利用します。詳細な情報は以下のリンクを参照してください。

1. テスト定義一覧画面からテスト定義を作成

Accel Studio テスト定義一覧画面を開いて、新規にカテゴリを作成後に「テスト定義を新規作成」ボタンを選択します。

cookbook235699_02_01_01

テスト定義詳細画面でテストケースを作成します。
実行ユーザに「青柳 辰巳」を指定します。

cookbook235699_02_01_02

ここまでの作業でテストケースを作成する準備ができました。

テストケースを作成する際にはPlaywrightのVSCode拡張機能の「Playwright Test generator」を利用して操作記録ができます。
実際に「Playwright Test generator」を利用してテストコードを生成する方法を紹介します。

ツールの詳細情報については以下のリンクを参照してください。

  1. VSCodeを起動して、Playwright Test generatorをインストールします。

cookbook235699_02_02_01

  1. Playwrightプロジェクトを作成するために、VSCodeのコマンドパレットを開いて、Test: Install Playwright と入力します。(windows: Ctrl+Shift+P、macOS: Cmd+Shift+P)

cookbook235699_02_02_02

  1. ダイアログが表示されたら、use JavaScript を選択します。

cookbook235699_02_02_03

  1. インストールが完了すると、設定ファイルやサンプルコードなどが作成されます。

cookbook235699_02_02_04

  1. テストケースを生成するために、「Testing」タブを選択して、「Record new」を選択します。すると、テストファイルが作成され、テストを記録するためのブラウザが起動します。

cookbook235699_02_02_05
cookbook235699_02_02_06

  1. ブラウザが起動したら、テストを記録するためにレコードを開始します。ブラウザ上部の赤い丸いボタンを押下することで、ブラウザの操作を記録することができます。

cookbook235699_02_02_07

  1. テスト対象の画面へアクセスして、テストケースの生成を行います。下記のようにブラウザ操作をすることで、テストコードが生成されます。

cookbook235699_02_02_08

※Accel Studio テスト機能でテスト実行する場合は、ログイン処理は記述する必要がありません。
ログインしている状態からテストを開始できるため、今回のテストケースでは直接申請画面や処理画面などに遷移しています。

2. 申請処理のテストケースを作成

ワークフローの申請画面を開いて、申請処理までの動作を確認するテストを作成します。
フローIDと案件申請者のユーザコードを定義します。

const TARGET_FLOW_ID = 'cb_235699_flow'
const APPLY_USER_CD = 'aoyagi';

申請画面に直接アクセスするテストコードを記述します。

直接申請画面にアクセスするURLは im_workflow/user/apply/apply_direct/%フローID% です。
サンプルデータのフローIDは cb_235699_flow なので、下記のように記述します。

// 申請画面へ遷移
await page.goto('im_workflow/user/apply/apply_direct/' + TARGET_FLOW_ID);

各入力項目に値を入力すると申請ボタンの押下の動作は、以下のように記述します。

// 申請内容を記載
await page.locator('#im-element-47').click();
await page.locator('#im-element-47').fill('PC');
await page.locator('#im-element-47').click();
await page.locator('#im-element-47').press('Tab');
await page.locator('#im-element-60').click();
await page.locator('#im-element-60').fill('1');
await page.locator('#im-element-73').click();
await page.locator('#im-element-73').fill('100000');
await page.locator('#im-element-86').click();
await page.locator('#im-element-86').fill('新入社員用のPC購入です。');
await page.locator('input[type="file"]').setInputFiles('請求書.png');
await page.getByText('請求書.png (53.5KB)').waitFor();

// 申請ボタンを押下
await page.getByRole('button', { name: '申請' }).click();

処理モーダルの入力と申請ボタンの押下動作は、以下のように記述します。

// 処理モーダルに案件名の記入と申請
await page.locator('#im-wf-inputs-flex-item-basic-information input[type="text"]').click();
await page.locator('#im-wf-inputs-flex-item-basic-information input[type="text"]').fill('新人社員用のPC購入申請');
await page.locator('#im-workflow-apply-modal').getByRole('button', { name: '申請' }).click();
await page.getByRole('button', { name: 'はい' }).click();

// 申請一覧画面に遷移することを確認
await page.getByRole('heading', { name: '申請一覧' }).waitFor();

申請した案件が申請済みであるかを確認します。
案件の状態を確認するために、必要なシステム案件IDを取得します。テストケース用に提供されている getSystemMatterIdFromActive メソッドを利用します。このメソッドは、指定したフローIDとユーザIDから、最新の案件を取得して、該当案件のシステム案件IDを返します。

// システム案件IDの取得
const systemMatterId = await workflowUtil.getSystemMatterIdFromActive(TARGET_FLOW_ID, APPLY_USER_CD);

// 案件のステータスを確認
const matterStatus = await workflowUtil.getStatusInfo(systemMatterId);
expect(matterStatus).toBe('0');

取得したシステム案件IDを利用して、案件の状態を確認します。
案件の状態は workflowUtil.getStatusInfo メソッドを利用します。

const matterStatus = await workflowUtil.getStatusInfo(systemMatterId);
expect(matterStatus).toBe('0');

上記のテストコードを実行することで案件が申請済みであることを確認します。

3. 確認処理のテストケース作成

確認権限があるユーザでログインし、確認処理までを完了するテストを作成します。

新たにテストケースを追加します。実行ユーザには「林政義」を設定してください。

初めにフローID、申請者ユーザコード、確認者コード、確認ノードのIDを定義します。

const TARGET_FLOW_ID = 'cb_235699_flow'
const APPLY_USER_CD = 'aoyagi'
const CONFIRM_USER = 'hayashi'
const TARGET_NODE_ID = 'confirm'

システム案件IDの取得と、確認画面へ遷移します。

直接確認画面にアクセスするURLは im_workflow/user/confirm/confirm_direct/%システム案件ID%/%ノードID(任意)% です。
サンプルデータのフローIDは cb_235699_flow 、対象のノードIDは confirm なので、下記のように記述します。

// システム案件IDの取得
const systemMatterId = await workflowUtil.getSystemMatterIdFromActive(TARGET_FLOW_ID, APPLY_USER_CD);

// 確認画面へ遷移
const confirmPageUrl = 'im_workflow/user/confirm/confirm_direct/' + systemMatterId + '/' + TARGET_NODE_ID;
await page.goto(confirmPageUrl);

確認画面の確認処理は下記です。

await page.getByRole('button', { name: '確認' }).click();
await page.locator('#im-workflow-confirm-modal').getByRole('button', { name: '確認' }).click();
await page.getByRole('button', { name: 'はい' }).click();

// 確認対象ユーザの状態確認
expect(await workflowUtil.isUserConfirmed(systemMatterId, CONFIRM_USER, 3000)).toBeTruthy()

確認対象ユーザが確認済みであるかを判定するために、workflowUtil.isUserConfirmed を利用します。
このメソッドは、システム案件ID、ユーザコード、遅延実行時間を設定して、該当のユーザコードのユーザが指定したシステム案件IDの案件を確認済みであるか判定します。

// 確認対象ユーザの状態確認
expect(await workflowUtil.isUserConfirmed(systemMatterId, CONFIRM_USER, 3000)).toBeTruthy()
4. 承認処理のテストケース作成

承認権限があるユーザでログインし、添付資料のダウンロードと承認処理までを完了するテストを作成します。

新たにテストケースを追加します。実行ユーザには「上田 辰男」を設定してください。

初めに、フローIDと申請者ユーザコードを定義します。

const TARGET_FLOW_ID = 'cb_235699_flow';
const APPLY_USER_CD = 'aoyagi';

システム案件IDの取得と、処理画面へ遷移します。

直接処理画面にアクセスするURLは im_workflow/user/process/process_direct/%システム案件ID% です。
システム案件IDの取得と、遷移処理は下記の通りです。

// システム案件IDの取得
const systemMatterId = await workflowUtil.getSystemMatterIdFromActive(TARGET_FLOW_ID, APPLY_USER_CD);

// 承認画面へ遷移
const approvePageUrl = 'im_workflow/user/process/process_direct/' + systemMatterId;
await page.goto(approvePageUrl);

添付されている請求書のダウンロードと、承認処理のテストは下記の通りです。

// ダウンロード処理のテスト
await page.getByText('請求書.png (53.5KB)').waitFor();
const downloadPromise = page.waitForEvent('download');
await page.getByRole('img', { name: 'ダウンロード' }).click();
const download = await downloadPromise;
await download.saveAs(download.suggestedFilename());

await page.getByRole('button', { name: '処理' }).click();
await page.screenshot({ path: 'screenshot_4.png' });
await page.getByRole('button', { name: '承認' }).click();
await page.getByRole('button', { name: 'はい' }).click();

未処理一覧画面遷移すること、案件が完了状態であるか確認します。

// 未処理一覧画面に遷移することを確認
await page.getByRole('heading', { name: '案件一覧 - 未処理 -' }).waitFor();

// 案件状態が完了済みかチェック
expect(await workflowUtil.getStatusInfo(systemMatterId)).toBe('1');

合計で3つのテストケースの作成が完了しました。

3. テストケースを実行

テストケースを実行します。

テスト定義詳細画面を開いて、「実行」ボタンを押下します。
テストステータスが実行中に変化し、テスト終了後はテスト結果を参照できます。

cookbook235699_03_00_01

4. テスト結果の確認

テスト結果画面でテストケース結果を確認します。

テスト詳細画面の「テスト結果リンク」を押下して、テスト結果詳細画面へ遷移します。

cookbook235699_04_00_01

テスト結果画面では、テスト結果の他に、各テストの詳細情報を参照できます。
詳細情報に関しては下記を参照してください。

cookbook235699_04_00_02

すべてのテストが成功することを確認しました。

カテゴリー
CookBook
タグ
AccelStudio、ワークフロー
前の記事
IM-BloomMaker レイアウトモードのエレメントセットに指定可能なアイコンを追加する方法
2025年4月8日
次の記事
マスタメンテナンステンプレートから作成したアプリケーションの主キーで採番定義を利用する手順New!!
2025年4月16日