4.6Offline Data Sync Testing

One of the hardest PWA scenarios: user makes changes offline, then comes back online. Changes must sync without data loss or conflicts.

test('offline changes sync when connectivity restored', async ({ page, context }) => {
    await page.goto('/todo');
    await page.waitForLoadState('networkidle');

    // Go offline
    await context.setOffline(true);

    // Add items while offline
    await page.fill('[data-testid="new-todo-input"]', 'Buy groceries');
    await page.click('[data-testid="add-todo-btn"]');
    await page.fill('[data-testid="new-todo-input"]', 'Walk the dog');
    await page.click('[data-testid="add-todo-btn"]');

    // Verify items appear in the UI
    const offlineItems = await page.locator('[data-testid="todo-item"]').count();
    expect(offlineItems).toBeGreaterThanOrEqual(2);

    // Verify pending sync indicator
    await expect(page.locator('[data-testid="sync-pending"]')).toBeVisible();

    // Restore connectivity
    await context.setOffline(false);

    // Wait for sync to complete
    await expect(page.locator('[data-testid="sync-complete"]')).toBeVisible({ timeout: 10000 });

    // Reload and verify data persisted on server
    await page.reload();
    await page.waitForLoadState('networkidle');
    const syncedItems = await page.locator('[data-testid="todo-item"]').count();
    expect(syncedItems).toBeGreaterThanOrEqual(2);
});

PWA testing requires offline-first thinking. Every feature must be tested across three states: online, offline, and transitioning between the two. This is the testing discipline that separates a reliable PWA from a website with a service worker bolted on.