Playwright — Handling Alerts

In this blog, we will explore how to manage different types of alerts using Playwright with practical examples.

Basic Alert Handling

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

const { test, expect } = require("@playwright/test");

test("Simple alert", async ({ page }) => {
  await page.goto("https://testautomationpractice.blogspot.com/");

  // Enabling Alert Handling for simple alert
  page.on("dialog", async (dialog) => {
    expect(dialog.type()).toContain("alert");
    expect(dialog.message()).toContain("I am an alert box!");
    await dialog.accept();
  });

  await page.waitForSelector("#alertBtn");
  await page.locator("#alertBtn").click();
  await page.waitForTimeout(5000);
});

In this example:

• We navigate to a test page.
• We listen for dialog events using page.on("dialog").
• When an alert appears, we verify its type and message, then accept it.

Handling Confirmation Alerts

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

Accepting the Confirmation Alert

test("Confirmation alert with ok", async ({ page }) => {
  await page.goto("https://testautomationpractice.blogspot.com/");

  // Enabling Alert Handling for Confirmation alert with OK
  page.on("dialog", async (dialog) => {
    expect(dialog.type()).toContain("confirm");
    expect(dialog.message()).toContain("Press a button!");
    await dialog.accept();
  });

  await page.waitForSelector("#confirmBtn");
  await page.locator("#confirmBtn").click();
  await expect(page.locator("#demo")).toHaveText("You pressed OK!");

  await page.waitForTimeout(5000);
});

In this code:

• We check for a confirmation dialog and accept it when prompted.
• After clicking the button, we assert that the expected text appears on the page.

Dismissing the Confirmation Alert

test("Confirmation alert with Cancel", async ({ page }) => {
  await page.goto("https://testautomationpractice.blogspot.com/");

  // Enabling Alert Handling for Confirmation alert with Cancel
  page.on("dialog", async (dialog) => {
    expect(dialog.type()).toContain("confirm");
    expect(dialog.message()).toContain("Press a button!");
    await dialog.dismiss();
  });

  await page.waitForSelector("#confirmBtn");
  await page.locator("#confirmBtn").click();
  await expect(page.locator("#demo")).toHaveText("You pressed Cancel!");

  await page.waitForTimeout(5000);
});

Here, we dismiss the confirmation dialog instead of accepting it, verifying that the correct message is displayed afterward.

Handling Prompt Alerts

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

test("Prompt alert", async ({ page }) => {
  await page.goto("https://testautomationpractice.blogspot.com/");

  // Handling prompt dialog
  page.on("dialog", async (dialog) => {
    expect(dialog.type()).toContain("prompt");
    expect(dialog.message()).toContain("Please enter your name:");
    expect(dialog.defaultValue()).toContain("Harry Potter");
    await dialog.accept("Deep");
  });

  await page.waitForSelector("#promptBtn");
  await page.locator("#promptBtn").click();
  await expect(page.locator("#demo")).toHaveText(
    "Hello Deep! How are you today?"
  );

  await page.waitForTimeout(5000);
});

In this case:

• We listen for a prompt dialog and provide an input value.
• After clicking the button, we check if the expected output reflects our input.

Conclusion

Handling alerts in Playwright is straightforward and powerful. 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.

References

Dialogs | Playwright

As always, feel free to share your opinion in the comments! See you next time.

Get Deep Shah’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Be sure to clap and follow the writer ️👏️️

Connect

LinkedIn

GitHub

Instagram