Manuals / Cypress / Ch 3

A · SetupBeginner55 min read

3. Selectors & assertions that stick

Cypress · 48 pages source format

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.

What you'll learn

  • data-cy / roles / labels
  • should vs and / then
  • Debugging failures

Selector rules

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

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.

Clear?

Chaining and should

cy.get(...).should("be.visible").and("contain", "text") — assertions retry automatically.

Do this now

Write 5 assertions for inventory page: title, item count, sort dropdown, cart badge, footer.

Clear?

Ban cy.wait(ms)

cy.wait(3000) hides races. Use cy.intercept aliases or should with timeout instead.

Do this now

Search your specs for cy.wait(number). Replace every instance.

Clear?

Negative assertions

should("not.exist"), should("be.disabled") — prove error states, not just happy paths.

Do this now

Test locked_out_user login shows error message and stays on login page.

Clear?

Checklist