cypress.config.js settings - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of baseUrl setting in cypress.config.js

What will be the base URL used by Cypress tests if the following cypress.config.js is loaded?

Cypress

module.exports = {
  e2e: {
    baseUrl: 'https://example.com',
    setupNodeEvents(on, config) {
      // no changes
    }
  }
};

A https://localhost

B http://localhost:3000

C undefined

D https://example.com

💡 Hint

Look at the baseUrl property inside the e2e object.

The baseUrl is explicitly set to 'https://example.com' inside the e2e configuration. Cypress uses this as the base URL for all tests.

❓ assertion

intermediate

Correct assertion for viewportWidth in cypress.config.js

Given this cypress.config.js snippet, which assertion correctly verifies the viewport width setting?

Cypress

module.exports = {
  e2e: {
    viewportWidth: 1280,
    viewportHeight: 720
  }
};

A expect(config.viewportHeight).to.equal(1280);

B assert(config.viewportWidth === 1280);

C expect(config.e2e.viewportWidth).to.equal(1280);

D assert(config.e2e.viewportHeight === 1280);

💡 Hint

Check the property path and value for viewport width.

The viewportWidth is inside the e2e object and set to 1280. Option C correctly asserts this.

🔧 Debug

advanced

Identify the error in cypress.config.js

What error will Cypress throw when loading this cypress.config.js?

Cypress

module.exports = {
  e2e: {
    baseUrl: 'https://testsite.com',
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser = {}, launchOptions) => {
        launchOptions.args.push('--disable-gpu')
      });
    }
  }
};

A SyntaxError: Unexpected end of input

B TypeError: on is not a function

C No error, config loads successfully

D ReferenceError: launchOptions is not defined

💡 Hint

Check for missing or mismatched brackets and parentheses.

The arrow function passed to on is missing a closing parenthesis and curly brace, causing a syntax error.

🧠 Conceptual

advanced

Effect of setting video to false in cypress.config.js

What is the effect of setting video: false in the e2e configuration of cypress.config.js?

A Cypress will not record videos of test runs

B Cypress will disable screenshots on failure

C Cypress will run tests in headless mode only

D Cypress will skip all tests marked as @video

💡 Hint

Think about what the video setting controls in Cypress.

Setting video: false disables recording of videos during test runs, but does not affect screenshots or test execution mode.

❓ framework

expert

Correct way to configure retries in cypress.config.js

Which option correctly configures Cypress to retry failed tests 2 times for e2e tests only?

A module.exports = { retries: { runMode: 2, openMode: 0 } };

B module.exports = { e2e: { retries: { runMode: 2, openMode: 0 } } };

C module.exports = { e2e: { retries: 2 } };

D module.exports = { retries: 2 };

💡 Hint

Retries can be configured globally or per testing type. Here, only e2e tests should retry.

Option B correctly sets retries inside the e2e object with separate values for run and open modes.

Practice

1. What is the main purpose of the cypress.config.js file in a Cypress project?

easy

A. To set configuration options like base URL and test locations for Cypress tests

B. To write the actual test cases for Cypress

C. To install Cypress dependencies

D. To run Cypress tests manually from the command line

Solution

1. Step 1: Understand the role of cypress.config.js

   This file is used to configure how Cypress runs tests, including settings like base URL and test file paths.

2. Step 2: Differentiate from other files

   Test cases are written in separate test files, not in the config file. Installation and running commands happen outside this file.

3. Final Answer:

   To set configuration options like base URL and test locations for Cypress tests -> Option A

4. Quick Check:

   Config file sets options = D [OK]

Hint: Config file sets test environment and paths [OK]

Common Mistakes:

• Confusing config file with test files
• Thinking config installs Cypress
• Believing config runs tests manually

2. Which of the following is the correct way to export the Cypress configuration using defineConfig in cypress.config.js?

easy

A. module.exports = { baseUrl: 'http://localhost:3000' }

