JSON fixture files in Cypress - Framework Patterns

Framework Mode - JSON fixture files

Folder Structure

cypress/
├── e2e/
│   └── login.cy.js          # Test files
├── fixtures/
│   └── user.json            # JSON fixture files for test data
├── support/
│   ├── commands.js          # Custom commands
│   └── e2e.js               # Global support file
cypress.config.js            # Cypress configuration

Test Framework Layers

• Fixtures Layer: Stores JSON files with test data (e.g., user credentials, form inputs).
• Test Layer: Cypress test files in cypress/e2e/ that load fixture data and run tests.
• Support Layer: Custom commands and reusable utilities to interact with fixtures and tests.
• Configuration Layer: cypress.config.js manages environment settings and test options.

Configuration Patterns

Use cypress.config.js to define base URLs and environment variables.

Example snippet to set environment variables for credentials:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'https://example.com',
    env: {
      username: 'testuser',
      password: 'testpass'
    }
  }
})

Load JSON fixture files in tests using cy.fixture('user.json') to keep test data separate and reusable.

Test Reporting and CI/CD Integration

• Use Cypress built-in reporters or plugins like mochawesome for detailed HTML reports.
• Integrate Cypress tests in CI/CD pipelines (GitHub Actions, Jenkins) to run tests automatically on code changes.
• Store test reports as artifacts in CI for review.
• Use environment variables in CI to manage sensitive data securely instead of hardcoding in fixtures.

Best Practices

1. Keep fixture files small and focused: One JSON file per data type (e.g., users, products).
2. Do not store sensitive data in fixtures: Use environment variables or secure vaults.
3. Use fixtures to separate test data from test logic: Makes tests easier to read and maintain.
4. Load fixtures asynchronously: Use cy.fixture() with then() to ensure data is ready before test steps.
5. Reuse fixture data across multiple tests: Avoid duplication and keep data consistent.

Self Check

Where in this folder structure would you add a new JSON fixture file for product details used in multiple tests?

Key Result

Use JSON fixture files in the cypress/fixtures folder to separate test data from test code for reusable, maintainable tests.