Environment variables for configuration in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Understanding Cypress environment variable usage

What will be the output of the following Cypress test code snippet when run with the environment variable USERNAME set to 'tester'?

Cypress

describe('Env Var Test', () => {
  it('prints username', () => {
    const user = Cypress.env('USERNAME')
    cy.log(`User is: ${user}`)
  })
})

A User is: tester

B User is: undefined

C User is: Cypress.env('USERNAME')

D Test fails with an error

💡 Hint

Remember Cypress.env() reads environment variables set before running tests.

Cypress.env('USERNAME') fetches the environment variable USERNAME. If set to 'tester', cy.log prints 'User is: tester'.

❓ assertion

intermediate

Correct assertion for environment variable in Cypress

Which assertion correctly verifies that the environment variable API_KEY equals '12345' in a Cypress test?

Cypress

const apiKey = Cypress.env('API_KEY')

A expect(apiKey).to.be.true

B assert(apiKey === '12345')

C expect(apiKey).to.equal('12345')

D assert.equal(apiKey, 12345)

💡 Hint

Use Cypress's recommended assertion style with expect().

expect(apiKey).to.equal('12345') correctly checks string equality. Option C uses less common syntax in Cypress, C checks boolean, D compares string to number.

🔧 Debug

advanced

Debugging missing environment variable in Cypress

A Cypress test fails because Cypress.env('PASSWORD') returns undefined, even though you set PASSWORD in cypress.config.js. What is the most likely cause?

A Cypress.env() cannot access variables from cypress.config.js

B PASSWORD is set under the wrong environment key in cypress.config.js

C PASSWORD variable name is case-insensitive and mismatched

D You must restart Cypress after setting environment variables

💡 Hint

Check how environment variables are structured in the config file.

Environment variables must be set under the 'env' key in cypress.config.js. If set elsewhere, Cypress.env() returns undefined.

🧠 Conceptual

advanced

Best practice for sensitive environment variables in Cypress

Which is the best practice to handle sensitive environment variables like API keys in Cypress tests?

A Store sensitive variables in cypress.env.json and commit to version control

B Hardcode sensitive variables directly in test files for clarity

C Use Cypress fixtures to store sensitive variables

D Set sensitive variables in CI/CD environment and access via Cypress.env()

💡 Hint

Think about security and version control best practices.

Setting sensitive variables in CI/CD environment variables and accessing them via Cypress.env() keeps secrets out of code and version control.

❓ framework

expert

Configuring Cypress environment variables for multiple environments

You want to run Cypress tests with different environment variables for 'staging' and 'production'. Which configuration approach allows this?

A Use separate cypress.config.js files named cypress.staging.config.js and cypress.production.config.js and specify --config-file option

B Set all variables in one cypress.config.js and switch using Cypress.env('ENV') inside tests

C Use environment variables only in test code without config files

D Manually edit cypress.config.js before each run to change variables

💡 Hint

Consider how Cypress supports multiple config files.

Cypress supports multiple config files. Using --config-file option lets you run tests with different environment variables per environment.

Practice

1. What is the main purpose of environment variables in Cypress testing?

easy

A. To configure tests without changing the test code

B. To write test assertions

C. To locate elements on the page

D. To generate test reports

Solution

1. Step 1: Understand environment variables role

   Environment variables store configuration data separately from code.

2. Step 2: Identify their use in Cypress

   They allow changing test settings without modifying test scripts.

3. Final Answer:

   To configure tests without changing the test code -> Option A

4. Quick Check:

   Environment variables = configure tests without code change [OK]

Hint: Environment variables store config, not test logic [OK]

Common Mistakes:

• Confusing environment variables with test assertions
• Thinking environment variables locate page elements
• Assuming environment variables generate reports

2. Which is the correct way to access an environment variable named API_URL inside a Cypress test?

easy

A. Cypress.env('API_URL')

B. process.env.API_URL

C. env.API_URL

D. getEnv('API_URL')

Solution

1. Step 1: Recall Cypress environment variable syntax

   Cypress uses Cypress.env('VAR_NAME') to access env variables.

2. Step 2: Match the correct syntax

   Only Cypress.env('API_URL') uses this correct method.

3. Final Answer:

   Cypress.env('API_URL') -> Option A

4. Quick Check:

   Access env vars with Cypress.env('VAR_NAME') [OK]

Hint: Use Cypress.env('VAR_NAME') to get env variables [OK]

Common Mistakes:

• Using Node.js process.env inside Cypress tests
• Trying to access env vars as plain variables
• Using incorrect function names like getEnv

3. Given the following cypress.config.js snippet:

export default defineConfig({
  env: {
    USERNAME: 'testUser',
    PASSWORD: 'pass123'
  }
})

What will cy.log(Cypress.env('USERNAME')) print during test execution?

medium

A. undefined

B. 'USERNAME'

C. 'testUser'

D. An error

Solution

1. Step 1: Check environment variable definition

   USERNAME is set to 'testUser' in cypress.config.js under env.

2. Step 2: Understand Cypress.env usage

   Cypress.env('USERNAME') returns the value 'testUser'.

3. Final Answer:

   'testUser' -> Option C

4. Quick Check:

   Cypress.env('USERNAME') = 'testUser' [OK]

Hint: Env vars return their set values, not keys [OK]

Common Mistakes:

• Expecting the key name instead of the value
• Assuming undefined if not set in test file
• Thinking Cypress.env throws error if variable exists

4. You wrote this code in your test:

const apiUrl = Cypress.env.API_URL;
cy.visit(apiUrl);

But the test fails with TypeError: Cannot read property 'API_URL' of undefined. What is the problem?

medium

A. cy.visit() cannot accept variables

B. The environment variable API_URL is not set in cypress.config.js

C. You must import Cypress before using it

D. You should use Cypress.env('API_URL') instead of Cypress.env.API_URL

Solution

1. Step 1: Identify how Cypress.env is accessed

   Cypress.env is a function, not an object, so use parentheses and quotes.

2. Step 2: Understand the error cause

   Using dot notation like Cypress.env.API_URL causes undefined error.

3. Final Answer:

   You should use Cypress.env('API_URL') instead of Cypress.env.API_URL -> Option D

4. Quick Check:

   Access env vars with Cypress.env('VAR_NAME') [OK]

Hint: Always call Cypress.env() as a function with string key [OK]

Common Mistakes:

• Using dot notation instead of function call
• Assuming env vars are properties, not accessed by function
• Ignoring error message details

5. You want to run Cypress tests with a different API URL without changing cypress.config.js. Which command line option correctly sets the environment variable API_URL to https://api.test.com?

hard

A. cypress run --config API_URL=https://api.test.com

B. cypress run --env API_URL=https://api.test.com

C. cypress open --env API_URL=https://api.test.com

D. cypress open --config API_URL=https://api.test.com

Solution

1. Step 1: Understand command line env variable setting

   Use --env VAR_NAME=value to set env variables temporarily.

2. Step 2: Identify correct command for running tests

   cypress run runs tests in headless mode; --env sets env vars.

3. Final Answer:

   cypress run --env API_URL=https://api.test.com -> Option B

4. Quick Check:

   Use --env to set env vars on command line [OK]

Hint: Use --env VAR=value with cypress run to override env vars [OK]

Common Mistakes:

• Using --config instead of --env for environment variables
• Trying to set env vars with cypress open command
• Confusing config options with env variables