E2E Tests for a Notifications Page

Problem/Feature Description

A web app has a notifications page that shows real-time updates. Write Playwright E2E tests.

The app runs on http://localhost:3000 with these pages:

• /notifications -- shows a list of notifications with:
  • Notification cards showing title, message, timestamp, and read/unread status
  • "Mark all as read" button in the header
  • Click on a notification to mark it as read and navigate to the related page
  • Bell icon in the navbar showing unread count badge
  • Empty state message when there are no notifications
• /settings/notifications -- notification preferences form with toggles for email, push, and in-app notifications

API endpoints:

• GET /api/notifications -- returns notification list
• PATCH /api/notifications/:id/read -- marks single notification as read
• POST /api/notifications/mark-all-read -- marks all as read
• GET /api/notifications/count -- returns unread count

Output Specification

Produce:

• playwright.config.ts -- Playwright configuration
• e2e/notifications.spec.ts -- E2E test file
• package.json -- with @playwright/test dependency listed

You may create additional files for good test organization.