Handle a JavaScript Alert

The concept

alert(), confirm() and prompt() open native browser dialogs that pause the page's JavaScript until someone responds. Playwright exposes them through the dialog event. By default, if no listener is registered, Playwright dismisses dialogs automatically, which means a confirm() returns false and your “Delete” action quietly does nothing.

To control the outcome, register a listener before the action that opens the dialog. Inside it you can read dialog.message(), then call dialog.accept() (optionally with prompt text) or dialog.dismiss().

Order matters. The listener has to exist before the click, because the dialog appears during the click.

The fragile version

await page.getByRole('button', { name: 'Delete' }).click();
page.on('dialog', d => d.accept());

Why it breaks: The listener is attached after the dialog has already opened and been auto-dismissed, so the deletion is cancelled and the test checks the wrong outcome.

A robust Playwright version

page.once('dialog', async dialog => {
  expect(dialog.message()).toContain('Are you sure');
  await dialog.accept();
});
await page.getByRole('button', { name: 'Delete' }).click();
await expect(page.getByText('Item deleted')).toBeVisible();

The listener is ready first, handles exactly one dialog, and the test asserts the result of accepting it.

This is a general example on a made-up page, not the challenge’s reference solution.

Common mistakes

• Registering the listener after the triggering action.
• Using page.on when you mean one dialog; page.once avoids handling later dialogs by surprise.
• Forgetting to accept or dismiss inside a listener, which leaves the page stuck.

FAQ