Handling Alerts in playwright

 Handling alerts (JavaScript alerts, confirms, and prompts) in Playwright is straightforward. Playwright allows you to listen for dialog events and interact with them as needed. Here we will test three different types of alerts; Simple alert, Confirmation alert and Prompt alert

Sample Screenshot for alert

Here's how you can handle them in different situations:

✅ Handle JavaScript Alerts

You can handle basic alert dialog box

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

await page.click('#trigger-alert'); // Replace with your action that triggers the alert

✅ Handle JavaScript Alerts

You can choose to accept or dismiss confirm dialogs.

page.on('dialog', async dialog => {
  console.log(`Confirm message: ${dialog.message()}`);
  await dialog.accept(); // or dialog.dismiss();
});

await page.click('#trigger-confirm');

✅ Handle Prompt Dialogs

With prompts, you can also provide input before accepting.

page.on('dialog', async dialog => {
  console.log(`Prompt message: ${dialog.message()}`);
  await dialog.accept('Your input here'); // or dialog.dismiss();
});

await page.click('#trigger-prompt');

Basic Alert Handling

Playwright allows you to listen for dialog events on the page. Here’s how to handle a simple alert:

// @ts-check
import { test, expect } from '@playwright/test';

test("Handle basic alert", async ({ page }) => {
    await page.goto("https://practice.expandtesting.com/js-dialogs");
  
    // Enabling Alert Handling for simple alert
    page.on("dialog", async (dialog) => {
      expect(dialog.type()).toContain("alert");
      expect(dialog.message()).toContain("I am a Js Alert");
      await dialog.accept();
    });
  
    await page.waitForSelector("#js-alert");
    await page.locator("#js-alert").click();   
  });

Handling Confirmation Alerts

Confirmation alerts can have two options: OK and Cancel. Here’s how to handle both scenarios:

Accepting the Confirmation Alert

// @ts-check
import { test, expect } from '@playwright/test';

  test("Confirmation alert with ok", async ({ page }) => {
    await page.goto("https://practice.expandtesting.com/js-dialogs");
  
    // Enabling Alert Handling for Confirmation alert with OK
    page.on("dialog", async (dialog) => {
      expect(dialog.type()).toContain("confirm");
      expect(dialog.message()).toContain("I am a Js Confirm");
      await dialog.accept();
    });
  
    await page.waitForSelector("#js-confirm");
    await page.locator("#js-confirm").click();
    await expect(page.locator("#dialog-response")).toHaveText("Ok");    
  });

Dismissing the Confirmation Alert

// @ts-check
import { test, expect } from '@playwright/test';

  test("Confirmation alert with Cancel", async ({ page }) => {
    await page.goto("https://practice.expandtesting.com/js-dialogs");
  
    // Enabling Alert Handling for Confirmation alert with Cancel
    page.on("dialog", async (dialog) => {
      expect(dialog.type()).toContain("confirm");
      expect(dialog.message()).toContain("I am a Js Confirm");
      await dialog.dismiss();
    });
  
    await page.waitForSelector("#js-confirm");
    await page.locator("#js-confirm").click();
    await expect(page.locator("#dialog-response")).toHaveText("Cancel");   
  });

Handling Prompt Alerts

Prompt alerts allow users to input data. Here’s how to handle a prompt in Playwright:

// @ts-check
import { test, expect } from '@playwright/test';

  test("Prompt alert", async ({ page }) => {
    await page.goto("https://practice.expandtesting.com/js-dialogs");
  
    // Handling prompt dialog
    page.on("dialog", async (dialog) => {
      expect(dialog.type()).toContain("prompt");
      expect(dialog.message()).toContain("I am a Js prompt");
      expect(dialog.defaultValue()).toContain("");
      await dialog.accept("Skptricks");
    });
  
    await page.waitForSelector("#js-prompt");
    await page.locator("#js-prompt").click();
    await expect(page.locator("#dialog-response")).toHaveText("Skptricks");
  
    await page.waitForTimeout(5000);
  });

⚠️ Important Notes

1. Always set up the dialog handler before the action that triggers the dialog. If not, Playwright will throw an error.
2. You can add conditional logic inside the dialog handler if you're handling multiple types of dialogs.

By utilizing event listeners for dialogs, you can effectively manage user interactions such as alerts, confirmations, and prompts. This ensures that your automated tests can accurately simulate user behavior and validate application responses.