before and after hooks in Cypress - Framework Patterns

Framework Mode - before and after hooks

Folder Structure

  cypress/
  ├── e2e/
  │   ├── login.cy.js         # Test files
  │   └── dashboard.cy.js
  ├── support/
  │   ├── commands.js         # Custom commands
  │   └── e2e.js              # Global hooks and setup
  ├── fixtures/               # Test data files
  │   └── user.json
  cypress.config.js           # Cypress configuration
  

Test Framework Layers

• Test Files (cypress/e2e/): Contains the actual test cases using describe and it. Hooks like before, after, beforeEach, and afterEach can be used here for setup and cleanup around tests.
• Support Layer (cypress/support/): Contains reusable code like custom commands (commands.js) and global hooks (e2e.js) that run before or after all tests.
• Fixtures (cypress/fixtures/): Holds test data files (JSON, etc.) to keep tests clean and data-driven.
• Configuration (cypress.config.js): Defines environment settings, base URLs, browser options, and other global settings.

Configuration Patterns

Use cypress.config.js to define environment variables and base URLs for different environments (dev, staging, prod). Example:

  import { defineConfig } from 'cypress'

  export default defineConfig({
    e2e: {
      baseUrl: 'https://example.com',
      env: {
        username: 'testuser',
        password: 'password123'
      },
      setupNodeEvents(on, config) {
        // Node event listeners
      }
    }
  })
  

Use before and after hooks in cypress/support/e2e.js for global setup and teardown, like clearing cookies or logging in once before all tests.

Test Reporting and CI/CD Integration

• Use Cypress built-in reporters or plugins like mochawesome for detailed HTML reports.
• Configure cypress.config.js to generate reports after test runs.
• Integrate Cypress tests into CI/CD pipelines (GitHub Actions, Jenkins, GitLab CI) to run tests automatically on code changes.
• Use before and after hooks to prepare test environment and clean up resources during CI runs.

Best Practices for before and after Hooks in Cypress

1. Use before for one-time setup: Run code that only needs to happen once before all tests, like logging in or seeding data.
2. Use beforeEach for test isolation: Prepare a clean state before each test to avoid test interference.
3. Use after and afterEach for cleanup: Clear cookies, local storage, or reset mocks to keep tests independent.
4. Keep hooks fast and simple: Avoid long or complex operations in hooks to keep tests speedy.
5. Place global hooks in cypress/support/e2e.js: This ensures they run for all tests without repeating code.

Self Check

Where in this Cypress framework structure would you add a global before hook that runs once before all tests to set up a user session?

Key Result

Use before and after hooks in Cypress to set up and clean up test states globally or per test for reliable automation.