Automation Practice · Playwright

Alerts & Dialogs

Browser pop-ups block the page until someone answers them. Learn to accept, dismiss and read them, and to tell them apart from dialogs built into the page.

Every solution on this page starts with this hook. With baseURL set to https://hiraanachwani.com in your playwright.config.ts, it opens this page before each test.

test.beforeEach(async ({ page }) => {
  await page.goto('/practice/alerts');
});

Before you start: Playwright closes browser pop-ups automatically by clicking Cancel, unless your test listens for them. Register the listener with page.once('dialog', …) before the click that opens the pop-up.

Alert

A message with a single OK button.

No alert shown yet

Try this

Open the alert and check its message is Hello from the practice page!
Accept it and check the result says Alert closed.

Locator tip: a browser pop-up isn't part of the page, so no locator can find it. You handle it through the dialog event, where dialog.message() gives you its text.

Show Playwright solution

test('alert', async ({ page }) => {
  let message = '';
  page.once('dialog', async (dialog) => {
    message = dialog.message();
    await dialog.accept();
  });

  await page.getByRole('button', { name: 'Show alert', exact: true }).click();

  expect(message).toBe('Hello from the practice page!');
  await expect(page.getByTestId('alert-result')).toHaveText('Alert closed');
});

Confirm

A question with OK and Cancel. The page reacts differently to each.

No answer yet

Try this

Click Delete item and accept. Check the result says You clicked OK.
Click it again and dismiss. Check the result says You clicked Cancel.

Locator tip: dialog.accept() clicks OK and dialog.dismiss() clicks Cancel. page.once handles only the next pop-up, so register a new one before each click.

Show Playwright solution

test('confirm', async ({ page }) => {
  const deleteItem = page.getByRole('button', { name: 'Delete item' });
  const result = page.getByTestId('confirm-result');

  page.once('dialog', (dialog) => dialog.accept());
  await deleteItem.click();
  await expect(result).toHaveText('You clicked OK');

  page.once('dialog', (dialog) => dialog.dismiss());
  await deleteItem.click();
  await expect(result).toHaveText('You clicked Cancel');
});

Prompt

A pop-up that asks you to type something. It starts with a default answer.

No name entered yet

Try this

Open the prompt and check its default answer is Guest.
Answer Ada and check the result says Hello, Ada!
Open it again and cancel. Check the result says You cancelled the prompt.

Locator tip: pass your answer to dialog.accept('Ada'). dialog.defaultValue() returns the text the prompt started with.

Show Playwright solution

test('prompt', async ({ page }) => {
  const enterName = page.getByRole('button', { name: 'Enter your name' });
  const result = page.getByTestId('prompt-result');

  let defaultAnswer = '';
  page.once('dialog', async (dialog) => {
    defaultAnswer = dialog.defaultValue();
    await dialog.accept('Ada');
  });
  await enterName.click();
  expect(defaultAnswer).toBe('Guest');
  await expect(result).toHaveText('Hello, Ada!');

  page.once('dialog', (dialog) => dialog.dismiss());
  await enterName.click();
  await expect(result).toHaveText('You cancelled the prompt');
});

Delayed alert

This alert appears 2 seconds after the click, the way a slow server response might trigger one.

Waiting for you to click

Try this

Click the button and check the result says Alert coming… straight away.
Wait for the alert, accept it, and check the result says Delayed alert closed.

Locator tip: the click finishes before the alert appears, so don't add a fixed wait. expect keeps retrying until the result text changes, which gives the alert time to show and be handled.

Show Playwright solution

test('delayed alert', async ({ page }) => {
  const result = page.getByTestId('delayed-alert-result');
  page.once('dialog', (dialog) => dialog.accept());

  await page.getByRole('button', { name: 'Show alert in 2 seconds' }).click();
  await expect(result).toHaveText('Alert coming…');

  // expect retries for up to 5 seconds by default, long enough for the alert
  await expect(result).toHaveText('Delayed alert closed');
});

Modal dialog

A dialog built into the page with HTML. Unlike a browser pop-up, it's a normal element you locate and click.

Terms not accepted yet

Try this

Open the terms and check the dialog called Terms of use is visible.
Press Escape and check it closes and the result says Dialog closed without accepting.
Open it again, click Accept, and check the result says Terms accepted.

Locator tip: page.getByRole('dialog', { name: 'Terms of use' }) finds the dialog by its heading. Look for buttons inside it, so Accept can't match a button elsewhere on the page.

Show Playwright solution

test('modal dialog', async ({ page }) => {
  const openTerms = page.getByRole('button', { name: 'Read the terms' });
  const dialog = page.getByRole('dialog', { name: 'Terms of use' });
  const result = page.getByTestId('dialog-result');

  await openTerms.click();
  await expect(dialog).toBeVisible();
  await page.keyboard.press('Escape');
  await expect(dialog).toBeHidden();
  await expect(result).toHaveText('Dialog closed without accepting');

  await openTerms.click();
  await dialog.getByRole('button', { name: 'Accept' }).click();
  await expect(dialog).toBeHidden();
  await expect(result).toHaveText('Terms accepted');
});