it blocks for test cases in Cypress

Introduction

We use it blocks to write individual test cases. Each it block checks one thing to make sure the app works correctly.

When you want to test if a button works as expected.

When you need to check if a page loads correctly.

When verifying that a form submits data properly.

When testing if an error message appears for wrong input.

When confirming that a feature behaves as planned.

Syntax

Cypress

it('description of test case', () => {
  // test steps and assertions
});

The first argument is a string describing what the test checks.

The second argument is a function containing the test code.

Examples

This test visits the homepage and looks for the word 'Welcome'.

Cypress

it('checks if the homepage loads', () => {
  cy.visit('/');
  cy.contains('Welcome');
});

This test submits a form without filling it and checks if an error message appears.

Cypress

it('should show error on empty form submission', () => {
  cy.get('form').submit();
  cy.get('.error').should('be.visible');
});

Sample Program

This test suite has two test cases: one checks if the login form is visible, the other tests logging in with correct details and confirms the URL changes to dashboard.

Cypress

describe('Login Page Tests', () => {
  it('shows login form', () => {
    cy.visit('/login');
    cy.get('form#loginForm').should('be.visible');
  });

  it('logs in with valid credentials', () => {
    cy.visit('/login');
    cy.get('input[name="username"]').type('user1');
    cy.get('input[name="password"]').type('password123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

Important Notes

Each it block should test one thing only for clarity.

Use clear descriptions so anyone can understand what the test does.

Keep tests independent; one test should not rely on another.

Summary

it blocks hold individual test cases.

They describe what to test and contain the test steps.

Clear, simple tests help find problems faster.