Configure cypress to run tests in multiple environments

0
65
Rails 7 adds ComparisonValidator to ActiveRecord


When we write tests, we want to run them in local environment first. There are
few reasons for this. We we need to add data-cy, verify and run the tests.
Also, we need to make sure that tests are running fine on local/development
environment before running them in test/staging environment. Another case might
be the one where we need to set the CI pipeline to execute in different
environments.

In such scenarios, the baseUrl will be different in both the environments. But
cypress allows us to configure baseUrl only once in cypress.json . Then, how
do we configure baseUrl specific for each of the environments? In this blog,
we will see how to configure cypress step by step so that we can run cypress
tests in multiple environments.

1. Add environment specific configuration

To configure cypress for different environments, we can follow the two simple
steps.

  1. Create config folder in cypress.
  2. Create separate files for each of the environments.
1// cypress/config/cypress.development.json
2
3{
4  "baseUrl": "https://localhost:9006",
5  "env": {
6    "environment": "development"
7  },
8  "execTimeout": 18000,
9  "defaultCommandTimeout": 300000,
10  "requestTimeout": 10000,
11  "pageLoadTimeout": 30000,
12  "responseTimeout": 10000,
13  "viewportWidth": 1200,
14  "viewportHeight": 1200,
15  "videoUploadOnPasses": false,
16  "retries": {
17    "runMode": 1,
18    "openMode": 2
19  }
20}

1// cypress/config/cypress.test.json
2
3{
4  "baseUrl": "https://test.example.com",
5  "env": {
6    "environment": "test"
7  },
8  "execTimeout": 300000,
9  "defaultCommandTimeout": 60000,
10  "requestTimeout": 20000,
11  "pageLoadTimeout": 60000,
12  "responseTimeout": 20000,
13  "viewportWidth": 1200,
14  "viewportHeight": 1200,
15  "videoUploadOnPasses": true,
16  "retries": {
17    "runMode": 2,
18    "openMode": 1
19  }
20}

1// cypress/config/cypress.production.json
2
3{
4  "baseUrl": "https://live.example.com",
5  "env": {
6    "environment": "production"
7  },
8  "execTimeout": 300000,
9  "defaultCommandTimeout": 60000,
10  "requestTimeout": 20000,
11  "pageLoadTimeout": 60000,
12  "responseTimeout": 20000,
13  "viewportWidth": 1200,
14  "viewportHeight": 1200,
15  "videoUploadOnPasses": true,
16  "retries": {
17    "runMode": 2,
18    "openMode": 1
19  }
20}

2. Initialize config files

After adding config folder, we need to tell cypress about those config files. We
can do that by updating plugins/index.js with following code. This file gets
executed after we start the cypress server.

1// cypress/plugins/index.js
2
3const fs = require("fs-extra");
4const path = require("path");
5
6const fetchConfigurationByFile = file => {
7  const pathOfConfigurationFile = `config/cypress.${file}.json`;
8
9  return (
10    file && fs.readJson(path.join(__dirname, "../", pathOfConfigurationFile))
11  );
12};
13
14module.exports = (on, config) => {
15  const environment = config.env.configFile || "development";
16  const configurationForEnvironment = fetchConfigurationByFile(environment);
17
18  return configurationForEnvironment || config;
19};

In the above code, Cypress loads the configuration file based on the
environment. When we run Cypress we can pass environment variables. In this
case, we need to pass configFile as an environment variable. If we don’t pass
configFile, by default Cypress will consider development as the current
environment.

3. Setup scripts

Cypress can accept command line arguments. We can set environment by passing
these arguments in the cypress run or cypress open command e.g.
cypress open –env configFile=test. This command looks lengthy. Also,
sometimes we need to pass more command line arguments along with configFile.
We can create short and handy commands by configuring the package.json.

For example: yarn run cy:open:dev.

1// cypress/package.json
2
3"cy:open:dev": "cypress open --env configFile=development",
4"cy:open:dev:chrome": "cypress open --browser chrome --env configFile=development",
5"cy:run:dev": "cypress run --env configFile=development",
6"cy:open:staging": "cypress open --env configFile=test",
7"cy:run:staging": "cypress run --env configFile=test",

4. Precedence of configuration

By default, we have cypress.json in cypress where some config can be added.
The precedence of configuration is high for the files in the config folder
than the cypress.json. So if we have some key execTimeout defined in both
cypress.json and cypress.test.json. The value of execTimeout in the
cypress.test.json will be considered.

Generally, the rule of thumb is that common configuration for all the
environments can be kept in the cypress.json. The environment specific config
can be kept in config/ folder.

Conclusion

We saw that how we can configure the cypress in multiple environments. In this
way we can run Cypress for each environment without much hassle. This definitely
helps us in running Cypress in both local as well as in the production
environment.



Source link

Leave a reply

Please enter your comment!
Please enter your name here