Differences Between Cypress Hook Functions: `beforeEach`, `before`, `afterEach`, and `after` – How to Use Them Correctly for Test Organization

Cypress is a widely adopted frontend end-to-end testing framework, where hook functions (hooks) serve as essential tools for managing the test lifecycle. By appropriately utilizing beforeEach, before, afterEach, and after hooks, developers can efficiently manage the test environment, minimize code duplication, and enhance test maintainability. This article thoroughly examines the distinctions between these hook functions and provides practical usage guidelines based on real-world scenarios, helping you build well-structured and reliable test suites.

Cypress Hook Functions Overview

In Cypress, hook functions define behaviors before and after test execution, acting as key mechanisms for test lifecycle management. They are categorized into two types:

• Test-level hooks: Triggered during individual test execution, with scope limited to test cases (it blocks).
• Test suite-level hooks: Triggered when the entire test suite (describe block) executes, with scope for the test group.

Proper use of hook functions significantly improves test efficiency, avoids state contamination and redundant setup. For example, beforeEach initializes the pre-test state for each test (e.g., logging in), while afterEach cleans up post-test resources (e.g., logging out), ensuring test isolation.

beforeEach and afterEach: Fine-grained Control at the Test Level

• beforeEach: Executes before each test starts, with scope limited to test cases. Typically used to initialize pre-test state, such as simulating user login or loading test data.

  • Typical scenario: User authentication tests where login must be simulated before each test.
  • Code example:

javascript
describe('Login Feature', () => {
  beforeEach(() => {
    // Simulates user login before each test
    cy.visit('/login');
    cy.get('[data-testid="username"]').type('admin');
    cy.get('[data-testid="password"]').type('admin');
    cy.get('[data-testid="submit"]').click();
  });

  it('should navigate to dashboard', () => {
    cy.url().should('include', '/dashboard');
  });
});

• afterEach: Executes after each test ends, with scope limited to test cases. Typically used to clean up post-test state, such as logging out or resetting data.

  • Typical scenario: Ensuring tests do not interfere with each other by resetting the application state.
  • Code example:

javascript
describe('User Management', () => {
  afterEach(() => {
    // Cleans up after each test to ensure independence
    cy.get('[data-testid="logout"]').click();
  });

  it('should create a new user', () => {
    cy.visit('/users');
    cy.get('[data-testid="create"]').click();
  });
});

before and after: Control at the Test Suite Level

• before: Executes before all tests start, with scope for the entire test suite. Typically used to initialize global state, such as setting up a database or configuring environment variables.

  • Typical scenario: Database initialization before running a suite of tests.
  • Code example:

javascript
describe('Data Processing', () => {
  before(() => {
    // Initializes global state before all tests
    cy.request('POST', '/setup', { data: 'initial' });
  });

  it('should process data', () => {
    cy.request('GET', '/data').its('body').should('have.length', 10);
  });
});

• after: Executes after all tests end, with scope for the entire test suite. Typically used to clean up global resources, such as tearing down a database or resetting the application.

  • Typical scenario: Database cleanup after running a suite of tests.
  • Code example:

javascript
describe('API Tests', () => {
  after(() => {
    // Cleans up global resources after all tests
    cy.request('POST', '/teardown');
  });

  it('should validate API response', () => {
    cy.request('GET', '/api').its('status').should('eq', 200);
  });
});

Hook Functions Comparison Table

Hook	When Executed	Scope	Primary Purpose	Common Pitfalls
beforeEach	Before each test starts	Test level	Initialize pre-test state (e.g., login)	Repeated setup within tests, leading to performance degradation
before	Before all tests start	Test suite level	Initialize global state (e.g., database)	Failure to handle asynchronous operations, causing test failures
afterEach	After each test ends	Test level	Clean up post-test state (e.g., logout)	Inadequate cleanup, leading to state contamination
after	After all tests end	Test suite level	Clean up global resources (e.g., database)	Failure to consider test failure scenarios, resulting in resource leaks

Practical Usage Guidelines

• Avoid state contamination: Ensure afterEach properly cleans up resources to prevent tests from interfering with each other.
• Handle asynchronous operations: Use before and after with cy.request or similar to manage async setup/teardown.
• Minimize duplication: Use beforeEach for common pre-test steps instead of repeating code in each test.
• Test failure scenarios: In after hooks, include error handling to prevent resource leaks during test failures.

Example: Comprehensive Test Suite

javascript
describe('User Authentication', () => {
  // Global initialization: logs in before all tests
  before(() => {
    cy.visit('/login');
    cy.get('[data-testid="username"]').type('admin');
    cy.get('[data-testid="password"]').type('admin');
    cy.get('[data-testid="submit"]').click();
  });

  // Resets state before each test (to avoid test contamination)
  beforeEach(() => {
    cy.get('[data-testid="logout"]').click();
    cy.visit('/dashboard');
  });

  // Cleans up after each test (to ensure independence)
  afterEach(() => {
    cy.get('[data-testid="clear-session"]').click();
  });

  it('should access dashboard', () => {
    cy.url().should('include', '/dashboard');
  });

  it('should log out', () => {
    cy.get('[data-testid="logout"]').click();
    cy.url().should('include', '/login');
  });
});

Conclusion

Mastering Cypress hook functions—beforeEach, before, afterEach, and after—is crucial for building robust, maintainable test suites. By understanding their execution timing, scope, and common pitfalls, you can optimize test efficiency, ensure isolation, and handle real-world scenarios effectively. Apply these guidelines to elevate your testing practices and create reliable automation.