claude-skills-reference/engineering-team/playwright-pro/templates/notifications/notification-center.md

Notification Center Template

Tests full notification list, filtering, and bulk clear.

Prerequisites

• Authenticated session via {{authStorageStatePath}}
• Mix of read/unread notifications seeded
• App running at {{baseUrl}}

---

TypeScript

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

test.describe('Notification Center', () => {
  test.use({ storageState: '{{authStorageStatePath}}' });

  test.beforeEach(async ({ page }) => {
    await page.goto('{{baseUrl}}/notifications');
  });

  // Happy path: notification list visible
  test('displays notification list', async ({ page }) => {
    await expect(page.getByRole('heading', { name: /notifications/i })).toBeVisible();
    await expect(page.getByRole('list', { name: /notifications/i })).toBeVisible();
    const items = page.getByRole('listitem');
    await expect(items.first()).toBeVisible();
  });

  // Happy path: filter by unread
  test('filters to show only unread notifications', async ({ page }) => {
    await page.getByRole('button', { name: /unread/i }).click();
    const items = page.getByRole('listitem');
    const count = await items.count();
    for (let i = 0; i < count; i++) {
      await expect(items.nth(i)).toHaveAttribute('aria-label', /unread/i);
    }
  });

  // Happy path: filter by type
  test('filters notifications by type', async ({ page }) => {
    await page.getByRole('combobox', { name: /type|category/i }).selectOption('{{notificationType}}');
    const items = page.getByRole('listitem');
    await expect(items.first()).toContainText(/{{notificationTypeLabel}}/i);
  });

  // Happy path: mark single as read
  test('marks individual notification as read', async ({ page }) => {
    const first = page.getByRole('listitem').first();
    await first.getByRole('button', { name: /mark.*read/i }).click();
    await expect(first).not.toHaveAttribute('data-unread', 'true');
  });

  // Happy path: clear all notifications
  test('clears all notifications', async ({ page }) => {
    await page.getByRole('button', { name: /clear all/i }).click();
    await page.getByRole('dialog').getByRole('button', { name: /confirm/i }).click();
    await expect(page.getByText(/no notifications|all cleared/i)).toBeVisible();
    await expect(page.getByRole('listitem')).toHaveCount(0);
  });

  // Happy path: pagination / load more
  test('loads more notifications on scroll or button click', async ({ page }) => {
    const initialCount = await page.getByRole('listitem').count();
    await page.getByRole('button', { name: /load more/i }).click();
    const newCount = await page.getByRole('listitem').count();
    expect(newCount).toBeGreaterThan(initialCount);
  });

  // Error case: empty state after clearing
  test('shows empty state after clearing all', async ({ page }) => {
    await page.getByRole('button', { name: /clear all/i }).click();
    await page.getByRole('dialog').getByRole('button', { name: /confirm/i }).click();
    await expect(page.getByText(/no notifications/i)).toBeVisible();
  });

  // Edge case: notification links to source
  test('clicking notification navigates to source', async ({ page }) => {
    await page.getByRole('listitem').first().getByRole('link').click();
    await expect(page).not.toHaveURL('{{baseUrl}}/notifications');
  });
});

---

JavaScript

const { test, expect } = require('@playwright/test');

test.describe('Notification Center', () => {
  test.use({ storageState: '{{authStorageStatePath}}' });

  test('displays notification list', async ({ page }) => {
    await page.goto('{{baseUrl}}/notifications');
    await expect(page.getByRole('list', { name: /notifications/i })).toBeVisible();
    await expect(page.getByRole('listitem').first()).toBeVisible();
  });

  test('filters to unread only', async ({ page }) => {
    await page.goto('{{baseUrl}}/notifications');
    await page.getByRole('button', { name: /unread/i }).click();
    await expect(page.getByRole('listitem').first()).toHaveAttribute('aria-label', /unread/i);
  });

  test('clears all notifications', async ({ page }) => {
    await page.goto('{{baseUrl}}/notifications');
    await page.getByRole('button', { name: /clear all/i }).click();
    await page.getByRole('dialog').getByRole('button', { name: /confirm/i }).click();
    await expect(page.getByText(/no notifications/i)).toBeVisible();
  });
});

Variants

Variant	Description
List display	Notification items visible
Unread filter	Only unread items shown
Type filter	Category filter scopes list
Mark single read	Item marked, styling changes
Clear all	Confirmation → empty state
Load more	Additional items appended
Empty state	No-notifications message post-clear
Source link	Click navigates away from center