Loading challenge...
Multi-Tab Session
Sync session state across browser tabs
Tab Info
Connection status
Tab ID: bmn1wi
Connected Tabs: 0
Current Session
Synced data
User ID: Not logged in
Username: -
Theme: light
Language: en
Session Controls
Update session data
Theme:
Language:
Sync Log
Real-time sync events
No sync events yet...
Testing Guide
Playwright example
// Open two browser contexts (tabs)
const context1 = await browser.newContext();
const context2 = await browser.newContext();
const page1 = await context1.newPage();
const page2 = await context2.newPage();
// Navigate both to this page
await page1.goto('/challenges/multi-tab-session');
await page2.goto('/challenges/multi-tab-session');
// Login in first tab
await page1.fill('#username-input', 'testuser');
await page1.click('#login-btn');
// Verify session synced to second tab
await expect(page2.locator('[data-field="username"]'))
.toContainText('testuser');Testing Tips
Automation hints
- ✓ Create multiple browser contexts for tab isolation - each context simulates a separate tab
- ✓ Use #tab-id and #connected-count selectors to verify tab connection status
- ✓ Verify session sync by checking [data-field] attributes: username, theme, language
- ✓ Test theme/language changes with #theme-light, #theme-dark, #language-select selectors
- ✓ Check #sync-log for real-time sync events verification