B. export const config = { baseUrl: 'http://localhost:3000' }

C. defineConfig({ baseUrl: 'http://localhost:3000' })

D. export default defineConfig({ e2e: { baseUrl: 'http://localhost:3000' } })

Solution

1. Step 1: Recall the modern Cypress config syntax

   Since Cypress 10+, the config file uses defineConfig and exports it as default with ES module syntax.

2. Step 2: Check the correct structure

   The e2e object wraps settings like baseUrl. export default defineConfig({ e2e: { baseUrl: 'http://localhost:3000' } }) matches this pattern exactly.

3. Final Answer:

   export default defineConfig({ e2e: { baseUrl: 'http://localhost:3000' } }) -> Option D

4. Quick Check:

   Use defineConfig with export default = B [OK]

Hint: Use export default defineConfig({ e2e: { ... } }) [OK]

Common Mistakes:

• Forgetting to wrap settings inside e2e object
• Using CommonJS export instead of ES module
• Not using defineConfig function

3. Given this cypress.config.js snippet, what will be the base URL used during test runs?

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'https://example.com',
    specPattern: 'cypress/e2e/**/*.cy.js'
  }
})

medium

A. http://localhost:3000

B. https://example.com

C. cypress/e2e/**/*.cy.js

D. No base URL is set

Solution

1. Step 1: Identify the baseUrl property in config

   The config sets baseUrl to 'https://example.com' inside the e2e object.

2. Step 2: Understand baseUrl usage

   This URL is used as the root for all relative URLs in tests, so it will be 'https://example.com'.

3. Final Answer:

   https://example.com -> Option B

4. Quick Check:

   baseUrl set to https://example.com = C [OK]

Hint: Look for baseUrl inside e2e object [OK]

Common Mistakes:

• Confusing specPattern with baseUrl
• Assuming default localhost URL
• Missing that baseUrl is inside e2e

4. You wrote this cypress.config.js but Cypress throws an error when running tests:

import { defineConfig } from 'cypress'

export default {
  e2e: {
    baseUrl: 'http://localhost:8080'
  }
}

What is the likely cause of the error?

medium

A. Using export default instead of module.exports

B. baseUrl must be outside the e2e object

C. Missing call to defineConfig wrapping the config object

D. baseUrl value must be an IP address

Solution

1. Step 1: Check the export syntax

   The config is exported as a plain object, but Cypress expects the config wrapped in defineConfig().

2. Step 2: Understand Cypress config requirements

   Without defineConfig, Cypress cannot properly parse the config, causing errors.

3. Final Answer:

   Missing call to defineConfig wrapping the config object -> Option C

4. Quick Check:

   Always wrap config in defineConfig() = A [OK]

Hint: Always wrap config object with defineConfig() [OK]

Common Mistakes:

• Placing baseUrl outside e2e
• Confusing export default with CommonJS
• Thinking baseUrl must be IP address

5. You want to set a custom environment variable API_KEY in cypress.config.js so it can be accessed in your tests. Which is the correct way to add it inside the config?

hard

A. export default defineConfig({ e2e: { env: { API_KEY: '12345' } } })

B. export default defineConfig({ env: { API_KEY: '12345' } })

C. export default defineConfig({ e2e: { baseUrl: 'http://localhost', API_KEY: '12345' } })

D. export default defineConfig({ e2e: { environment: { API_KEY: '12345' } } })

Solution

1. Step 1: Locate where environment variables go

   Environment variables for e2e tests go inside the env object nested within the e2e config.

2. Step 2: Verify correct property names

   The key must be env, not environment, and it must be inside e2e.

3. Final Answer:

   export default defineConfig({ e2e: { env: { API_KEY: '12345' } } }) -> Option A

4. Quick Check:

   Use e2e.env for env vars = A [OK]

Hint: Put env vars inside e2e.env object [OK]

Common Mistakes:

• Placing env outside e2e
• Using wrong key name like environment
• Adding env vars directly under e2e without env object