Loading challenge...
Collaborative Editor
Real-time collaborative text editing
Collaborative Editor
Real-time multi-user editing
🟢 ConnectedConflicts resolved: 0
Active users:
You
Alice
Alice
Welcome to the collaborative editor! Multiple users can edit simultaneously.
Operation History
Recent edits from all users
(0 operations)
No operations yet. Start typing or enable simulation.
Testing Scenarios
Key areas to test
Presence
- • User avatars show active collaborators
- • Cursors indicate editing positions
- • Users join/leave in real-time
Conflict Resolution
- • Operational Transform (OT) merges edits
- • Last-write-wins for conflicts
- • Offline edits sync on reconnect
Network
- • Handle disconnection gracefully
- • Auto-reconnect with backoff
- • Queue operations while offline
Operations
- • Insert, delete, format operations
- • Operation history for undo/redo
- • Batched sync for performance
Automation Tips
Testing hints
// Test collaborative editing
await page.click('[data-testid="toggle-simulation"]');
// Verify users join
await expect(page.locator('[data-testid="active-users"]'))
.toContainText('Alice');
// Check cursor positions update
const cursor = page.locator('[data-testid="cursor-user-1"]');
const initialLeft = await cursor.getAttribute('style');
await page.waitForTimeout(3000);
const newLeft = await cursor.getAttribute('style');
expect(initialLeft).not.toBe(newLeft);
// Test disconnect/reconnect
await page.click('[data-testid="simulate-disconnect"]');
await expect(page.locator('[data-testid="connection-status"]'))
.toHaveText('🔴 Disconnected');
await expect(page.locator('[data-testid="connection-status"]'))
.toHaveText('🟢 Connected', { timeout: 5000 });
// Verify operation log
await page.locator('[data-testid="editor"]').fill('Test input');
await expect(page.locator('[data-testid="operation-log"]'))
.toContainText('insert');
