Optimistic UI Rollback

A like button updates instantly then reverts on a server 500 — test the rollback branch, not just the click

What you will learn

Recognize that a happy-path click-then-assert test never exercises the rollback branch
Force a server 500 to test the failure/revert path deterministically
Assert state via stable data-* attributes (data-liked) instead of locale-dependent glyphs
Use route interception (route.fulfill) to inject failures and isolate client rollback logic

Optimistic UI Rollback

The like button updates instantly, then reconciles with the server — and rolls back if the server rejects the change

Clicking the heart flips the liked state and adjusts the count before the network request resolves. When POST /api/lab/like succeeds the UI keeps the optimistic value; when it fails the component reverts both the liked flag and the count, then shows an error.

Tick Force failure to make the request hit ?fail=1, which always responds 500 — the rollback branch only runs in that case.

Like & Observe

Toggle failure mode, click like, and watch whether the count sticks or reverts

Force failure (send ?fail=1)

Likes: 0

Testing Tips

Automation hints

✓ The naive click-then-assert test (click #like-button, assert count went up) NEVER exercises the rollback branch — the happy path always passes and hides the bug
✓ To cover rollback, check #force-fail first, then click #like-button; assert #like-count REVERTS to its original value and #like-errorappears with text containing "reverted"
✓ Assert the toggle via #like-button[data-liked] ("true"/"false") rather than the visible glyph — attributes are locale-proof
✓ In real Playwright, use route.fulfill to inject the 500 for /api/lab/like instead of relying on the checkbox — that isolates the client rollback logic from the server
✓ The optimistic update is visible for one tick before the fetch resolves — give the request ~800ms to settle before asserting the final reverted state

Related Challenges

Optimistic UI Rollback

The like button updates instantly, then reconciles with the server — and rolls back if the server rejects the change

Tick Force failure to make the request hit ?fail=1, which always responds 500 — the rollback branch only runs in that case.

Testing Tips

Automation hints

✓ The naive click-then-assert test (click #like-button, assert count went up) NEVER exercises the rollback branch — the happy path always passes and hides the bug
✓ To cover rollback, check #force-fail first, then click #like-button; assert #like-count REVERTS to its original value and #like-errorappears with text containing "reverted"
✓ Assert the toggle via #like-button[data-liked] ("true"/"false") rather than the visible glyph — attributes are locale-proof
✓ In real Playwright, use route.fulfill to inject the 500 for /api/lab/like instead of relying on the checkbox — that isolates the client rollback logic from the server
✓ The optimistic update is visible for one tick before the fetch resolves — give the request ~800ms to settle before asserting the final reverted state

Optimistic UI Rollback

What you will learn

Optimistic UI Rollback

Like & Observe

Testing Tips

Timer

Need Help?

Related Challenges

Dynamic Content

Dynamic Loading

Dynamic Controls

Optimistic UI Rollback

What you will learn

Optimistic UI Rollback

Like & Observe

Testing Tips

Timer

Need Help?

Related Challenges

Dynamic Content

Dynamic Loading

Dynamic Controls