AI Tools for Writing Playwright Tests That Verify Toast Noti

Toast notifications are an ubiquitous UI pattern in modern web applications. Users expect them to appear at the right time, stay visible long enough to be read, and disappear either automatically or through user interaction. Testing these behaviors thoroughly requires careful consideration of timing, visibility states, and interaction patterns. AI coding assistants can significantly accelerate the process of writing these tests, but understanding what makes a good toast test and how to prompt AI tools effectively remains essential.

Why Toast Notifications Are Tricky to Test

Toast notifications present unique testing challenges that differ from typical UI elements. The core difficulty lies in their ephemeral nature—they appear, potentially auto-dismiss, and can be manually closed. A test that works perfectly in one environment may fail in another due to timing variations, animation durations, or race conditions between the UI and your assertions.

When testing toast notifications, you need to verify several distinct behaviors: the toast appears after a trigger action, the toast remains visible for the correct duration, auto-dismissal happens at the expected time, manual dismissal works correctly, and the toast is removed from the DOM after dismissal. Each of these requires different Playwright strategies and timing considerations.

Writing Playwright Tests for Toast Notifications

The fundamental approach involves waiting for the toast to appear, verifying its content and visibility, checking timing-based behaviors, and confirming proper removal. Here’s a practical example that demonstrates testing these scenarios:

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

test.describe('Toast Notification Tests', () => {
  test('toast appears and auto-dismisses after timeout', async ({ page }) => {
    // Navigate to the page with toast functionality
    await page.goto('/dashboard');

    // Trigger the action that shows a toast
    await page.click('#save-button');

    // Wait for toast to appear in the DOM
    const toast = page.locator('.toast-notification');
    await expect(toast).toBeVisible();

    // Verify toast content
    await expect(toast).toContainText('Changes saved successfully');

    // Wait for auto-dismissal (assuming 5 second timeout)
    await expect(toast).not.toBeVisible({ timeout: 7000 });
  });

  test('toast can be manually dismissed', async ({ page }) => {
    await page.goto('/dashboard');
    await page.click('#save-button');

    const toast = page.locator('.toast-notification');
    await expect(toast).toBeVisible();

    // Click the dismiss button
    await toast.locator('.toast-close').click();

    // Verify immediate dismissal
    await expect(toast).not.toBeVisible();
  });

  test('toast is removed from DOM after dismissal', async ({ page }) => {
    await page.goto('/dashboard');
    await page.click('#save-button');

    const toast = page.locator('.toast-notification');
    await expect(toast).toBeVisible();

    // Wait for dismissal
    await page.waitForTimeout(6000);

    // Verify removal from DOM (not just hidden)
    await expect(toast).toHaveCount(0);
  });
});

How AI Tools Can Help

AI coding assistants like GitHub Copilot, Cursor, and Claude Code can accelerate toast test creation by generating boilerplate, suggesting assertions, and handling edge cases you might overlook. The key is providing adequate context in your prompts.

When using AI for toast tests, include the trigger action, expected toast behavior, any known timing requirements, and the HTML structure or CSS selectors of your toast component. The more context you provide, the more accurate the generated tests will be.

GitHub Copilot works well for generating standard test patterns. After writing the function that triggers a toast, Copilot often suggests test code that covers basic appearance and dismissal scenarios. You can improve results by adding comments describing what you want to test:

// Test that toast appears within 500ms of saving
// Test that toast auto-dismisses after 5 seconds
// Test that clicking X button closes the toast immediately

Cursor excels at understanding your entire codebase, including component implementations. If your toast component has specific props or configuration options, Cursor can generate tests that verify different configurations work correctly. It also handles TypeScript types well, reducing the chance of type-related test failures.

Claude Code provides strong reasoning about timing and async behavior, which is particularly valuable for toast tests. When prompted with specific timing requirements, it often generates tests with appropriate waits and timeout configurations.

Handling Animation and Timing Considerations

Toast notifications often include CSS animations for appearing and disappearing. Playwright’s default waiting strategies generally handle visible elements well, but animations can introduce timing issues. The toBeVisible() matcher waits for the element to be attached, stable, and have non-zero dimensions, which usually accounts for entry animations. However, exit animations may require additional waiting.

For toasts with fade-out animations, you might need to adjust your approach:

