Playwright / Scenario

The Case of the Vanishing Toast

A save-confirmation test fails one run in five, CI only. The trace already knows why. Read it like an investigator and pick the fix that is not a bigger timeout.

Difficulty
Medium
Format
Scenario
Points
150
Estimate
14 min

// MISSION BRIEF

Your Mission

checkout-settings.spec.ts fails intermittently in CI: the success toast "Settings saved" is never seen. Locally it has never failed once. A teammate proposes waitForTimeout(10000) and calls it pragmatic.

You pull the trace from the failed retry. Walk the timeline, correlate the network lane, and make the calls.

Decisions are weighted; the diagnosis is worth the most.

// FIRST CONTACT

Battle teaser

First artifact

checkout-settings.spec.ts (excerpt)

Root cause, per the trace:

  1. AThe click never actually fired, the button was covered
  2. BThe toast component has a rendering bug in headless browsers
  3. CgetByRole('status') is the wrong locator for a toast
  4. DThe save API takes 6+ seconds under nightly load, exceeding the 5s expect timeout, so the assertion gives up before the toast can appear
Answers, scoring, hints, and the full battle stay sealed.

// SKILL TAGS

playwrighttrace-viewerflakinessci-cddebugging