Cypress folder structure - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Identify the purpose of the 'fixtures' folder in Cypress

In a typical Cypress project, what is the main purpose of the fixtures folder?

A To hold custom commands and reusable functions

B To keep the test specification files with test cases

C To contain screenshots and videos from test runs

D To store test data files like JSON or CSV used during tests

💡 Hint

Think about where you keep sample data that tests can load.

The fixtures folder is used to store static data files such as JSON or CSV. These files provide test data that tests can load and use to simulate real inputs.

🧠 Conceptual

intermediate

Role of the 'support' folder in Cypress

What is the primary role of the support folder in a Cypress project?

A To keep the test specification files

B To store reusable code like custom commands and global configurations

C To save screenshots and videos from test runs

D To hold environment configuration files

💡 Hint

Think about where you put code that helps tests but is not a test itself.

The support folder contains reusable code such as custom commands and global configurations that help tests run smoothly and avoid repetition.

❓ Predict Output

advanced

Number of test files in 'integration' folder after adding tests

Given the following Cypress folder structure, how many test files will Cypress recognize inside the integration folder?

cypress/
  integration/
    login.spec.js
    signup.spec.js
    dashboard/
      overview.spec.js
      stats.spec.js
  fixtures/
  support/

A 4

B 3

C 2

D 5

💡 Hint

Count all .spec.js files including those in subfolders.

Cypress treats all .spec.js files inside the integration folder and its subfolders as test files. Here, there are 4 such files.

❓ locator

advanced

Best folder to place environment-specific config files in Cypress

Where should you place environment-specific configuration files in a Cypress project to keep them organized and easily accessible?

A Inside the <strong>cypress</strong> root folder alongside <code>fixtures</code> and <code>support</code>

B Inside the <strong>fixtures</strong> folder

C Inside the <strong>integration</strong> folder

D Inside the <strong>support</strong> folder

💡 Hint

Think about where config files should live so they are not mixed with test code or test data.

Environment-specific config files are best placed in the root cypress folder alongside fixtures and support to keep them separate from test code and data.

❓ framework

expert

Order of Cypress folder loading during test execution

In what order does Cypress load these folders when running tests?

1. support
2. fixtures
3. integration

A 3,2,1

B 1,2,3

C 2,1,3

D 1,3,2

💡 Hint

Consider when test data, support code, and test specs are loaded.

Cypress first loads support files to set up commands and configurations, then loads fixtures for test data, and finally runs the integration test files.

Practice

1. Which folder in Cypress is primarily used to store your test files?

easy

A. plugins

B. fixtures

C. support

D. e2e

Solution

1. Step 1: Understand folder purposes

   The e2e folder is designed to hold end-to-end test files in Cypress.

2. Step 2: Differentiate from other folders

   fixtures holds test data, support has helper code, and plugins manages plugins, not tests.

3. Final Answer:

   e2e -> Option D

4. Quick Check:

   Tests go in e2e folder [OK]

Hint: Tests live in e2e folder by default [OK]

Common Mistakes:

• Confusing fixtures with test files
• Thinking support holds tests
• Assuming plugins stores tests

2. Which of the following is the correct path to place fixture files in a Cypress project?

easy

A. cypress/fixtures

B. cypress/support/fixtures

C. cypress/e2e/fixtures

D. fixtures/cypress

Solution

1. Step 1: Recall default Cypress folder structure

   Fixture files are stored directly inside the cypress/fixtures folder.

2. Step 2: Eliminate incorrect paths

   Options placing fixtures inside support or e2e are incorrect. Also, fixtures/cypress is not standard.

3. Final Answer:

   cypress/fixtures -> Option A

4. Quick Check:

   Fixtures folder is cypress/fixtures [OK]

Hint: Fixtures go directly under cypress/fixtures [OK]

Common Mistakes:

• Placing fixtures inside support
• Adding extra nested folders incorrectly
• Confusing fixtures with test files location

3. Given the following folder structure, where will Cypress look for support files by default?

cypress/
  e2e/
  fixtures/
  support/
    commands.js
    index.js

medium

A. cypress/support/commands.js

B. cypress/support/index.js

C. cypress/fixtures/index.js

D. cypress/e2e/index.js

Solution

1. Step 1: Identify default support file

   Cypress automatically loads cypress/support/index.js as the support file.

2. Step 2: Differentiate from other files

   commands.js is imported inside index.js, but Cypress looks for index.js by default.

3. Final Answer:

   cypress/support/index.js -> Option B

4. Quick Check:

   Support file = cypress/support/index.js [OK]

Hint: Support file is always support/index.js by default [OK]

Common Mistakes:

• Choosing commands.js as main support file
• Looking in e2e or fixtures folders for support
• Assuming support file is optional

4. You placed your test files inside cypress/support instead of cypress/e2e. What issue will you face?

medium

A. Tests will not run because Cypress does not look for tests in support

B. Tests will run normally without any issue

C. Tests will run but fixtures won't load

D. Support commands will override test files

Solution

1. Step 1: Understand folder roles

   The support folder is for helper code, not test files.

2. Step 2: Consequence of wrong placement

   Cypress only runs tests inside e2e folder by default, so tests in support won't run.

3. Final Answer:

   Tests will not run because Cypress does not look for tests in support -> Option A

4. Quick Check:

   Tests must be in e2e, not support [OK]

Hint: Tests outside e2e folder won't run [OK]

Common Mistakes:

• Assuming tests run anywhere inside cypress folder
• Confusing support folder as test location
• Thinking fixtures affect test execution location

5. You want to organize your test data for multiple environments in Cypress. Which folder and structure is best practice to keep environment-specific fixture files?

hard

A. Store environment data inside cypress/e2e alongside tests

B. Put environment files inside cypress/support as separate JS files

C. Place all environment files inside cypress/fixtures with subfolders like dev, prod

D. Create a new folder outside cypress for environment data

Solution

1. Step 1: Identify fixture folder purpose

   The cypress/fixtures folder is meant for test data files, including environment-specific data.

2. Step 2: Organize environment data properly

   Using subfolders like dev and prod inside fixtures keeps data organized and easy to load.

3. Final Answer:

   Place all environment files inside cypress/fixtures with subfolders like dev, prod -> Option C

4. Quick Check:

   Environment data belongs in fixtures with subfolders [OK]

Hint: Use subfolders in fixtures for environment data [OK]

Common Mistakes:

• Putting data in support folder
• Mixing data files with test files in e2e
• Creating folders outside Cypress structure