[FIXED] How to using .env variable in package.json

Issue

I'm using Cypress to run some tests with my VueJS project.

I just want to run test with browser I want so I made a .env like below

BROWSER=edge

And in package.json file, I write a command like this:

"scripts":{
      "cy:run" : "cypress run --browser %BROWSER%"
}

I know I can put the command like this

"cy:run" : "cypress run --browser edge"

But the reason I created an .env file is when the test is finished, I want to save my test result with the browser's name. So when I change the BROWSER in my .env, after that I just only run npm command.

But it didn't work. Cypress cannot detect which browser I wanted. I've tried so many ways, including this.

Can anyone tell me how to make it work? Super many thanks.

I've tried with a specific browser, when the test is done, test results save with the name I want, which means BROWSER in .env file is OK to use.

Solution

I figured this out, by using cross-env

First I install cross-env with npm i cross-env

In my package.json, I modified like this

"scripts":{
   "run:env" : "cross-env BROWSER=\"edge\" npm run cy:run"
   "cy:run" : "cross-env-shell cypress run --browser=$BROWSER"
 }

Then I run npm run run:env

Everything works now.

The process.env.BROWSER is still usable even I deleted the .env file

Answered By - Nguyễn Nhật Trường

Answer Checked By - Clifford M. (PHPFixing Volunteer)