How to Use Cypress Test Hooks (before, after, beforeEach, afterEach)?

In the field of frontend automated testing, Cypress is widely favored by developers for its concise API and robust testing capabilities. As an end-to-end testing framework based on JavaScript, Cypress provides a flexible test hook mechanism that allows developers to insert custom logic at key points in the test lifecycle. The test hooks include before, after, beforeEach, and afterEach, which operate at the test suite and test case levels respectively, serving as core tools for organizing test workflows, managing test states, and enhancing test reliability. This article will delve into the usage scenarios, technical details, and best practices of these hooks to help developers efficiently build robust automated testing solutions.

What are Cypress Test Hooks?

Test hooks are a core feature of Cypress, used to insert custom code into the test execution flow. They are based on Mocha's conventions but are optimized for Cypress to ensure seamless execution in the browser environment. Key distinctions include:

• At the test suite level: before and after execute only once across the entire test suite, suitable for initializing global resources or cleaning up the test environment.
• At the test case level: beforeEach and afterEach execute before/after each test case, suitable for initializing test data or resetting state.

These hooks are defined within describe blocks and work in conjunction with it test cases to form a complete test lifecycle:

Note: Cypress test hooks follow Mocha's naming conventions but execute strictly within the test execution phase (e.g., they do not run before test execution). Ensure code logic is compatible with Cypress's asynchronous features to avoid blocking the main test flow.

before Hook: Pre-execution for Test Suite

The before hook executes once before the entire test suite starts, used for initializing global state or setting up the test environment. Typical scenarios include:

• Visiting test pages (e.g., cy.visit())
• Creating global test sessions (e.g., cy.session())
• Configuring global variables or database connections

Technical Points:

• Execution order: before -> beforeEach -> it -> afterEach -> after
• Executes only once, avoiding redundant initialization across multiple test cases
• If asynchronous operations are needed in before, use cy commands or async/await

Code Example:

javascript
describe('User Management Tests', () => {
  before(() => {
    // Initialize test environment: visit login page
    cy.visit('/login');
    // Configure global session (example)
    cy.session('admin', () => {
      cy.request('POST', '/api/login', { username: 'admin', password: 'pass' });
    });
  });

  // Other hooks and test cases...
});

Best Practices:

• Avoid performing time-consuming operations (e.g., database initialization) in before, which may block test startup.

• Use for initializing shared resources, such as:

  • Ensuring all test cases access the same page state
  • Setting global test variables (e.g., Cypress.env('API_URL'))

after Hook: Post-execution for Test Suite

The after hook executes once after the entire test suite ends, used for cleaning up resources or performing cleanup tasks. Typical scenarios include:

• Closing browser sessions
• Cleaning up databases or file systems
• Generating test reports

Technical Points:

• Execution order: after executes after all it and afterEach
• Suitable for global cleanup to avoid test pollution
• For asynchronous cleanup, use cy commands or async/await

Code Example:

javascript
describe('User Management Tests', () => {
  // ...other hooks

  after(() => {
    // Clean up test data: delete temporary user
    cy.request('DELETE', '/api/users/temp');
    // Close browser session (example)
    // Note: Cypress automatically manages browser sessions; this is for demonstration only
  });
});

Best Practices:

• Use for releasing external resources (e.g., API server connections)
• Avoid performing operations that affect test case logic in after (e.g., do not modify test data)
• Use in conjunction with before to ensure a clean test environment

beforeEach Hook: Pre-execution for Each Test Case

The beforeEach hook executes before each test case starts, used for initializing specific state for the test case. Typical scenarios include:

• Resetting page state (e.g., clearing form inputs)
• Setting up test data (e.g., creating temporary users)
• Configuring test context (e.g., Cypress.env())

Technical Points:

• Execution order: executes before each it, ensuring test case isolation
• Suitable for unit tests and end-to-end tests with fine-grained initialization
• Difference from before: before executes once, beforeEach executes once per test case

Code Example:

