Multiple config files in Cypress 10?

[shutchison-bai]

I currently run my e2e tests on multiple environments. To achieve this I have created a config file for each environment and pass the configFile value in the CLI. When upgrading I realized Cypress 10.0.0 does not support multiple config files. Is there away to achieve this in the latest version of Cypress?

[phaterster]

Why it is not supported? It is supported! have you tried?
https://docs.cypress.io/api/plugins/configuration-api#Switch-between-multiple-configuration-files

[Victorgabarullo]

I got the same problem! When I clicked on that link it says that is no longer supported

[stavares843]

hello! 👋

have you tried [these](https://docs.cypress.io/guides/references/migration-guide#Configuration-File-Changes) instructions for Cypress 10 regarding the config files?

[bennymeade]

This does work in version 10 and you can extend from the default config:

I put a mobile config file under cypress/configs/cypress.mobile.config.ts

Then reference it in package.json scripts:
"cy:open:mobile": "cypress open --e2e --browser chrome --config-file cypress/configs/cypress.mobile.config.ts",

File cypress.mobile.config.ts contents:

import { defineConfig } from 'cypress';
import defu from 'defu';

import defaultConfig from '../../cypress.config';

export default defineConfig(
  defu(
    {
      viewportWidth: 375,
      viewportHeight: 812,
      userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) Mobile/15E148',
      env: {
        device: 'mobile',
      },
      e2e: {
        excludeSpecPattern: ['**/e2e/site-monitoring/*', '**/e2e/keyboard-navigation/*'],
      },
    },
    defaultConfig
  )
);

[notfounnd]

Hi @bennymeade. Would you have any repo with this example?

[stavares843]

we have various Cypress config's on our repo 🔨

[notfounnd]

@stavares843 I thought about this way in a first moment.

But it worry me 'cause in this way I'll duplicate commons configurations of project.

E.g.: Reports configuration (mochawesome), timeouts, screen size, assets folders...

This configurations are the same for all environments, it not seens a good practice duplicate this configs in each file xyz.config.js.

[cristiannzero]

Simpler way to do this:

1. Export a module with your common attributes.
   module.exports = { projectId: "adfadfasdfas", project: "./spec", chromeWebSecurity: false, retries: { runMode: 1, openMode: 1, }, pageLoadTimeout: 200000, responseTimeout: 700000, video: false, watchForFileChanges: false }
2. Create your different config files and call this module. Use spread javascript call to merge these properties.

`const { defineConfig } = require("cypress")
const defaultConfig = require("../../cypress.default.config")

module.exports = defineConfig({
...defaultConfig,
defaultCommandTimeout: 20000,
e2e: {
baseUrl: "your url",
specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}",
},
})
`
This way you avoid to have duplicates on each config file

[dominiknapik]

You might want to check Gleb's blog post about this issue - https://glebbahmutov.com/blog/load-cypress-env-settings/