claude-skills-reference/engineering-team/playwright-pro/templates/settings/notification-prefs.md

Notification Preferences Template

Tests toggling notification channels and saving preferences.

Prerequisites

• Authenticated session via {{authStorageStatePath}}
• Settings page at {{baseUrl}}/settings/notifications

---

TypeScript

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

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

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

  // Happy path: enable email notifications
  test('enables email notifications', async ({ page }) => {
    const emailToggle = page.getByRole('switch', { name: /email notifications/i });
    if (!(await emailToggle.isChecked())) {
      await emailToggle.click();
    }
    await expect(emailToggle).toBeChecked();
    await page.getByRole('button', { name: /save|update/i }).click();
    await expect(page.getByRole('alert')).toContainText(/preferences.*saved|updated/i);
  });

  // Happy path: disable push notifications
  test('disables push notifications', async ({ page }) => {
    const pushToggle = page.getByRole('switch', { name: /push notifications/i });
    if (await pushToggle.isChecked()) {
      await pushToggle.click();
    }
    await expect(pushToggle).not.toBeChecked();
    await page.getByRole('button', { name: /save/i }).click();
    await expect(page.getByRole('alert')).toContainText(/saved/i);
  });

  // Happy path: preferences persist after reload
  test('saved preferences persist after page reload', async ({ page }) => {
    const emailToggle = page.getByRole('switch', { name: /email notifications/i });
    const wasChecked = await emailToggle.isChecked();
    await emailToggle.click();
    await page.getByRole('button', { name: /save/i }).click();
    await expect(page.getByRole('alert')).toContainText(/saved/i);
    await page.reload();
    if (wasChecked) {
      await expect(emailToggle).not.toBeChecked();
    } else {
      await expect(emailToggle).toBeChecked();
    }
  });

  // Happy path: notification frequency selector
  test('changes notification frequency', async ({ page }) => {
    await page.getByRole('combobox', { name: /frequency|digest/i }).selectOption('{{frequency}}');
    await page.getByRole('button', { name: /save/i }).click();
    await expect(page.getByRole('alert')).toContainText(/saved/i);
    await page.reload();
    await expect(page.getByRole('combobox', { name: /frequency|digest/i })).toHaveValue('{{frequency}}');
  });

  // Error case: save fails — preferences not changed
  test('shows error when save fails', async ({ page }) => {
    await page.route('{{baseUrl}}/api/settings/notifications*', route =>
      route.fulfill({ status: 500, body: JSON.stringify({ error: 'Server error' }) })
    );
    await page.getByRole('switch', { name: /email notifications/i }).click();
    await page.getByRole('button', { name: /save/i }).click();
    await expect(page.getByRole('alert')).toContainText(/error|failed to save/i);
  });

  // Edge case: unsubscribe all shows confirmation
  test('shows confirmation before unsubscribing all', async ({ page }) => {
    await page.getByRole('button', { name: /unsubscribe all/i }).click();
    await expect(page.getByRole('dialog', { name: /unsubscribe/i })).toBeVisible();
    await page.getByRole('button', { name: /cancel/i }).click();
    // Still subscribed
    await expect(page.getByRole('switch', { name: /email notifications/i })).toBeChecked();
  });
});

---

JavaScript

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

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

  test('saves notification preferences', async ({ page }) => {
    await page.goto('{{baseUrl}}/settings/notifications');
    const toggle = page.getByRole('switch', { name: /email notifications/i });
    await toggle.click();
    await page.getByRole('button', { name: /save/i }).click();
    await expect(page.getByRole('alert')).toContainText(/saved/i);
  });

  test('preferences persist after reload', async ({ page }) => {
    await page.goto('{{baseUrl}}/settings/notifications');
    const toggle = page.getByRole('switch', { name: /email notifications/i });
    const was = await toggle.isChecked();
    await toggle.click();
    await page.getByRole('button', { name: /save/i }).click();
    await page.reload();
    was
      ? await expect(toggle).not.toBeChecked()
      : await expect(toggle).toBeChecked();
  });

  test('shows error when save fails', async ({ page }) => {
    await page.goto('{{baseUrl}}/settings/notifications');
    await page.route('{{baseUrl}}/api/settings/notifications*', r =>
      r.fulfill({ status: 500, body: '{}' })
    );
    await page.getByRole('button', { name: /save/i }).click();
    await expect(page.getByRole('alert')).toContainText(/error|failed/i);
  });
});

Variants

Variant	Description
Enable email	Toggle on → saved → success
Disable push	Toggle off → saved
Persists reload	Saved state survives page reload
Frequency selector	Dropdown value saved and restored
Save error	Server error → error alert
Unsubscribe all	Confirmation dialog before all disabled