How to use process.env variables in browser running by Cypress?

In modern-day web applications, testing plays a really vital role in keeping up the integrity of the software. Cypress has become a very popular choice due to its simplicity & robust features. One common challenge is securely handling the specific environment variables like API Keys and secret tokens, particularly when these tests are running on the browser environment.

Cypress gives amazing support for environment variables through " process.env ". However, taking care of these environment variables within the browser setting needs an extraordinary approach since web browser scripts cannot straightforwardly access environment variables.

Step-by-Step Code Implementation

Step 1: Install the Cypress Plugin

Firstly, we have to install the Cypress plugin, by using the npm command :

npm install cypress --save-dev

Step 2: Open the Cypress Test Runner

After installing Cypress plugin we have to Open the Cypress Test Runner window , using the following command:

npx cypress open

This will open the Cypress Test Runner and also check whether the default Test Case of Cypress is Running or Not in your System. Please Select the specific Test File to run the Test Cases or to create " Create New Spec Section " to create the new Test File for Running Test Cases.

Step 3: Project Structure Looks like

Step 4: Define the Environment Variables

In Cypress , environment variables are defined in a few different ways, such as in " cypress..config.js / cypress.config.ts " files. Another option is to pass the environment variables directly through CLI during running the Test Case.

Let's define the environment variable in the " cypress..config.js / cypress.config.ts " file.

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

module.exports = defineConfig({
  e2e: {
    env: {
      MY_API_KEY: '123456789abcdef'
    },
    viewportWidth: 1280,
    viewportHeight: 720
  }
});

Step 5: Create Custom Command to Expose Environment Variable to the Browser

• Cypress has the " process.env " method to access all the environment variable. To make environment variable available to the browser, you need to pass them explicitly.
• Custom Cypress command to inject the environment variable into your tests.
• In the " cypress/support/command.js ", please add this custom command to expose Environment Variable for the specific test case.

Cypress.Commands.add('getEnvVar', (envVarName) => {
    return Cypress.env(envVarName);
});
  

Step 6: Access the Environment Variable in your Test case

Now after configuring custom command in " commands.js " Now the Test file are allowed to access the environment variable & pass them into the browser.

Step 7: Run Cypress Test with Environment Variable

Now you can Run the Cypress Test Case with specific environment variable in two ways:

• Directly From CLI with API Key: Pass the environment variable when you run Cypress via command line.

npx cypress run --env MY_API_KEY=abcdef123456

• By using command : To run the Test Case in the Cypress use the following command .

// without API Key

npx cypress run


// with API Key
npx cypress run --env MY_API_KEY=123456789abcdef


// Run the Specific Test Case
npx cypress run --spec "cypress/e2e/env_test.cy.js"

Output:

• Check Output In Cypress GUI : Once we run the test cases , we are going the result of our test cases in real-time with step-by-step logs & preview of the execution of the test cases , including the Test PASSED or Test FAILED.
• Check Output in Headless Mode : After Running " npm cypress run " we are ready to see the output in the terminal , which includes test passes , failures and any other error related message.

Example of Output Illustrated:

For example, when running the above test cases , if in case Our API Key & process.env configured Correctly , then test will PASSED.

assert : expected <window> to have property
 ✓ apiKey** of **123456789abcdef

If incase there might be some particular issue with API Key (like Mismatch or Not correct) or not properly configured process.env , we will see the FAILURE Message in the Cypress Test Runner Console .

assert expected <window> to have property 
apiKey** of **123456789abcdefg , 
 X **but got 123456789abcdefg

For passed test cases output:

For failed test cases output:

Conclusion

By utilizing environment variables into your Cypress test it is essential for keeping you sensitive data secure while ensuring your tests are flexible & adaptable to different environments. By using above steps we can safely use " process.env " variable in your browser-based Cypress test.