Configs

Types of configs

We have two default configs that are always loaded and 2 optional configs that we can add to our application.

Each config extends the previous one.

name	location	default	description
global	./cypress.config.ts	yes	Global default cypress config
project	./cypress/configs/saucedemo/default.ts	yes	Each project has its own config that extends the global one
type	no	./cypress/configs/saucedemo/	Config used for different testing types or situations. This config is loaded with the type CLI argument
local	no	./cypress/configs/config.local.ts	Local config that is ignored by GIT. Here you can change stuff and it will be applied only to you.

Global config

Here you write your global config as usual like:

• viewportWidth
• viewportHeight
• etc.

./cypress.config.ts

import { defineConfig } from 'cypress'
// Do not import plugins directly here. Do it in the file below
import plugins from './cypress/plugins'

const finalConfig = defineConfig({
  viewportWidth: 1920,
  viewportHeight: 1080,
  env: {
    allure: true,
    allureReuseAfterSpec: true,
  },
  e2e: {
    defaultCommandTimeout: 30000,
    pageLoadTimeout: 30000,
    chromeWebSecurity: false,
    reporter: 'cypress-multi-reporters',
    reporterOptions: {
      configFile: 'reporterOptions.json',
    },
    screenshotsFolder: 'cypress/reports/mochareports/screenshots',
    videosFolder: 'cypress/reports/mochareports/videos',
    setupNodeEvents(on, config) {
      // Setup plugins
      config = plugins(on, config)

      return config
    },
  },
})

export default finalConfig

Project config

Here you place config specific for your project. Maybe this project takes longer to load so you might want to change the pageLoadTimeout just for saucedemo project.

./cypress/configs/saucdemo/default.ts

export default {
  e2e: {
    pageLoadTimeout: 60000,
  }
}

Type config

If you create a config named smoke.ts inside ./cypress/configs/saucedemo/

./cypress/configs/saucedemo/smoke.ts

export default {
  specPattern: [
    'cypress/e2e/saucedemo/add-to-cart.cy.ts',
    'cypress/e2e/saucedemo/remove-from-cart.cy.ts',
  ]
}

You can apply it by running the following command:

$ npx cypress run -e product=saucedemo,env=staging,type=smoke

Whooho

You created your first set of smoke tests! Easy!