Fix a flaky cart test
intermediate Flaky tests Challenge 15 of 22
This test checks that adding a product updates the cart badge. It passes on a fast laptop and fails on a busy CI agent. Make it reliable without slowing it down.
The shop lists products as rows (data-testid="product-row"), each with an Add to cart button. The badge next to the search box has data-testid="cart-count".
Requirements
- Remove both
waitForTimeoutcalls. - Assert the badge text with a web-first assertion (
await expect(locator).toHaveText(...)). - The test must pass with a fast and a slow API, and still fail when the badge never updates.
Expected output
Passes with a fast API (100ms) and a slow one (900ms), and fails when the badge never updates. No fixed waits.
Scenarios (3)
Your tests run once against each version of the demo app. They must pass on the working app and fail on every version with a planted bug.
- ○Fast API · must pass · API 100ms
- ○Slow API · must pass · API 900ms
- ○Bug: badge never updates · must catch
Checks (2)
- ○Does not use a fixed waitForTimeout
- ○Asserts the badge with a web-first assertion
Ctrl/⌘ + Enter to run tests · your code is saved in this browser
Results
Run the tests to see results here.
Demo app
The working app. You can click around it; your tests start from a fresh copy.