Overlays

Alerts

Beginner

Click the trigger to fire a real window.confirm. Accept it to mark the chip as "accepted".

none

Live widget · interact freely

Manual test goal

Trigger a native browser alert, accept it, and verify the on-page message updates accordingly.

Expected result

Accepting the dialog updates the result chip to 'accepted'; dismissing updates to 'dismissed'.

Stable selectors

Trigger alert[data-testid="alert-fire"]
Result chip[data-testid="alert-result"]

Reference Playwright spec

alerts.spec.ts

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

test('handle native alert', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/alerts');

  page.once('dialog', async (d) => {
    expect(d.type()).toBe('confirm');
    await d.accept();
  });

  await page.getByTestId('alert-fire').click();
  await expect(page.getByTestId('alert-result')).toHaveText('accepted');
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idlealerts.spec.ts

https://lab.hakdogan.com/practice/alerts

# console output will stream here