Configuration & Environment Variables - spryker-projects/cypress-boilerplate GitHub Wiki

Overview

This page provides a detailed explanation of the cypress.config.ts file used in the Cypress-Boilerplate project. The cypress.config.ts file is the main configuration file for Cypress, defining various settings and behaviors for running Cypress tests.

Configuration File: cypress.config.ts

The cypress.config.ts file contains several important sections that configure how Cypress tests are executed. Below are detailed explanations of each section.

General Configuration

This section defines general settings for the Cypress tests.

export default defineConfig({
  watchForFileChanges: false,
  screenshotOnRunFailure: true,
  trashAssetsBeforeRuns: true,
  projectId: 'yvdmdz',
  chromeWebSecurity: false,
  video: false,
  downloadsFolder: 'cypress/data/downloads',
  fixturesFolder: 'cypress/fixtures',
  screenshotsFolder: 'cypress/data/screenshots',
  videosFolder: 'cypress/data/videos',
  supportFolder: 'cypress/support',
  experimentalModifyObstructiveThirdPartyCode: true,
  experimentalMemoryManagement: true,
  pageLoadTimeout: 60000,
  viewportWidth: 1280,
  viewportHeight: 800,
  • watchForFileChanges: Disables watching for file changes.
  • screenshotOnRunFailure: Takes a screenshot on test failure.
  • trashAssetsBeforeRuns: Deletes screenshots and videos from previous runs before new runs.
  • projectId: Project ID for Cypress Dashboard.
  • chromeWebSecurity: Disables web security to allow testing of cross-origin iframes.
  • video: Disables video recording of test runs.
  • downloadsFolder: Sets the folder for downloaded files.
  • fixturesFolder: Sets the folder for fixture files.
  • screenshotsFolder: Sets the folder for screenshots.
  • videosFolder: Sets the folder for videos.
  • supportFolder: Sets the folder for support files.
  • experimentalModifyObstructiveThirdPartyCode: Enables modification of obstructive third-party code.
  • experimentalMemoryManagement: Enables experimental memory management.
  • pageLoadTimeout: Sets the timeout for page loads.
  • viewportWidth and viewportHeight: Sets the default viewport size.

Reporter Configuration

This section configures the reporter for Cypress tests.

  reporter: 'cypress-mochawesome-reporter',
  reporterOptions: {
    charts: true,
    reportTitle: 'mochawesome-report',
    embeddedScreenshots: true,
    inlineAssets: true,
    saveAllAttempts: false,
    reportDir: 'cypress/data/reports',
    showSkipped: true,
  },
  • reporter: Specifies the reporter to use (cypress-mochawesome-reporter).
  • reporterOptions: Options for the reporter (e.g., charts, report title, embedded screenshots).

End-to-End Testing Configuration

This section defines settings for end-to-end (E2E) tests.

  e2e: {
    supportFile: 'cypress/support/e2e.ts',
    setupNodeEvents: async (on, config) => {
      const plugin = await import('cypress-mochawesome-reporter/plugin')
      plugin.default(on)
      on('task', {})
  • supportFile: Specifies the support file for E2E tests.
  • setupNodeEvents: Configures plugins and tasks for E2E tests.

Environment Setup

This part of the configuration sets up different environments for testing.

      let environment = 'local'
      const environments = ['local', 'testing', 'staging', 'production']

      if (typeof config.env.environment !== 'undefined') {
        environment = config.env.environment
      } else {
        config.env.environment = environment
      }

      if (!environments.includes(environment)) {
        throw new Error(
          `Invalid environment: ${environment}, allowed environments are: ${environments.join(', ')}`
        )
      }
  • environment: Sets the default environment (local).
  • environments: Lists possible environments.
  • Checks if the environment is defined in Cypress configuration and validates it.

Overriding Default Environment

The default environment (local) can be overwritten using a CLI parameter. For example, running npx cypress open --env environment=staging will set the environment to staging

Environment Variables

This part loads environment variables from files and explains the hierarchy.

      const envPath = process.cwd() + '/.env'
      if (fs.existsSync(envPath)) {
        const envVars = dotenvConfig({ path: envPath })
        if (envVars.error) {
          throw envVars.error
        }
        for (const key in envVars.parsed) {
          config.env[key] = envVars.parsed[key]
        }
      }

      const envFileName = process.cwd() + `/.envs/.env.${environment}`
      if (fs.existsSync(envFileName)) {
        const result = dotenvConfig({ path: envFileName })
        if (result.error) {
          throw result.error
        }
        for (const key in result.parsed) {
          if (!(key in config.env)) {
            config.env[key] = result.parsed[key]
          }
        }
      }

      return config

1. Environment Variables Loading:

  • Global .env file: Always takes precedence and overrides any variables defined in other environment-specific files.
  • Environment-specific file: Loaded if it exists. Variables here will be used unless they are also defined in the global .env file.
    • Example: .envs/.env.staging if the environment is set to staging.

Check .env.dist file for more instructions on environment variables.

2. Example:

If the variable GLUE_URL is defined in both .env and .env.staging, the value from .env will always be used, regardless of the environment.

Base URL Configuration

This part sets the base URL for the tests based on the loaded environment variables.

      config.baseUrl = config.env.GLUE_URL
      return config
    },
  • Base URL: baseUrl is set to the value of GLUE_URL from the environment variables.
    • Usage: The base URL is used for all API requests and is required if you are testing APIs.

Retries Configuration

This section defines the retry attempts for test runs.

  retries: {
    runMode: 2,
    openMode: 0,
  },
  • runMode: Number of retry attempts for cypress run.
  • openMode: Number of retry attempts for cypress open.

Example:

  • If runMode is set to 2, Cypress will retry failing tests up to two additional times when running tests in runMode (cypress run).
  • If openMode is set to 0, there will be no retries when running tests in openMode (cypress open).

Environment Variables Configuration

This section defines default environment variables.

  env: {
    DEFAULT_ENVIRONMENT: 'local',
  },

By following this guide, you will gain a thorough understanding of the cypress.config.ts file in the Cypress-Boilerplate project, allowing you to effectively configure and customize your Cypress testing environment.