「本当に削除しますか？」のような確認メッセージなど、ブラウザが表示する「ダイアログ」の操作に挑戦しましょう。

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

Playwrightを使って、ブラウザのダイアログ（alert, confirm, prompt）を処理する方法を学びます。ダイアログは、ユーザーへの警告や、確認を求める場面でよく使われます。

---

ダイアログの種類

ブラウザには、主に3種類のダイアログがあります。

種類	説明	ボタン
Alert	メッセージを表示するだけ	OK のみ
Confirm	はい/いいえ の確認を求める	OK / キャンセル
Prompt	テキスト入力を求める	OK / キャンセル + 入力欄

---

今回使用するコマンド：page.on('dialog')

ダイアログは、表示された瞬間に処理しないと、テストが止まってしまいます。そのため、ダイアログが表示される前に、あらかじめ「ダイアログが出たらこう処理する」という命令を書いておく必要があります。

基本的な書き方

// ダイアログが表示されたら「OK」を押す
page.on('dialog', dialog => dialog.accept());

// ダイアログが表示されたら「キャンセル」を押す
page.on('dialog', dialog => dialog.dismiss());

Promptダイアログにテキストを入力する場合

// ダイアログに「山田太郎」と入力してOKを押す
page.on('dialog', dialog => dialog.accept('山田太郎'));

---

やってみよう

以下の手順に沿って、ダイアログを処理するテストコードを完成させてください。

演習ファイル

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

行う操作

項目	行う操作
Click Me	ボタンをクリックする
アラートダイアログ	OKを押して閉じる

---

手順動画

---

手順

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

---

ちなみに...

⚠️ ダイアログ処理の順番に注意！

page.on('dialog', ...) は、必ずダイアログを発生させるクリックの前に書いておく必要があります。

// ✅ 正しい順番
page.on('dialog', dialog => dialog.accept());  // 先に書く
await page.getByRole('button', { name: 'Click Me' }).click();

// ❌ 間違った順番（ダイアログが処理されない）
await page.getByRole('button', { name: 'Click Me' }).click();
page.on('dialog', dialog => dialog.accept());  // 後だと間に合わない

この「先に準備しておく」という考え方は、非同期処理を扱う上でとても重要です。