Notifications

Trigger success, info, warning, and error toasts; assert visibility/text; verify auto-dismiss and manual close behavior.

Beginner

Scenario

Notifications are easy to over-test with sleeps. Real automation should assert visible state, text content, and dismissal through Playwright's polling assertions.

No notifications yet. Success, info, and warning auto-dismiss; error waits for manual close.

Live widget · interact freely

Manual test checklist

1Fire success notification and confirm text
2Fire info notification and confirm it stacks with others
3Fire warning notification and wait for auto-dismiss
4Fire error notification and confirm it persists
5Click the manual close button and confirm the toast is removed

Expected result

Success, info, and warning notifications auto-dismiss; error remains until its Close button is clicked.

Automation challenge

Use `expect(toast).toBeVisible()`, `expect(toast).toContainText(...)`, `toBeHidden({ timeout })`, and the close button for manual dismissal.

Stable selectors

Success notification[data-testid="toast-success"]
Info notification[data-testid="toast-info"]
Warning notification[data-testid="toast-warning"]
Error notification[data-testid="toast-error"]
Toast region[data-testid="toast-region"]
Error toast[data-testid="toast-error-message"]
Error close[data-testid="toast-error-close"]

Locator strategy

Three levels from simple IDs to scoped Playwright locators. IDs and names are easy to learn but are not always the best long-term choice when labels change or components repeat.

Use simple IDs and names to understand how locating elements works.

1
2
3

await page.goto('https://lab.hakdogan.com/practice/notifications');

await page.locator('#toast-success').click();

Avoid as primary strategies

XPath (unless there is no alternative), long CSS chains, Tailwind-style utility class selectors, generated or unstable IDs, and volatile framework internals break when layout, styling, or DOM structure shifts.

1
2

await page.locator('.w-full.rounded-xl.border.bg-blue-500').fill('demo@example.com');
await page.locator('//div[2]/form/div[1]/input').fill('demo@example.com');

Reference Playwright spec

notifications.spec.ts

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

test('notifications show text, auto-dismiss, and close manually', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/notifications');

  await page.getByTestId('toast-success').click();
  const success = page.getByTestId('toast-success-message');
  await expect(success).toBeVisible();
  await expect(success).toContainText('profile saved');
  await expect(success).toBeHidden({ timeout: 5_000 });

  await page.getByTestId('toast-error').click();
  const error = page.getByTestId('toast-error-message');
  await expect(error).toBeVisible();
  await expect(error).toContainText('payment failed');

  await page.getByTestId('toast-error-close').click();
  await expect(error).toBeHidden();
});

Headed Test Playback

Simulated headed-browser flow — no real browser is launched.

Automation-style playback (Playwright-shaped logs). No real browser; no commands run on your machine.

Idlenotifications.spec.ts

Failure demos

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

playwright · headed · chromium0.00s

# awaiting Run Test · terminal scrolls automatically

Steps

Firing success toast
Asserting toast text
Waiting for auto-dismiss
Closing persistent error toast