Widget practice · Dialogs

Native dialogs & modal stacks

Three browser-native dialogs (alert / confirm / prompt) plus a custom modal that supports stacking and Escape-to-close. Native dialogs are intercepted by Playwright via page.on('dialog', ...); custom modals are just DOM you query normally.

① Browser-native dialogs

These call the browser's alert() / confirm() / prompt(). Playwright must register a dialog handler before clicking.

data-testid=show-alert / show-confirm / show-prompt / show-beforeunload handler=page.on('dialog', d => d.accept(...) | d.dismiss()) output=data-testid=dialog-output

No native dialog interaction yet.

② Custom modal — focus trap + Escape

A regular DOM modal — visible via data-testid="modal-confirm". Click Open another to stack a second one and confirm Playwright finds the topmost.

data-testid=open-modal / open-stacked / modal-confirm / modal-stacked / modal-cancel / modal-confirm-action role=dialog · aria-modal=true keys=Escape closes top modal

What students should practise

Register a one-shot page.once('dialog', ...) before clicking Show alert; assert the message.
Use dialog.dismiss() on the confirm and verify the page logs dismissed: true.
Use dialog.accept('Hello') on the prompt and assert the output reflects your value.
Open the custom modal, fill the input, press Enter, and assert the output JSON.
Stack a second modal, press Escape, and confirm only the top one closed.

Playwright solutionNative dialog handlers + custom modal interaction. Show solution

// 1) Native alert — register handler first, then click
page.once('dialog', async (dialog) => {
  expect(dialog.type()).toBe('alert');
  expect(dialog.message()).toContain('Test Automation');
  await dialog.accept();
});
await page.getByTestId('show-alert').click();

// 2) Confirm — dismiss it
page.once('dialog', (d) => d.dismiss());
await page.getByTestId('show-confirm').click();
await expect(page.getByTestId('dialog-output'))
  .toContainText('"accepted":false');

// 3) Prompt — accept with a value
page.once('dialog', (d) => d.accept('Hello from Playwright'));
await page.getByTestId('show-prompt').click();
await expect(page.getByTestId('dialog-output'))
  .toContainText('Hello from Playwright');

// 4) Custom modal — DOM-level interaction
await page.getByTestId('open-modal').click();
const modal = page.getByTestId('modal-confirm');
await expect(modal).toBeVisible();
await modal.getByRole('textbox').fill('Aarav');
await modal.getByTestId('modal-confirm-action').click();
await expect(modal).toBeHidden();

// 5) Stack + Escape
await page.getByTestId('open-modal').click();
await page.getByTestId('open-stacked').click();
await page.keyboard.press('Escape');
await expect(page.getByTestId('modal-stacked')).toBeHidden();
await expect(page.getByTestId('modal-confirm')).toBeVisible();

Mini practice · Classic 3-button drill

JavaScript Alerts

The textbook drill — three buttons, three native dialogs, one result line. Alert · Confirm · Prompt. Hook a Playwright page.on('dialog', …) handler before the click, then assert the data-testid="alerts-result" text matches.

Click the button

Each button fires its native dialog. The result line updates after you accept / dismiss / enter text.

id=js-alert · js-confirm · js-prompt · alerts-result data-testid=js-alert / js-confirm / js-prompt / alerts-result messages: 'I am a JS Alert' · 'I am a JS Confirm' · 'I am a JS prompt'

Result: —

What to practise

Register page.once('dialog', d => d.accept()) before clicking Click for JS Alert; assert result reads "You successfully clicked an alert".
Confirm — try accept() first, then re-run with dismiss(); assert result is "You clicked: Ok" vs "You clicked: Cancel".
Prompt — d.accept('Aarav'); assert result is "You entered: Aarav".
Prompt dismiss — d.dismiss(); assert result is "You entered: null".
Read the dialog.type() and dialog.message() values to verify exactly what JS sent.

Playwright solution4 cases: alert, confirm OK, prompt with text, prompt dismiss. Show solution

// 1) Alert — accept it, assert result
page.once('dialog', async dialog => {
  expect(dialog.type()).toBe('alert');
  expect(dialog.message()).toBe('I am a JS Alert');
  await dialog.accept();
});
await page.getByTestId('js-alert').click();
await expect(page.getByTestId('alerts-result'))
  .toHaveText('You successfully clicked an alert');

// 2) Confirm OK
page.once('dialog', d => d.accept());
await page.getByTestId('js-confirm').click();
await expect(page.getByTestId('alerts-result'))
  .toHaveText('You clicked: Ok');

// 3) Confirm Cancel
page.once('dialog', d => d.dismiss());
await page.getByTestId('js-confirm').click();
await expect(page.getByTestId('alerts-result'))
  .toHaveText('You clicked: Cancel');

// 4) Prompt with text
page.once('dialog', d => d.accept('Aarav'));
await page.getByTestId('js-prompt').click();
await expect(page.getByTestId('alerts-result'))
  .toHaveText('You entered: Aarav');

// 5) Prompt dismiss → null
page.once('dialog', d => d.dismiss());
await page.getByTestId('js-prompt').click();
await expect(page.getByTestId('alerts-result'))
  .toHaveText('You entered: null');