自動テストチュートリアル

Playwright、Seleniumなどの自動テストツールを学ぼう

モーダル(Modal)

画面の上に重なるように表示される「モーダル」の操作に挑戦しましょう。

利用頻度 難易度
★★★★☆ ★★☆☆☆

Playwrightを使って、モーダル（ポップアップウィンドウ）内の要素を操作する方法を学びます。モーダルは、予約完了のメッセージや、ログインフォーム、確認ダイアログなど、様々な場面で使われる非常に重要なUIです。

モーダルとダイアログの違い

前回学んだ「ダイアログ」と「モーダル」は似ていますが、実は別物です。

種類 説明 操作方法
ダイアログ ブラウザ標準の機能（alert, confirm, prompt） page.on('dialog') で処理
モーダル Webサイトが独自に作ったポップアップ 通常の要素と同じように click() などで操作

モーダルは、見た目は特別ですが、HTMLで作られた普通の要素なので、これまで学んだ click() や fill() でそのまま操作できます。

使用するコマンド：click()、fill() など

モーダル内の要素も、通常の要素と同じコマンドで操作します。

基本的な書き方

// モーダル内のボタンをクリックする
await page.getByRole('button', { name: '閉じる' }).click();

// モーダル内のテキストボックスに入力する
await page.locator('#modal-input').fill('入力値');

やってみよう

以下の手順に沿って、モーダル内の要素を操作するテストコードを完成させてください。

演習ファイル

tests/document-2/lesson-14.spec.ts

行う操作

項目 行う操作
Small modal ボタンをクリックしてモーダルを開く
モーダル内のClose ボタンをクリックしてモーダルを閉じる

手順動画

手順

  1. デバッグ実行： ブレークポイントで目的の画面で止める
  2. 要素の特定： Pick locator を使ってコードを取得する
  3. コードの記述： 取得したコードを元に処理を完成させる
  4. 最終確認： テストを実行し、passed を確認する

ちなみに...

⚠️ モーダルが表示されるまで待つ

モーダルは、ボタンをクリックしてから表示されるまで、少し時間がかかることがあります。

Playwrightは賢いので、基本的には自動で待ってくれますが、もし「要素が見つからない」というエラーが出る場合は、モーダルの表示アニメーションが完了するのを待つ必要があるかもしれません。

// モーダル内の要素が表示されるまで待つ
await expect(page.locator('.modal-content')).toBeVisible();

この「表示されるまで待つ」というテクニックは、後ほど詳しく学びます。

目次に戻る