Widget practice · Notifications

Toasts & auto-dismiss notifications

Trigger toasts in four flavours (success / error / warn / info) with a configurable duration, then practise asserting visibility before they vanish — and asserting they're gone after they do. The live region is at role="status" with aria-live="polite".

Trigger a toast

Toasts auto-dismiss after the configured duration unless you click the close button.

Flavour

Duration (ms)

Title

Message

id=show-btn · show-3-btn · dismiss-all · toast-region data-testid=show-toast · show-three · dismiss-all · toast-flavour · toast-duration region=role=status · aria-live=polite · data-testid=toast-region each toast=role=alert · data-testid=toast-{n} · data-flavour=success/error/warn/info

No toasts shown yet.

What students should practise

Click Show toast, assert it's visible, then assert it's gone after the duration.
Use expect(toast).toBeVisible({ timeout: 200 }) to catch fast toasts.
Use expect(toast).toBeHidden({ timeout: 4000 }) to wait it out.
Stack three toasts and assert locator('[data-testid^="toast-"]').count() equals 3.
Click the close button on a specific toast; assert only that one disappeared.
Listen on the toast log to assert each toast was logged with its flavour.

Playwright solutionTiming-sensitive assertions on auto-dismissing UI. Show solution

// 1) Show, assert visible, assert gone
await page.getByTestId('toast-flavour').selectOption('success');
await page.getByTestId('toast-duration').fill('2000');
await page.getByTestId('show-toast').click();

const toast = page.locator('[data-testid^="toast-"]').first();
await expect(toast).toBeVisible();
await expect(toast).toContainText('Your changes have been saved');
await expect(toast).toBeHidden({ timeout: 3500 });

// 2) Stack three and count
await page.getByTestId('show-three').click();
await expect(page.locator('[data-testid^="toast-"]')).toHaveCount(3);

// 3) Close just the second toast and assert count drops
await page.getByTestId('toast-2').getByRole('button', { name: 'Close' }).click();
await expect(page.locator('[data-testid^="toast-"]')).toHaveCount(2);