Why intercepting network validates API integration in Cypress - Framework Benefits

Framework Mode - Why intercepting network validates API integration

Folder Structure

cypress/
├── e2e/                  # Test specs
│   └── api_integration.cy.js
├── fixtures/             # Test data files
│   └── user.json
├── support/              # Custom commands and utilities
│   ├── commands.js
│   └── intercepts.js
cypress.config.js         # Cypress configuration file

Test Framework Layers

• Test Specs (e2e/): Contains test files that define the test scenarios using Cypress commands.
• Support Layer (support/): Holds reusable commands and intercept logic to mock or spy on network requests.
• Fixtures (fixtures/): Stores static test data used to simulate API responses.
• Configuration (cypress.config.js): Manages environment settings like base URLs and timeouts.

Configuration Patterns

Use cypress.config.js to set base URLs for different environments (dev, staging, prod). Use environment variables to switch API endpoints or credentials without changing test code.

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'https://api.example.com',
    env: {
      apiKey: 'test-api-key',
      environment: 'staging'
    },
    setupNodeEvents(on, config) {
      // setup code
    }
  }
})

Fixtures provide mock data for API responses to test different scenarios reliably.

Test Reporting and CI/CD Integration

Use Cypress built-in reporters or plugins like mochawesome to generate readable test reports showing which API calls passed or failed.

Integrate Cypress tests into CI/CD pipelines (GitHub Actions, Jenkins) to run API integration tests automatically on code changes.

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'
          wait-on-timeout: 60

Framework Design Principles

• Use Network Interception to Spy and Stub: Intercept API calls to verify requests are sent correctly and stub responses to test UI behavior without relying on real backend.
• Keep Tests Independent: Mock API responses so tests do not depend on external services, making them faster and more reliable.
• Use Fixtures for Consistent Data: Store expected API responses in fixtures to reuse and maintain test data easily.
• Validate Both Request and Response: Check that the app sends correct data and handles API responses properly.
• Integrate with CI/CD: Run API integration tests automatically to catch issues early.

Self Check

Where in this folder structure would you add a new intercept to mock the login API response?

Answer: Add the intercept logic in cypress/support/intercepts.js and call it from your test spec in cypress/e2e/api_integration.cy.js.

Key Result

Intercepting network calls in Cypress allows validating API integration by spying on requests and stubbing responses to ensure correct communication between frontend and backend.