Loading challenge...
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
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-failfirst, then click#like-button; assert#like-countREVERTS 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.fulfillto inject the500for/api/lab/likeinstead 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
