API-first setup pattern in Cypress - Framework Patterns

Framework Mode - API-first setup pattern

Folder Structure

cypress/
├── e2e/                  # End-to-end test specs
│   ├── user.spec.js      # Example test file
│   └── product.spec.js
├── fixtures/             # Static test data (JSON, etc.)
│   └── example.json
├── support/              # Support files and commands
│   ├── apiCommands.js    # Custom commands for API calls
│   ├── e2e.js            # Global setup for tests
│   └── index.js          # Support file entry point
├── utils/                # Utility functions for API setup
│   └── apiHelpers.js     # Helpers for API requests
cypress.config.js         # Cypress configuration file
.env                     # Environment variables for sensitive data

Test Framework Layers

• API Setup Layer: Contains reusable API calls and setup commands in support/apiCommands.js and utils/apiHelpers.js. This layer handles authentication, data creation, and cleanup before tests run.
• Test Specs Layer: Located in cypress/e2e/, these files contain the actual test cases that use API setup commands to prepare test data before UI or API validations.
• Support Layer: Includes global hooks and custom commands in support/e2e.js and support/index.js to initialize the test environment and register API commands.
• Fixtures Layer: Holds static test data files used to feed tests with consistent input.
• Configuration Layer: Managed in cypress.config.js and environment files to control base URLs, environment variables, and test settings.

Configuration Patterns

• Environment Variables: Use .env files or cypress.env.json to store sensitive data like API tokens and credentials securely.
• Base URL and Environment Setup: Define baseUrl and environment-specific variables in cypress.config.js to switch easily between dev, staging, and production.
• Custom Commands Registration: Register API setup commands in support/e2e.js to keep tests clean and reusable.
• Data Cleanup: Implement teardown or cleanup API calls in afterEach or after hooks to maintain test isolation.

Test Reporting and CI/CD Integration

• Test Reports: Use Cypress built-in reporters or plugins like mochawesome to generate readable HTML and JSON reports after test runs.
• CI/CD Integration: Integrate Cypress tests in pipelines (GitHub Actions, Jenkins, GitLab CI) to run API-first setup tests automatically on code changes.
• Artifacts: Save screenshots, videos, and logs from test runs for debugging failed tests.
• Parallelization: Configure Cypress Dashboard or CI runners to run tests in parallel for faster feedback.

Framework Design Principles

1. API-first Setup: Prepare test data via API calls before UI or API tests to speed up tests and reduce flakiness.
2. Reusable Commands: Encapsulate API setup logic in custom Cypress commands for easy reuse and maintenance.
3. Clear Separation: Keep API setup code separate from test assertions to improve readability and debugging.
4. Environment Agnostic: Use configuration files and environment variables to run tests across multiple environments without code changes.
5. Cleanup After Tests: Always clean up test data to avoid side effects and keep tests independent.

Self Check

Where in this folder structure would you add a new custom command to create a user via API before running tests?

Key Result

Use API calls in Cypress custom commands to set up test data before running UI or API tests for faster and more reliable automation.