ダイアログの文言を検証

このページでは、JavaScriptのダイアログに表示される文言を、ステップで検証する方法についてご説明します。

ダイアログの自動処理に関する注意事項

Nexusのテスト実行では、明示的にダイアログを閉じるステップがシナリオに無い場合、ダイアログが表示されると自動で閉じる操作を行います。

実行時に自動的に閉じる処理の対象となるダイアログは、以下の3種類となります。

• confirm ダイアログ (OK, Cancel)

• alert ダイアログ (OK)

• prompt ダイアログ (文字入力欄,OK, Cancel)

検証手順

Playwrightのpage.waitForEvent('dialog')を使用することで、ダイアログの表示を待ち受け、その内容を検証することができます。検証を行うには、ダイアログのイベントを待つ処理と、そのダイアログを表示させるトリガーとなる操作（ボタンクリックなど）をコード内に記述する必要があります。

サンプルコード（アラートダイアログの場合）

以下は、ボタンをクリックした際に表示されるアラートダイアログの文言が「I am a JS Alert」であることを検証するサンプルコードです。

const dialogPromise = page.waitForEvent('dialog', (dialog) => {
    // Verify the dialog message
    expect(dialog.message()).toBe('I am a JS Alert');
    // Verify that the dialog type is 'alert'
    expect(dialog.type()).toBe('alert');
    // Dismiss the dialog
    dialog.dismiss();
    return true;
});
// Click the element that triggers the dialog
await page.getByRole('button', { name: 'Click for JS Alert' }).click();
// Wait for the dialog to be handled
await dialogPromise;

• page.waitForEvent('dialog', (dialog) => { ... })

  • ダイアログイベントが発生するのを待ち受けます。ダイアログが表示されると、第二引数のコールバック関数が実行されます。

• expect(dialog.message()).toBe('期待する文言')

  • ダイアログに表示されているメッセージを取得し、期待する文言と一致するかを検証（アサーション）します。

• expect(dialog.type()).toBe('alert')

  • ダイアログの種類を検証します。アラートの場合はalert、確認ダイアログの場合はconfirmを指定します。

• dialog.dismiss()

  • ダイアログを閉じます。確認ダイアログで「OK」をクリックする動作をさせたい場合はdialog.accept()を使用します。

• await page.getByRole(...).click()

  • ダイアログを表示させるトリガーとなる操作です。対象の要素や操作に合わせて適宜変更してください。

テストの実装を確認する方法

期待通りにアサーションが機能しているかを確認するために、toBe()に渡す期待文字列を一時的にわざと間違った内容（例: toBe('誤った文言')）にしてテストを実行してみてください。テストが正しく失敗すれば、検証ステップが意図通りに動作していることを確認できます。