✅ Quick Tip: Cypress.env()

Start working with Cypress and you’ll quickly find you need to implement the use of Cypress.env(). Environment Variables are values that you may not want to store in GitHub because they need to be kept secret, need to be dynamic, or both.

While Cypress does a great job explaining what Environment Variables are and how to use them with Cypress.env(), I still find implementing them a little tricky due to the many ways they can be added to tests.

Consider this your cheat sheet for when and how to use Cypress.env()

TL;DR

1. Reference the variable when storing them using .env:

cy.get("[aria-label='text-field']").type(Cypress.env("email"));

1. Pair the variable with {enter}:

cy.get("[aria-label='Search for a Name']").type(`${fullName}{enter}`);

1. When used in a Cypress command:

beforeEach(() => { cy.login(Cypress.env("email"), Cypress.env("password"));});

1. Use in an API call:

auth: Cypress.env("apiToken"),

Read on to dive deeper 🥽

1. When Values are stored in the .env file

If variables are being stored in .env, make sure they are formatted as:

// .envCYPRESS_LOGIN_EMAIL="[email protected]" // Leading the value with 'CYPRESS' helps everyone identify which value you're referencingCYPRESS_LOGIN_PASSWORD="example-password"

In the cypress.config add the following at the top of the file:

// cypress.config.tsimport { defineConfig } from "cypress";import dotenv from "dotenv";dotenv.config({ path: "/tesseract/.env.local" });

In the env: section, process the .env variables:

// cypress.config.tsexport default defineConfig({ projectId: process.env.CYPRESS_PROJECT_ID, e2e: { setupNodeEvents(on, config) { // implement node event listeners here }, env: { email: process.env.CYPRESS_LOGIN_EMAIL, password: process.env.CYPRESS_LOGIN_PASSWORD, }, baseUrl: process.env.CYPRESS_WEB_APP_BASE_URL, },});

Then, in your tests, reference the variable:

cy.get("[aria-label='text-field']").type(Cypress.env("email"));

Run the test…

❤️‍🔥 The value is referenced!

Here are some other quick examples of how to format and use Cypress.env() (or other values stored as variables)

2. When you need to pair the variable with {enter} in cy.type()

cy.get("[aria-label='Search Email List']").type( `${Cypress.env("email")}{enter}`, );

or

cy.get("[aria-label='Search for a Name']").type(`${fullName}{enter}`);

3. When used in a Cypress Command

// commands.tsCypress.Commands.add("login", (email, password) => { const baseUrl = Cypress.config("baseUrl"); cy.request("POST", `${baseUrl}/login`, { email, password, }).then((response) => { ... });

then use in the test…

beforeEach(() => { cy.login(Cypress.env("email"), Cypress.env("password"));});

4. When used in an API Request:

cy.request({ headers, auth: Cypress.env("apiToken"), method: "POST", url: "/login", body: { ... }, }).then((response) => { ... });

I’m sure that’s not all. What else am I missing? How do you use Cypress.env() in your team’s test suite?

Till next time…