TESTHEON Practice Lab

Component Lab D · Interruptions and feedback

Dialogs, Modals, and Toasts

Handle native browser dialogs, accessible application modals, and deterministic toast notifications with visible captured outcomes.

Start the fixtureRead the E2E guide

PRACTICE FIXTURE — intentionally built for automation practice

Native browser dialogs

Each browser-owned dialog writes its accepted or dismissed result into the page after Playwright handles it.

No browser dialog handled.

Accessible application modals

Native dialog primitives provide a focus boundary and Escape behavior; every close path reports visibly.

Simple status modal

The synthetic run is ready.

Archive synthetic run?

This changes only visible fixture state.

Parent modal

Open a second modal above this one.

Child modal

This is the active nested layer.

API response modal

Response not loaded.

Delayed modal content

Choose Load delayed content.

Scrollable release notes

Check 1: deterministic practice content remains inside the modal scroll region.

Check 2: deterministic practice content remains inside the modal scroll region.

Check 3: deterministic practice content remains inside the modal scroll region.

Check 4: deterministic practice content remains inside the modal scroll region.

Check 5: deterministic practice content remains inside the modal scroll region.

Check 6: deterministic practice content remains inside the modal scroll region.

Check 7: deterministic practice content remains inside the modal scroll region.

Check 8: deterministic practice content remains inside the modal scroll region.

Check 9: deterministic practice content remains inside the modal scroll region.

Check 10: deterministic practice content remains inside the modal scroll region.

Check 11: deterministic practice content remains inside the modal scroll region.

Check 12: deterministic practice content remains inside the modal scroll region.

Toast notifications

Success and info use status semantics; error and warning use alert semantics. Delay and dismissal are controlled.

No toast shown.

Passing examples

Start with observable behavior

These snippets match executable tests stored inexamples/playwright-ts/.

Handle a browser prompt
page.on('dialog', async (dialog) => {
  expect(dialog.type()).toBe('prompt');
  expect(dialog.message()).toBe('Name this synthetic run');
  await dialog.accept('Nightly 4803');
});
await page.getByRole('button', { name: 'Open prompt' }).click();
await expect(page.getByTestId('browser-dialog-result')).toContainText('Nightly 4803');
Assert toast semantics
await page.getByRole('button', { name: 'Show success toast' }).click();
await expect(page.getByRole('status').filter({ hasText: 'Saved successfully' })).toBeVisible();