Unable to read values from .env.local file in latest Cypress version

Question

I am using latest Cypress version 10.11.0 and I am trying to read username, password from .env.local file in my system using process.env. But some how it not getting the values from the .env.local file ? Could someone please advise ?

Note : As a normal way, I am able to get values if I provide values in cypress.config.js (see below). Since username, password can't expose in config, i need to read it from .env.local file.

env:{
    MYBOOKS_USERNAME:"testuser1@test.com",
    MYBOOKS_PASSWORD:"Some_password"
  },

// cypress.config.js file

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

module.exports = defineConfig({
  chromeWebSecurity: false,
  viewportWidth :1920,
  viewportHeight:1080,
  responseTimeout: 60000,
  fixturesFolder: 'cypress/fixtures',
  screenshotsFolder: 'cypress/screenshots',
  videosFolder: 'cypress/videos',
  numTestsKeptInMemory: 10,
  video:false,
  e2e: {
    setupNodeEvents(on, config) {
      require("cypress-grep/src/plugin")(config),
       
      // implement node event listeners here
      on('before:browser:launch', (browser, launchOptions ) => {
        console.log("Print browser name: "+browser.name);

        if (browser.name === 'chrome' || browser.name === 'chrome' && browser.isHeadless) {
            launchOptions.args.push('--disable-features=SameSiteByDefaultCookies')
            return launchOptions
        }

      });
      on('task', {
          logAtConsole (message) {
          console.log('Printing the data using task::', message);
          return null
        }
      });
    },
    baseUrl: "https://somebookssite-test.com",
    specPattern: "cypress/e2e/booksSite/**/*.spec.{js,jsx,ts,tsx}",
  },
});

// .env.local file

CYPRESS_MYBOOKS_USERNAME=testuser1@test.com,
CYPRESS_MYBOOKS_PASSWORD=Some_password

// commands.js file

const userName = process.env.MYBOOKS_USERNAME;
const userPassword = process.env.MYBOOKS_PASSWORD;

    Cypress.Commands.add('loginRequest', (url) => {
    
      helperFunctions.dynamicEnvironmentSelection();
      const apiEndpoint = helperFunctions.getItemFromLocalStorage('apiUrl');
      cy.request({
        method: 'POST',
        url: apiEndpoint + url,
        contentType: 'application/json',
        body: {
          username: userName,
          password: userPassword,
        }
      }).then((resp) => {
        helperFunctions.setLoginCookies(resp);
      });
    });

TesterDick · Accepted Answer · 2022-11-15T08:25:51.120

You could use dotenv to read the .env.local file.

Using the convention for this tool, use key=value format in .env.local.

MYBOOKS_USERNAME="testuser1@test.com"
MYBOOKS_PASSWORD="Some_password"

const { defineConfig } = require('cypress')
const path = require('path')
const dotenv = require('dotenv')
const envLocal = dotenv.config({path: path.resolve(process.cwd(), '.env.local')})

module.exports = defineConfig({
  env: {

    // non-sensitive env vars hard-coded here
    login_url: '/login',
    products_url: '/products'

    // sensitive env vars read in above from external file
    ...envLocal
  },

Without dotenv

If you change the external file to .env.local.json, then it's possible to read it directly.

{
  "MYBOOKS_USERNAME": "testuser1@test.com",
  "MYBOOKS_PASSWORD": "Some_password"
}

const { defineConfig } = require('cypress')
const envLocal = require('./.env.local.json')

module.exports = defineConfig({
  env: {

    // non-sensitive env vars hard-coded here
    login_url: '/login',
    products_url: '/products'

    // sensitive env vars read in above from external file
    ...envLocal
  },

Unable to read values from .env.local file in latest Cypress version

1 Answers1

Linked