Overlays

Toast Messages

Beginner

No toasts yet.

Live widget · interact freely

Manual test goal

Fire a success toast and verify it auto-dismisses; fire an error toast and verify it stays until dismissed.

Expected result

Success toast disappears after ~3s; error toast persists until the close affordance is clicked.

Stable selectors

Fire success[data-testid="toast-success"]
Fire error[data-testid="toast-error"]
Toast region[data-testid="toast-region"]

Reference Playwright spec

toasts.spec.ts

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

test('toast region announces success and error', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/toasts');

  await page.getByTestId('toast-success').click();
  await expect(page.getByTestId('toast-region')).toContainText('Saved');

  await page.getByTestId('toast-error').click();
  await expect(page.getByTestId('toast-region')).toContainText('Failed');
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idletoasts.spec.ts

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

# console output will stream here