Why it blocks for test cases in Cypress? - Purpose & Use Cases

The Big Idea

Want your tests to stop failing randomly and start running smoothly every time?

The Scenario

Imagine you have many test steps to check a website, and you try to do them all at once without waiting for each to finish.

For example, clicking a button and immediately checking if a new page loaded, without waiting for the page to appear.

The Problem

Doing tests without waiting causes errors because the page or element might not be ready yet.

This makes tests fail randomly and wastes time fixing confusing errors.

The Solution

Using it blocks in Cypress lets you organize tests into small, clear steps that run one after another.

This way, Cypress waits for each step to finish before moving on, making tests reliable and easy to understand.

Before vs After

✗ Before

cy.get('#button').click();
cy.get('#new-page').should('be.visible');

✓ After

it('clicks button and checks new page', () => {
  cy.get('#button').click();
  cy.get('#new-page').should('be.visible');
});

What It Enables

It enables writing clear, reliable tests that run step-by-step, avoiding random failures and confusion.

Real Life Example

Testing a login form where you first enter username and password, then click login, and finally check if the dashboard appears.

Using it blocks ensures each step waits for the previous one, so the test never tries to check the dashboard before logging in.

Key Takeaways

Manual tests without waiting cause random failures.

it blocks organize tests into clear, sequential steps.

This makes tests reliable and easier to maintain.