test('toast dismissal waits for exit animation', async ({ page }) => {
  await page.goto('/dashboard');
  await page.click('#save-button');

  const toast = page.locator('.toast-notification');
  await expect(toast).toBeVisible();

  // Manually dismiss
  await toast.locator('.toast-close').click();

  // Wait for animation class or transition
  await expect(toast).toHaveClass(/toast-exit/);

  // Then wait for removal
  await expect(toast).not.toBeAttached({ timeout: 1000 });
});

Testing Different Toast Types

Many applications support multiple toast types with different behaviors. An AI tool can help generate tests covering each variant:

test.each([
  { type: 'success', expectedText: 'Saved', duration: 5000 },
  { type: 'error', expectedText: 'Error', duration: 8000 },
  { type: 'warning', expectedText: 'Warning', duration: 6000 },
  { type: 'info', expectedText: 'Info', duration: 5000 },
])('toast type $type has correct duration', async ({ page }, testInfo) => {
  await page.goto('/dashboard');
  await page.click(`#show-${testInfo.type}-toast`);

  const toast = page.locator(`.toast-notification.${testInfo.type}`);
  await expect(toast).toBeVisible();

  await expect(toast).toContainText(testInfo.expectedText);
  await expect(toast).not.toBeVisible({ timeout: testInfo.duration + 1000 });
});

Best Practices for AI-Generated Toast Tests

When using AI tools to generate toast tests, apply these practices for reliable results. Always verify the timeout values in generated tests match your actual toast configuration. AI tools may assume generic values that don’t match your implementation. Specify explicit selectors rather than relying on AI to guess your CSS classes. Provide the actual HTML or component code when possible.

Include tests for edge cases like rapid trigger actions that spawn multiple toasts, scenarios where the user navigates away before the toast dismisses, and situations where the toast appears while another operation is in progress. AI tools can help identify these edge cases when prompted to think about “what could go wrong” or “edge cases.”

Finally, run the generated tests multiple times to identify flakiness. Toast timing tests are particularly susceptible to timing-related flakiness in CI environments. Adjust timeouts and waiting strategies as needed.

Tool Comparison for Toast Tests

Tool	Code Generation	Context Awareness	Edge Cases	Cost
GitHub Copilot	Good	Limited to file	Moderate	$10/month
Claude Code	Excellent	Full codebase	Excellent	$3/1M tokens
Cursor	Excellent	Excellent	Excellent	$20-40/month
Zed AI	Good	Excellent	Good	$100/year
ChatGPT Plus	Good	Limited	Moderate	$20/month

Real-World Toast Scenarios

Multiple Toast Types with Different Auto-Dismiss Times

test.describe('Multi-type Toast Scenarios', () => {
  test('different toast types have different durations', async ({ page }) => {
    const toastConfigs = [
      { type: 'success', text: 'Operation successful', duration: 3000 },
      { type: 'error', text: 'Error occurred', duration: 7000 },
      { type: 'warning', text: 'Be careful', duration: 5000 },
      { type: 'info', text: 'For your information', duration: 4000 }
    ];

    for (const config of toastConfigs) {
      // Trigger specific toast type
      await page.evaluate((type) => {
        window.showToast(type, 'test message');
      }, config.type);

      const toast = page.locator(`[data-toast-type="${config.type}"]`);
      await expect(toast).toBeVisible({ timeout: 1000 });

      // Verify it dismisses at expected time
      const dismissTimeout = config.duration + 500; // Add buffer
      await expect(toast).not.toBeVisible({ timeout: dismissTimeout });
    }
  });

  test('rapid successive toasts queue properly', async ({ page }) => {
    // Trigger 5 toasts in quick succession
    for (let i = 0; i < 5; i++) {
      await page.click('#show-toast');
      await page.waitForTimeout(100);
    }

    // Verify all are visible
    const toasts = page.locator('.toast-notification');
    await expect(toasts).toHaveCount(5);

    // Wait for queue to drain
    await expect(toasts).toHaveCount(0, { timeout: 15000 });
  });
});

Toast with Custom Actions

