cy.intercept() for request interception in Cypress - Framework Patterns

Framework Mode - cy.intercept() for request interception

Folder Structure

  cypress/
  ├── e2e/                  # Test specs
  │   ├── login.cy.js       # Example test file
  │   └── api-intercept.cy.js # Tests using cy.intercept()
  ├── fixtures/             # Static test data (JSON, images)
  │   └── user.json
  ├── support/              # Custom commands and global setup
  │   ├── commands.js       # Custom Cypress commands
  │   └── e2e.js            # Support file loaded before tests
  └── config.js             # Cypress configuration file (optional)
  cypress.config.js         # Main Cypress config
  

Test Framework Layers

• Test Specs (e2e/): Contains test files where cy.intercept() is used to stub or spy on network requests.
• Fixtures: Holds static data files to mock API responses or test data.
• Support: Contains reusable commands and setup code. You can add custom intercept commands here for reuse.
• Configuration: Defines environment variables, base URLs, and browser settings.

Configuration Patterns

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

  // cypress.config.js
  import { defineConfig } from 'cypress'

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

In tests, use Cypress.env('apiUrl') to get environment-specific API URLs for intercepting requests.

Test Reporting and CI/CD Integration

• Use Cypress built-in reporters or plugins like mochawesome for detailed HTML reports.
• Integrate Cypress tests in CI pipelines (GitHub Actions, Jenkins, GitLab CI) to run tests on every code push.
• Configure CI to save test artifacts like screenshots and videos for failed tests.
• Use cy.intercept() to simulate API responses and make tests reliable and fast in CI environments.

Best Practices for cy.intercept() Framework Design

1. Use fixtures for mock responses: Store JSON responses in fixtures/ and load them in intercepts to keep tests clean.
2. Scope intercepts carefully: Use URL patterns and HTTP methods to intercept only needed requests to avoid false positives.
3. Reuse intercept logic: Create custom commands in support/commands.js for common intercept setups.
4. Assert on intercepted requests: Verify request payloads and responses to ensure correct app behavior.
5. Clean up intercepts: Avoid global intercepts that affect unrelated tests to keep tests independent.

Self Check

Where in this folder structure would you add a new custom command to intercept login API requests for reuse across multiple tests?

Key Result

Organize Cypress tests with clear folder layers and use cy.intercept() in test specs and reusable commands for reliable API mocking.