How to run autotests for several environments and apps separate in one cypress project. Cypress project monorepo
Tags: automation, cypress, testing, tutorial
Published: 2023-11-06 09:48:59

Hello everyone! I want to show you how to run autotests for several environments separate in one cypress project.

If you have several environments or apps and you don't want to create several cypress projects, you can use this tutorial. It helps to create one project which can run autotests separately for each environment or app.

Result you can find in this [github repo](https://github.com/Smoliarick/cypress-example-multiple-environments/tree/main)

## Content

- [Install Cypress project](#install-cypress-project)
- [Set up config file for using multiple environments and apps](#set-up-config-file-for-using-multiple-environments-and-apps)
- [Run autotests for multiple environments and apps](#run-autotests-for-multiple-environments-and-apps)
- [Conclusion](#conclusion)

## Install Cypress project

> Move to the next section if you have installed Cypress project with autotests

1.Install `cypress` package and `dotenv` package (for working with `.env` file) in your project:

```
npm install cypress
npm install dotenv
```

2.If you use Github, create `.gitignore` file:

```
node_modules
cypress/videos
cypress/screenshots
cypress/downloads
.DS_Store
```

3.If you use Cypress for the first time, use the next steps. If you used Cypress before, go to step 4.

3.1.Open Cypress:

```
npx cypress open
```

3.2.Click on the `Continue` button in opened window:


![Continue button in the first window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz8v0tu2dybg6kbu6jdd.png)

3.3.Click on the `E2E` testing (if you use this type of testing):


![E2E button in the second window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jv9jbpnirfrpjhyhdrea.png)

3.4.Click on the `Continue` button for creating necessary files:


![Continue button for creating necessary files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rddcorqv18mzb1faaq81.png)

3.5.Close window and check that files are created:


![New files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0uh0nb2bo3v7k8mjo9u.png)

3.6.Create files with tests `cypress/e2e/tests`. If you don't have tests, you can use these examples:

`cypress/e2e/tests/bing/bing_test.spec.js`:

```js
describe('Test for Bing', () => {
  it('Test login/password data for different environments', () => {
    cy.visit('/');
    cy.get("input[type='search']").type(`${Cypress.env('login')} + ${Cypress.env('password')}`);
  });
});

```

`cypress/e2e/tests/google/google_test.spec.js`:

```js
describe('Test for Google', () => {
  it('Test login/password data for different environments', () => {
    cy.visit('/');
    cy.get('textarea[type="search"]').type(`${Cypress.env('login')} + ${Cypress.env('password')}`);
  });
});

```

Result after creating autotests:

![Created tests](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sajs3hs15tsyp3ztz3r4.png)

## Set up config file for using multiple environments and apps

1.Change your `cypress.config.js` file with this code:

```js
const { defineConfig } = require("cypress");

require("dotenv").config(); // line for working with .env file

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // -----config part-------
      // dynamic path to settings
      const settings = require(`./settings/${config.env.envName.toLowerCase()}.settings.json`);

      // add base.Url from file to current config
      if (settings.baseUrl) {
        config.baseUrl = settings.baseUrl;
      }

      // add pattern for autotests from file to current config
      if (settings.specPattern) {
        config.specPattern = settings.specPattern;
      }

      // add all settings from file to current config
      if (settings.env) {
        config.env = {
          ...config.env,
          ...settings.env,
        };

        // add login and password variables from file to current config
        // you can add what ever you want with the same way to current cypress config
        config.env.login = process.env[`${settings.env.login}`];
        config.env.password = process.env[`${settings.env.password}`];
      }
      // -----config part-------

      return config;
    },
  },
});
```

2.Create settings folder in your project:


![Settings folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91iab7lqgancl04qic75.png)

3.Add settings for several environments or apps in `settings` folder with this template: `fileName.settings.json` or you can use your own template, but change this line in `cypress.config.js` file:

```js
const settings = require(`./settings/${config.env.envName.toLowerCase()}.settings.json`);
```

Let's create these files for our example:

`local.settings.json`:

```json
{
  "baseUrl": "https://www.google.com/",
  "specPattern": "cypress/e2e/tests/google/**/*.spec.{js, jsx, ts, tsx}",
  "env": {
    "login": "GOOGLE_LOCAL_LOGIN",
    "password": "GOOGLE_LOCAL_PASSWORD"
  }
}
```

`newApp.settings.json`:

```json
{
  "baseUrl": "https://www.bing.com/",
  "specPattern": "cypress/e2e/tests/bing/**/*.spec.{js, jsx, ts, tsx}",
  "env": {
    "login": "BING_LOGIN",
    "password": "BING_PASSWORD"
  }
}
```

`prod.settings.json`:

```json
{
  "baseUrl": "https://www.google.com/",
  "specPattern": "cypress/e2e/tests/google/**/*.spec.{js, jsx, ts, tsx}",
  "env": {
    "login": "GOOGLE_PROD_LOGIN",
    "password": "GOOGLE_PROD_PASSWORD"
  }
}
```

We created 3 files for different environments and apps. The first environment is `local`, the next - another app `newApp` and the last is another environment `prod`. They have different `baseUrl`, `specPattern` and data for our autotests.

Result:

![Files for settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bssl8c987hjhftgz2ik3.png)


Also, we should create `.env` file with actual data, because we use login and password, and it's private data. Our `cypress.config.js` file use these lines for getting data from `.env` file:

```js
config.env.login = process.env[`${settings.env.login}`];
config.env.password = process.env[`${settings.env.password}`];
```

Let's create `.env` file:

```
GOOGLE_LOCAL_LOGIN=google_local_login
GOOGLE_LOCAL_PASSWORD=google_local_password
GOOGLE_PROD_LOGIN=google_prod_login
GOOGLE_PROD_PASSWORD=google_prod_password
BING_LOGIN=bing_login
BING_PASSWORD=bing_password
```

Result:

![.env file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqvlekb1d94xfonoxdyc.png)

4.We set up our project for using different environments and apps, let's start to run our autotests.

## Run autotests for multiple environments and apps

For our example we have these environments and apps:

- `local`
- `newApp`
- `prod`

The same names we have for our settings. How to run it? It's simple. Use this template in command line:

```
npx cypress run --env envName=nameForYourEnvronment
```

Run for `local` environment:

```
npx cypress run --env envName=local
```

![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ez10njhe29ftz25y686.png)

Run for `newApp` app:

```
npx cypress run --env envName=newApp
```

![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orr1c9r0ql03o4pr6lq6.png)

Run for `prod` environment:

```
npx cypress run --env envName=prod
```

![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3cdk246ptmknmnz0iqa.png)

## Conclusion

If you completed all steps, you can use your Cypress project with different environments and apps. Let's repeat steps:

1. Create `settings` folder with your settings files, e.g. `local.settings.json`
2. Update your `cypress.config.js` file and add necessary part of code
3. Add private information into your `.env` file
4. Use this command for using your environments and apps separately: `npx cypress run -- --env envName=nameForYourEnvronment`. You can use all cypress terminal commands with it, e.g. `npx cypress open -- --env envName=nameForYourEnvronment` (open all autotests in UI mode with settings from settings folder) and others

Full code you can find in this [github repo](https://github.com/Smoliarick/cypress-example-multiple-environments/tree/main)

Thanks for reading this article! I hope it helps you to create a monorepo for your Cypress project. If you have any questions, or you get some errors, ping me in comments section.