How to read environment files from e2e tests?

Question

Here's the structure of my Angular application:

MyApplication
  apps
      - app1
          - src
              - app
              - assets
              - environments //*****USE THIS FILES ****

      - app1-e2e
          - src
              - fixtures
              - integration
              - plugins
              - supports

I'm using Cypress for the e2e tests. For instance, I want to use the base URL, so that it depends on the environment (local, dev, ...):

it('should redirect to release', () => {
  cy.get('[data-testid="my-link"]').click();
  cy.url().should('include', 'http://localhost.homedepot.com:4200/');
});

if it's the development machine, it will be localhost.homedepot.com:4200. However, if the dev machine it will be myapplication-np.mycompany.com, and so forth.

We already have all this information in the environment files. Should I duplicate them in the e2e folder or is there a way to read them from the environment files.

PeaceAndQuiet · Accepted Answer · 2021-11-06T18:59:38.460

I came up with a way to quickly switch my environment when I need to, hope it helps.

To use it, add these lines to your cypress/plugins/index.js

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config

  // quick env switch
  if (config.env.target) {
      const { baseUrl, ...currentEnv } = config.env[config.env.target];
      config.baseUrl = baseUrl;
      config.env = { ...config.env, ...currentEnv }
  }

  return config;

}

Now you need to set your target environment and configure your environments like this:

In your cypress.json:

  ...
  "env": {
    "target": "dev",
    "dev": {
      "baseUrl": "http://www.myappurl-dev.com",
      "apiUrl": "http://www.myapiurl-dev.com",
      "username": "admin_dev"
    },
    "test": {
      "baseUrl": "http://www.myappurl-test.com",
      "apiUrl": "http://www.myapiurl-test.com",
      "username": "admin_test"
    }
  },
  ...

You can also set an environment in your cypress.env.json which should be in your .gitignore so it won't be pushed to your remote repo.

cypress.env.json:

{
  "target": "local",
  "local": {
    "baseUrl": "http://localhost:4000",
    "apiUrl": "http://localhost:22742",
    "username": "admin_local"
}

Finally, all you need to do is change target in cypress.json or cypress.env.json to quickly switch between your environments. Remember that any value set in cypress.env.json overwrite the ones set in cypress.json.

And then in your code, you would use it like this:

it('should redirect to release', () => {
  cy.get('[data-testid="my-link"]').click();
  cy.url().should('include', Cypress.config('baseUrl');
});

Edit #1
If your environment config already exists somewhere:
Have a look at how to set environment values from cypress/plugins/index.js here. They are showing how to get your .env, but you might also be able to read a .config file.

Edit #2:
I was able to read my root/src/web.config from cypress/plugins/index.js using fs and xml-js:

const convert = require('xml-js');
const fs = require('fs');

module.exports = (on, config) => {
    const xmlAngularConfig = fs.readFileSync('../path/to/your/config/file', 'utf8');
    const jsonAngularConfig = convert.xml2json(xmlAngularConfig, { compact: true, spaces: 4 });

    // Then you can add any value of jsonAngularConfig to cypress config
    config.baseUrl = jsonAngularConfig.url;

   // Don't forget to return config
   return config;
}

@PeaceAndQuit, you are still duplicating the information by creating new files with configuration information. Is there a way to use the information already existing in the environment files. Please take a look at the structure of the angular application that I included in the beginning of the question. — Richard77, Nov 05 '21 at 19:00
I want just to know. If it's not possible and/or not recommended, I can duplicate those information. I don't have a problem with that. I wanted just to know whether I can already reuse the same information existing in the environment files before duplicating them. — Richard77, Nov 05 '21 at 19:01
You're right, you should come up with a way to read your environment file from `cypress/plugins/index.js`. That's where you have access to config before everything else loads. — PeaceAndQuiet, Nov 06 '21 at 13:36
and that was the main purpose of my question. `Is it possible to read environment files of the main angular application from the e2e folder`. — Richard77, Nov 06 '21 at 14:17
Yes, as stated in my edit, you can set your environment from the `plugins/index.js` and since this file executes in the NodeJS environment, you can use `fs` or any other node package to get your config file wherever it is and merge it to cypress config. — PeaceAndQuiet, Nov 06 '21 at 17:56

How to read environment files from e2e tests?

1 Answers1