cypress.config.js settings - Framework Patterns

Framework Mode - cypress.config.js settings

Folder Structure

cypress/
├── e2e/
│   ├── login.cy.js
│   ├── dashboard.cy.js
│   └── userProfile.cy.js
├── fixtures/
│   └── userData.json
├── support/
│   ├── commands.js
│   └── e2e.js
cypress.config.js
package.json

Test Framework Layers

• Configuration Layer: cypress.config.js - central place for environment settings, base URLs, browser options, timeouts.
• Test Layer: cypress/e2e/ - contains test files with .cy.js suffix, each file holds related test cases.
• Support Layer: cypress/support/ - reusable commands and setup code loaded before tests.
• Fixtures Layer: cypress/fixtures/ - static test data like JSON files for consistent test inputs.

Configuration Patterns

The cypress.config.js file manages settings for different environments and browsers.

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'https://staging.example.com',
    specPattern: 'cypress/e2e/**/*.cy.js',
    supportFile: 'cypress/support/e2e.js',
    setupNodeEvents(on, config) {
      // Add plugins or event listeners here
    },
    env: {
      username: 'testuser',
      password: 'securePass123'
    },
    defaultCommandTimeout: 8000,
    pageLoadTimeout: 60000,
    retries: {
      runMode: 2,
      openMode: 0
    },
    viewportWidth: 1280,
    viewportHeight: 720,
    video: true,
    screenshotsFolder: 'cypress/screenshots',
    videosFolder: 'cypress/videos'
  }
})

Key points:

• baseUrl sets the main URL for tests, easy to switch for dev, staging, prod.
• env stores sensitive or variable data like usernames, passwords.
• retries helps tests rerun on failure to reduce flaky results.
• setupNodeEvents is for plugins or custom event handling.
• Timeouts control how long Cypress waits for commands or page loads.

Test Reporting and CI/CD Integration

Cypress integrates well with CI/CD pipelines and reporting tools.

• Use cypress run --reporter junit or mochawesome for detailed test reports.
• Configure reporters in cypress.config.js or via CLI.
• Store screenshots and videos on test failure for debugging.
• Integrate with CI tools like GitHub Actions, Jenkins, GitLab CI to run tests automatically on code changes.
• Use environment variables in CI to switch config (e.g., baseUrl, credentials).

Best Practices for cypress.config.js Settings

• Centralize configuration: Keep all environment and test settings in cypress.config.js for easy maintenance.
• Use environment variables: Avoid hardcoding sensitive data; use env or CI secrets.
• Set sensible timeouts: Adjust command and page load timeouts to balance speed and reliability.
• Enable retries: Configure retries to reduce flaky test failures without hiding real issues.
• Organize test files: Use clear naming and folder structure for easy test discovery and maintenance.

Self Check

Where in this framework structure would you add a new environment configuration for production with a different baseUrl and credentials?

Key Result

Centralize all Cypress test settings in cypress.config.js for easy environment and behavior management.