Cypress / Scenario
The Modal That Sometimes Was
A promo modal appears for some users, so someone wrote an if statement. Now checkout.cy.ts fails three runs out of ten and nobody trusts the pipeline.
- Difficulty
- Medium
- Format
- Scenario
- Points
- 150
- Estimate
- 12 min
// MISSION BRIEF
Your Mission
You have inherited a checkout spec that 'handles' a promo modal with a conditional DOM check. It flakes in CI and the last three people to touch it made it worse.
Read the spec and the CI evidence, then make the calls: why it flakes, what the real design flaw is, and which fixes actually hold. Decisions are weighted; the diagnosis and the redesign carry the most points.
// FIRST CONTACT
Battle teaser
First artifact
checkout.cy.ts (excerpt)
Why does the conditional check fail to protect the test?
- AIt samples the DOM at one instant; the campaigns response has a p95 of 3.4s, so on slow runs the modal renders AFTER the check already decided it was absent
- Bcy.get('body') is not allowed before interacting with elements
- CThe modal renders in a shadow root the check cannot reach
- DjQuery's .find cannot see data-cy attributes
Answers, scoring, hints, and the full battle stay sealed.
// SKILL TAGS
cypressflakeanti-patternsweb