Pathwise

Manuals / Cypress / Chapter 3

A · Setup · beginner · Week 1–2 · Chapter 3 of 12

Selectors & assertions that stick

Retry-ability is Cypress’s gift. Do not fight it with arbitrary waits. Choose locators the app can keep stable and assert what users care about.

Path progress
19%

Step 1 of 4

Selector rules

data-cy / data-testid / roles over brittle CSS. Avoid nth-child and deep DOM chains.

Selector rulesDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Selector rulesdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Add data-cy attributes to a local HTML toy page. Select them from Cypress.

Pro tip: Document selector policy in SELECTORS.md — same as any pro team.

Was this step clear?
Chapter learning outcomes
  • data-cy / roles / labels
  • should vs and / then
  • Debugging failures

Clear these before you leave

Side quest

Selector refactor

Take 3 brittle CSS selectors. Rewrite with data-cy or contains. Commit before/after in PR.