Cypress folder structure - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to specify the folder where test files are stored in Cypress.

Cypress

cypress/[1]

Drag options to blanks, or click blank then click option'

Asupport

Bintegration

Cfixtures

Dplugins

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing the support folder with the test files folder.

Using fixtures folder which holds test data, not tests.

The integration folder is where Cypress test files are placed by default.

2fill in blank

medium

Complete the code to specify the folder where reusable commands and utilities are placed.

Cypress

cypress/[1]

Drag options to blanks, or click blank then click option'

Aplugins

Bintegration

Cfixtures

Dsupport

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing support with fixtures or integration folders.

Thinking plugins folder holds reusable commands.

The support folder contains reusable commands and utilities to help tests run smoothly.

3fill in blank

hard

Fix the error in the folder name that holds test data files.

Cypress

cypress/[1]

Drag options to blanks, or click blank then click option'

Afixtures

Bfixture

Cfixturees

Dfixures

Attempts:

3 left

💡 Hint

Common Mistakes

Using singular form 'fixture' instead of plural.

Misspelling the folder name.

The correct folder name for test data files is fixtures (plural).

4fill in blank

hard

Fill both blanks to complete the Cypress folder structure for plugins and test files.

Cypress

cypress/[1] and cypress/[2]

Drag options to blanks, or click blank then click option'

Aplugins

Bsupport

Cintegration

Dfixtures

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping plugins and support folders.

Confusing fixtures with plugins.

The plugins folder holds code to extend Cypress, and integration holds the test files.

5fill in blank

hard

Fill all three blanks to complete the Cypress folder structure for test data, support files, and plugins.

Cypress

cypress/[1], cypress/[2], and cypress/[3]

Drag options to blanks, or click blank then click option'

Afixtures

Bsupport

Cplugins

Dintegration

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the roles of support and plugins folders.

Confusing fixtures with integration.

The fixtures folder holds test data, support holds reusable commands, and plugins holds code to extend Cypress.

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