https://playwright.dev/docs/dialogs

Giới thiệu

• Dialog là những popup hiện ra ở dạng alert, confirm, hay propmt, hoặc beforeunload confirmation.
• Playwright có thể xử lý các tình huống này.

alert(), confirm(), prompt() dialogs

• Trước tiên, hãy hiểu những dialog này trông thế nào đã.
• Ví dụ về alert dialog:
  • alert dialog là dialog thông báo cho người dùng. Chỉ có duy nhất một button OK
• Ví dụ về confirm dialog:
  • confirm dialog là dialog để cho người dùng xác nhận hoặc hủy bỏ. Có 2 button: OK và Cancel
• Ví dụ về prompt dialog:
  • prompt dialog dùng để lấy thông tin từ người dùng. Có một ô input để người dùng có thể nhập vào thông tin.
• Mặc định thì Playwright sẽ tự động dismiss (nghĩa là tự cancel) các popup dạng này.
• Bạn không cần phải làm gì nếu bạn cũng muốn cancel.
• Trong trường hợp bạn muốn bấm OK, thì bạn có thể xử lý bằng đoạn code sau:

page.on('dialog', dialog => dialog.accept());
await page.getByRole('button').click();

• Giải thích:
  • page.on('dialog')... nói với Playwright rằng, từ giờ, nếu gặp sự kiện dialog thì hãy xử lý như đoạn logic trong hàm callback phía sau.
• Lưu ý:
  • Đoạn code page.on('dialog')... phải được chạy trước khi bạn trigger sự kiện dialog.
  • Hàm call back dialog => .... phải xử lý dialog. Có thể là cancel hay accept.
    • Nếu bạn không xử lý thì web của bạn sẽ bị treo.
• Ví dụ trường hợp bị treo:

page.on('dialog', dialog => console.log(dialog.message()));
await page.getByRole('button').click(); // Will hang here

beforeunload dialog

• Khi sự kiện page.close() được diễn ra, nếu trang web của bạn có sự kiện beforeunload thì sẽ hiển thị dialog trông như này:

• Bạn có thể xử lý dialog bằng cách đơn giản như sau:

page.on('dialog', async dialog => {
  assert(dialog.type() === 'beforeunload');
  await dialog.dismiss();
});
await page.close({ runBeforeUnload: true });