🗂️ Writing & Organizing Tests

Writing & Organizing Tests: Think of the describe() / it() structure like a legal document hierarchy: describe() is the case heading (defines the scope of the behavior under scru

Think of the describe() / it() structure like a legal document hierarchy: describe() is the case heading (defines the scope of the behavior under scrutiny), and it() is a single individual claim — precise and independent, evaluable on its own regardless of whether other claims are true. But here's the question worth pausing on: if both before() and beforeEach() set things up, why does Cypress define two of them at all — why isn't one enough? before() prepares the entire case file once before any claim is heard (like seeding a database); beforeEach() wipes the table clean and resets before each individual claim is read — meaning it's this distinction that controls whether tests can leave side effects on each other. It's the direct equivalent of JUnit's @BeforeAll / @BeforeEach split in Java — only the names differ. The real QA risk: a test suite without beforeEach() becomes order-dependent; change the execution order and PASSing tests start FAILing, producing phantom failures that get labeled 'flaky' but are actually caused by broken test isolation.

Cypress uses Mocha's describe/context/it interface for test structure. describe() and context() are identical — both exist purely for readability. Every it() (or specify()) is an independent test scenario — the rule "every test must be able to run independently" appears word-for-word in Cypress's official documentation too.

describe / it / 4 Hooks

Micro Lab: Cypress — Command chaining

Replace the TODO line with the critical line from the expected solution. This is not a real runtime; the goal is to reinforce writing the correct structure in a controlled way.

.only and .skip — focusing during development

Step by Step: Cypress — Command chaining

Select with cy.get()

Select the target element with cy.get(locator)

Chain the action command: .click() / .type("text") / .select("option")

Cypress auto-retries — if command does not succeed within 4s it fails

Verify DOM change with .should("have.value", "text")

Run the same chain in CI with a different viewport, check responsive behavior

What is the Cypress UI interaction and verification order?