test('toast with action button', async ({ page }) => {
  await page.goto('/settings');

  // Trigger action that shows toast with button
  await page.click('#delete-account');

  const toast = page.locator('.toast-notification');
  await expect(toast).toBeVisible();
  await expect(toast).toContainText('Account deleted. Undo?');

  // Test undo action
  await toast.locator('[data-action="undo"]').click();

  // Verify undo worked (specific to your app)
  await expect(page.locator('[data-account-status]')).toContainText('Active');

  // Verify toast disappeared after action
  await expect(toast).not.toBeVisible();
});

CLI Commands for Test Generation

# Generate test from component
npx playwright codegen http://localhost:3000

# Run tests with verbose output
npx playwright test --reporter=list

# Debug flaky tests
npx playwright test --debug

# Take screenshots on failure (helpful for AI analysis)
npx playwright test --reporter=html --reporter=list

# Check toast test coverage
npx playwright test --grep "toast"

Debugging Flaky Toast Tests

When toast tests fail intermittently:

// Add debugging information
test('debug flaky toast behavior', async ({ page }) => {
  // Increase timeouts and add logging
  page.on('console', msg => console.log('PAGE:', msg.text()));

  await page.goto('/dashboard');
  await page.click('#show-toast');

  const toast = page.locator('.toast-notification');

  // Check if toast exists in DOM
  const isAttached = await toast.isAttached();
  console.log('Toast attached:', isAttached);

  // Check visibility state
  const isVisible = await toast.isVisible({ timeout: 500 }).catch(() => false);
  console.log('Toast visible:', isVisible);

  // Check computed styles that might affect visibility
  const opacity = await toast.evaluate(el =>
    window.getComputedStyle(el).opacity
  );
  console.log('Toast opacity:', opacity);

  // Wait with explicit visual inspection
  await toast.screenshot({ path: 'toast-visible.png' });
});

AI Prompt Best Practices for Toast Tests

When asking an AI tool to generate toast tests, be specific:

Bad prompt:
"Write tests for toast notifications"

Good prompt:
"Write Playwright tests that verify:
1. A toast appears within 200ms of clicking '#save-button'
2. The toast contains text 'Changes saved'
3. The toast auto-dismisses after 5 seconds
4. A close button with class 'toast-close' can dismiss it immediately
5. Multiple rapid toasts stack vertically
Use page.goto('/app/dashboard') as the starting point"

Common Toast Test Mistakes and Fixes

// MISTAKE: Racing with animations
test('wrong: dismissal too fast', async ({ page }) => {
  await page.click('#show');
  const toast = page.locator('.toast');
  await toast.click('.close');  // May click before animation complete
  // Toast might still be animating out!
});

// CORRECT: Wait for completion
test('right: wait for animation', async ({ page }) => {
  await page.click('#show');
  const toast = page.locator('.toast');

  // Wait for exit animation class or use waitForElementState
  await toast.click('.close');
  await expect(toast).toHaveClass(/exiting/);
  await page.waitForTimeout(300); // Animation duration
  await expect(toast).not.toBeAttached();
});

// MISTAKE: Hardcoded timeouts that fail in CI
test('wrong: CI-fragile timeouts', async ({ page }) => {
  await page.click('#show');
  await page.waitForTimeout(3000);  // Brittle!
  const toast = page.locator('.toast');
  await expect(toast).not.toBeVisible();
});

// CORRECT: Polling with timeout
test('right: reliable timeout handling', async ({ page }) => {
  await page.click('#show');
  const toast = page.locator('.toast');

  // Playwright's matcher handles polling automatically
  await expect(toast).not.toBeVisible({ timeout: 7000 });
});

Performance Testing Toast Implementation

test('performance: toast rendering', async ({ page }) => {
  await page.goto('/dashboard');

  // Measure rendering time for a single toast
  const startTime = Date.now();
  await page.click('#show-success-toast');
  const toast = page.locator('.toast-notification');
  await expect(toast).toBeVisible();
  const renderTime = Date.now() - startTime;

  console.log(`Toast render time: ${renderTime}ms`);
  expect(renderTime).toBeLessThan(500); // Should appear quickly
});

Integration with CI/CD

# .github/workflows/test-toast.yml
name: Toast Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18

      - run: npm ci
      - run: npx playwright install

      # Run just toast tests
      - run: npx playwright test --grep "toast"

      # Generate HTML report
      - if: always()
        run: npx playwright show-report

Built by theluckystrike — More at zovo.one