Multi-Tab Notifications

This Tab: 3guhc7

Connected Tabs: 0

// Test notifications across tabs
const page1 = await context.newPage();
const page2 = await context.newPage();

await page1.goto('/challenges/multi-tab-notification');
await page2.goto('/challenges/multi-tab-notification');

// Send notification from tab 1
await page1.fill('#notification-title', 'Test Alert');
await page1.fill('#notification-message', 'Hello from tab 1');
await page1.click('#send-notification');

// Verify notification appeared in tab 2
await expect(page2.locator('[data-notification-type="info"]'))
  .toBeVisible();
await expect(page2.locator('#unread-badge')).toHaveText('1');

// Mark as read in tab 2
await page2.locator('[data-notification-type="info"]').first().click();
await expect(page2.locator('[data-read="true"]')).toBeVisible();

• ✓ Use [data-type] attribute to select notification type: info, success, warning, error
• ✓ Quick send with #quick-info, #quick-success, #quick-warning, #quick-error buttons
• ✓ Verify notifications with [data-notification-id] and [data-notification-type] attributes
• ✓ Check read state using [data-read] attribute (true/false) on notification items
• ✓ Test bulk actions with #mark-all-read and #clear-all buttons