javascript
describe('Login Tests', () => {
  beforeEach(() => {
    // Reset test state: clear input fields
    cy.get('#username').clear();
    cy.get('#password').clear();
    // Create temporary test user
    cy.request('POST', '/api/users', { username: 'test', password: 'pass' });
  });

  it('should log in successfully', () => {
    cy.get('#username').type('test');
    cy.get('#password').type('pass');
    cy.get('button').click();
    cy.url().should('include', '/dashboard');
  });

  it('should handle invalid credentials', () => {
    // Each test case resets state, ensuring independence
  });
});

Best Practices:

• Use to ensure test case independence (avoid state pollution)
• Pair with afterEach for complete test case lifecycle management
• Suitable for scenarios requiring dynamic data (e.g., API services)

afterEach Hook: Post-execution for Each Test Case

The afterEach hook executes after each test case ends, used for cleaning up temporary state of the test case. Typical scenarios include:

• Clearing page operations (e.g., removing test elements)
• Verifying test results (e.g., checking error logs)
• Resetting test data

Technical Points:

• Execution order: executes after each it, ensuring cleanup after test case completion
• Suitable for handling side effects at the test case level
• Works with beforeEach to achieve complete test case encapsulation

Code Example:

javascript
describe('Form Tests', () => {
  beforeEach(() => {
    // Initialize form data
    cy.get('#name').type('Test User');
  });

  afterEach(() => {
    // Clean up test data: remove temporary elements
    cy.get('#name').clear();
    // Verify test results (example)
    cy.log('Test completed: Resetting state');
  });

  it('should submit valid form', () => {
    cy.get('button').click();
    cy.url().should('include', '/success');
  });
});

Best Practices:

• Use to ensure test case isolation (avoid state leakage)
• Suitable for verifying test behavior (e.g., logging)
• Combine with beforeEach to achieve complete test case lifecycle management

Practical Examples and Best Practices

Complex Scenario: Hook Chain for Integration Tests

In large-scale tests, hooks can be combined:

• before: Initialize global page
• beforeEach: Reset form state for each test case
• afterEach: Clean up test data
• after: Clean up database

Full Example:

javascript
describe('E-commerce Tests', () => {
  before(() => {
    cy.visit('/cart');
  });

  beforeEach(() => {
    cy.get('#product').clear();
    cy.request('POST', '/api/cart', { productId: 'test' });
  });

  afterEach(() => {
    cy.get('#product').clear();
  });

  after(() => {
    cy.request('DELETE', '/api/cart');
  });

  it('should add product to cart', () => {
    cy.get('#product').type('Test Item');
    cy.get('button').click();
    cy.get('#cart-count').should('eq', 1);
  });
});

Common Pitfalls and Solutions

• Pitfall 1: Synchronous operations in beforeEach causing test blocking

  • Solution: Use cy commands or async/await for asynchronous logic

• Pitfall 2: afterEach not cleaning resources leading to test pollution

  • Solution: Combine cy.request with state reset (e.g., cy.clearLocalStorage())

• Pitfall 3: Nested hooks causing execution order confusion

  • Solution: Follow test lifecycle order, avoid calling other hooks within hooks

Performance Optimization Tips

• Avoid time-consuming operations in hooks (e.g., large database queries); ensure asynchronous handling with cy.request
• Use Cypress.env() to manage test state, reducing redundant initialization
• For large projects, use setup files to centrally manage hook logic

Conclusion

Cypress test hooks are indispensable tools in automated testing, allowing developers to precisely control the test lifecycle through before, after, beforeEach, and afterEach, thereby enhancing test reliability and maintainability. This article thoroughly explains the usage, scenarios, and best practices for each hook, emphasizing:

• Test case isolation: Ensure each test case is independent using beforeEach and afterEach
• Resource management: Handle global state with before and after
• Error prevention: Avoid hook logic blocking the test flow

In practical projects, start with simple scenarios (e.g., page initialization) and gradually expand to complex tests. Always refer to the Cypress official documentation for details. Mastering these hooks will significantly improve frontend testing efficiency and lay a foundation for building high-quality applications.

Further Reading: Cypress test hooks are one of its core advantages, combined with Mocha's testing framework features, enabling flexible test organization. Recommended to explore the Cypress Testing Strategy for deeper practice.

​