Toast Notifications

Click a button above to trigger a toast notification.

🎭

How to automate this page

Toasts are one of the most frequently missed elements in automation. These steps show exactly how to catch transient elements.

terminal # One-time setup
npm init playwright@latest

# Run your tests
npx playwright test

# Open the HTML report
npx playwright show-report

1 Clicking the success button shows a toast toast trigger ▼

Click the Success button. A toast element should appear inside the toast container almost immediately. Use toBeVisible() — Playwright will retry until it appears.

tetsing-lab.spec.ts

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

test('clicking success shows a success toast', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/toast-demo');

  await page.click('[data-testid=btn-toast-success]');

  await expect(page.locator('[data-testid=toast-success]')).toBeVisible();
});

2 Toast auto-dismisses after 3 seconds auto-dismiss ▼

Toasts are removed after 3 seconds. Assert it appears, then wait for it to disappear. toBeHidden() will retry until the element is gone from view.

tetsing-lab.spec.ts

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

test('toast disappears automatically after 3 seconds', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/toast-demo');

  await page.click('[data-testid=btn-toast-info]');
  await expect(page.locator('[data-testid=toast-info]')).toBeVisible();

  // It takes 3s + 0.2s fade — allow 5s to avoid flakiness
  await expect(page.locator('[data-testid=toast-info]'))
    .toBeHidden({ timeout: 5000 });
});

3 Clicking dismiss removes the toast immediately manual dismiss ▼

Click the × button inside the toast to dismiss it before the auto-dismiss timer fires. The toast should disappear well before the 3-second mark.

tetsing-lab.spec.ts

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

test('dismiss button removes the toast before auto-dismiss', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/toast-demo');

  await page.click('[data-testid=btn-toast-error]');
  const toast = page.locator('[data-testid=toast-error]');
  await expect(toast).toBeVisible();

  await toast.locator('[data-testid=btn-dismiss-toast]').click();

  // Should be gone much faster than 3 seconds
  await expect(toast).toBeHidden({ timeout: 1500 });
});

4 Multiple toasts stack in the container stacking ▼

Click all four buttons rapidly. The container should hold four toasts simultaneously. Count them with locator().count().

tetsing-lab.spec.ts

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

test('firing all 4 toasts stacks them in the container', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/toast-demo');

  await page.click('[data-testid=btn-toast-success]');
  await page.click('[data-testid=btn-toast-error]');
  await page.click('[data-testid=btn-toast-warning]');
  await page.click('[data-testid=btn-toast-info]');

  const toasts = page.locator('#tl-toast-container .tl-toast');
  await expect(toasts).toHaveCount(4);
});

🔐

Unlock Playwright Tutorial

Get the full automation guide for Toast Notifications — real test code, step by step.

€ 1.99 one-time

Unlock for €1.99 →

🔒 Secure checkout · Instant access · No subscription

🔔 Toast Notifications

Unlock Playwright Tutorial