Using .env variables in package.json: a step-by-step guide

Question

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

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

BROWSER=edge

In the package.json file, I wrote the following command:

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

I know I can enter the command like this

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

But the reason why I created the .env file is that after the test is completed, I want to save the test results with the name of the browser. So when I change the browser in the .env I just run the npm command.

But without success. Cypress cannot detect the browser I want. I've tried many methods including this.

Can anyone tell me how to make it work? Thank you so much.

I have tried using a specific browser and after the test is completed, the test results are saved with the name I want, which means the BROWSER in the .env file works.

Answer 1

Full "browser" option requires two dashes

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

Or use a dash to represent the shortcut "-b"

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

Answer 2

I solved this problem by using cross-env

First, I installed cross-env using npm i cross-env

In my package.json, I modify it 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 is fine now.

Even if I delete the .env file, process.env.BROWSER is still available