我們完成了上傳檔案與下載檔案的任務，新的挑戰是處理 dialog (對話框) 事件，無論是alert()、confirm()、prompt() 甚至是 beforeunload，在 Playwright 都可以運用 dialog() 事件來處理。我們先來認識一下 dialog() 的基本用法，再透過 3 個小關卡實戰練習。

首先，在 Playwright 裡，如果遇到對話框，預設都會是關閉，因此，如果在操作流程必須與對話框互動，就必須在對話框之前設置 Dialog Handler 來接受或拒絕對話框。

dialog handler 基本語法：

• dialog.accept()
  拒絕對話框 (相當於點選「確定」)

• dialog.dismiss()
  拒絕對話框 (相當於點選「取消」)

• dialog.message()
  取得對話框的訊息文字內容

• dialog.defaultValue()
  取得 prompt()對話框的預設值，如果不是 prompt() 則回傳空字串

• dialog.page()
  取得觸發對話框的 Page 物件

• dialog.type()
  取得對話框的類型(alert() / confirm() / prompt() / beforeunload)

Dialog Handler 設置方法：

持續監聽

await page.on('dialog', dialog => {
  console.log("Dialog:", dialog.message());
  dialog.accept();
});

只監聽一次

await page.once('dialog', dialog => {
  console.log("Dialog:", dialog.message());
  dialog.accept();
});

習得 Dialog Handler 技能後，冒險準備展開，這次的目標是 JavaScript Alerts，我們要運用剛剛所學的語法，逐一破解網頁中的 3 種對話框，看看能否順利過關，成功掌握這項操作的技巧。

在 JavaScript Alerts 網頁中，我們操作對話框後，結果會顯示在下方的 Result，這次的關卡必須取得相對應的 Result，我們來試試看吧！

第 1 關：點擊「Click for JS Confirm」按鈕，接受對話框

難易度 ★☆☆☆☆
任務畫面

闖關咒語

test('dialog handler 1', async({ page }) => {
  // 前往目標頁面
  await page.goto('https://the-internet.herokuapp.com/javascript_alerts');

  // 監聽對話框事件
  page.once('dialog', dialog => {
    dialog.accept();
  });

  // 點擊觸發對話框的按鈕
  await page.getByRole('button', { name: 'Click for JS Confirm' }).click();

  // 驗證對話框已被接受，並出現相應的訊息
  await expect(page.getByText('You clicked: Ok')).toBeVisible();
});

關卡通關證明

第 2 關：點擊「Click for JS Prompt」按鈕，輸入指定文字

難易度 ★★☆☆☆
任務畫面

闖關咒語

test('dialog handler 2', async ({ page }) => {
  // 前往目標頁面
  await page.goto('https://the-internet.herokuapp.com/javascript_alerts');

  // 監聽對話框事件
  page.once('dialog', dialog => {
    dialog.accept('貓貓狗狗大冒險！'); // 在提示框中輸入文字並接受
  });

  // 點擊觸發對話框的按鈕
  await page.getByRole('button', { name: 'Click for JS Prompt' }).click();

  // 驗證對話框已被接受，並出現相應的訊息
  await expect(page.getByText('You entered: 貓貓狗狗大冒險！')).toBeVisible();
});

關卡通關證明

第 3 關：點擊「Click for JS Alert」按鈕，取得對話框訊息文字內容

難易度 ★★★☆☆
任務畫面

闖關咒語

test('dialog handler 3', async ({ page }) => {
  // 前往目標頁面
  await page.goto('https://the-internet.herokuapp.com/javascript_alerts');

  // 用於儲存對話框訊息的變數
  let message = '';

  // 監聽對話框事件
  page.once('dialog', dialog => {
    message = dialog.message(); // 獲取對話框訊息
    dialog.accept(); // 接受對話框

    return message;
  });

  // 點擊觸發對話框的按鈕
  await page.getByRole('button', { name: 'Click for JS Alert' }).click();

  // 驗證對話框已被接受，並出現相應的訊息
  expect(message).toBe('I am a JS Alert');
});

關卡通關證明

💡 Tips：
你有注意到嗎？第 3 關最後的 assertion 沒有加上 await。
這是因為我們傳入的 message 是字串，它是普通的值，並不是 Promise，所以在這裡不需要加上 await 唷！

相信各位玩家都已經對處理對話框的技能非常嫻熟了，你也可以嘗試看看，使用 page.on()，只設置一個 Dialog Handler，一次處理三個關卡，這在比較複雜的網頁操作時能夠派上用場。

到這裡，我們學會了 Dialog Handler 的運用技巧，相信在測試場景時，面對各式各樣的對話框事件都能從容不迫、不再手忙腳亂。接下來，挑戰升級，我們要面對的是一顆不定時炸彈，必須隨時監測它的狀態，直到條件符合，才能成功拆除。