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

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);
});
});

Answer 1

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
},