Loading challenge...
Multi-Tab Conflict
Handle concurrent edits across tabs
Document Editor
Edit and save to trigger cross-tab sync
Version: 1 | Last edited by: system
Status
Tab and conflict information
Tab ID: 3dm40h
Conflicts Resolved: 0
Event Log
No events yet...
Conflict History
Past conflicts resolved
No conflicts yet. Try editing in multiple tabs simultaneously!
Testing Guide
How to trigger and test conflicts
How to Trigger a Conflict:
- Open this page in two tabs
- Edit the document in Tab 1 (but don't save)
- Edit and Save the document in Tab 2
- Now try to Save in Tab 1 - conflict dialog appears!
Playwright Test Example:
// Test conflict detection and resolution
const page1 = await context.newPage();
const page2 = await context.newPage();
await page1.goto('/challenges/multi-tab-conflict');
await page2.goto('/challenges/multi-tab-conflict');
// Edit in tab 1 without saving
await page1.fill('#doc-content', 'Content from Tab 1');
await expect(page1.locator('#unsaved-indicator')).toBeVisible();
// Edit and save in tab 2
await page2.fill('#doc-content', 'Content from Tab 2');
await page2.click('#save-btn');
// Save in tab 1 triggers conflict
await page1.click('#save-btn');
await expect(page1.locator('#conflict-modal')).toBeVisible();
// Resolve conflict
await page1.click('#resolve-local');
await expect(page1.locator('#conflict-modal')).not.toBeVisible();Testing Tips
Automation hints
- ✓ Track document version with #doc-version and last editor with #doc-editor selectors
- ✓ Detect unsaved changes by checking visibility of #unsaved-indicator badge
- ✓ Handle conflict modal with #conflict-modal, #conflict-local, #conflict-remote selectors
- ✓ Test all resolution strategies: #resolve-local, #resolve-remote, #resolve-merge buttons
- ✓ Verify conflict history with [data-conflict-index] and #conflict-count selectors
