How can I use switch between different environments using the new cypress.config.js in Cypress 10x?

user_6527143 0
Viewed 67

I used to have json files under my config folder containing variables for different environments. For example: local.env.json would contain:

{
"baseUrl": "localhost:8080"
}

then another one called uat.env.json would contain:

{
"baseUrl": "https://uat.test.com"
}

and its configured on my plugins/index.ts as:

    const version = config.env.version || 'uat'; // if version is not defined, default to this stable environment
    config.env = require(`../../config/${version}.env.json`);  // load env from json

I will then call it on my tests with cy.visit(Cypress.env().baseUrl)) then pass it on the CI with CYPRESS_VERSION=uat npx cypress run

However, with the new Cypress 10x version, the plugin file has been deprecated and just relies on cypress.config.js. I can't find any example on their documentation on how this can be done (I remember they used to have a page with these scenarios but can't find it now).

cypress automated-tests testing configuration-files javascript
1 Answers

It's possible to use the old plugins/index.ts in the new cypress.config.ts by importing it.

This is the simplest example (with no new config in cypress.config.ts)

import { defineConfig } from 'cypress'
import legacyConfig from './cypress/plugins/index.js'

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:1234',
    setupNodeEvents(on, config) {
      return legacyConfig(on, config)  // call legacy config fn and return result
    }
  }
})

The typescript and modules may cause you grief about typings etc. I've not tried it in a typescript project, but it does work in a javascript project.

Alternatively, copy/paste everything from plugins/index.ts instead of calling the legacy function. This might be better as you add more plugins in the future.

user_169977070
Related