Bird
Raised Fist0
Cypresstesting~15 mins

Cypress folder structure - Build an Automation Script

Choose your learning style10 modes available
Verify Cypress default folder structure is present after installation
Preconditions (2)
Step 1: Open the project root directory
Step 2: Locate the 'cypress' folder
Step 3: Inside the 'cypress' folder, verify the presence of 'fixtures', 'integration', 'plugins', and 'support' folders
Step 4: Open the 'cypress.json' configuration file in the project root
✅ Expected Result: The 'cypress' folder contains 'fixtures', 'integration', 'plugins', and 'support' folders. The 'cypress.json' file exists in the project root.
Automation Requirements - Cypress
Assertions Needed:
Verify 'cypress' folder exists
Verify 'fixtures', 'integration', 'plugins', and 'support' folders exist inside 'cypress'
Verify 'cypress.json' file exists in project root
Best Practices:
Use cy.task to access Node.js file system for folder and file existence checks
Use explicit assertions with cy.wrap and chai assertions
Keep test code clean and readable
Automated Solution
Cypress
/// <reference types="cypress" />

// In cypress/plugins/index.js add this task to check folder and file existence
module.exports = (on, config) => {
  const fs = require('fs');
  const path = require('path');

  on('task', {
    checkExists({ pathToCheck }) {
      return fs.existsSync(pathToCheck);
    }
  });
};

// Test file: cypress/integration/folder_structure_spec.js

describe('Cypress folder structure verification', () => {
  const projectRoot = Cypress.config('projectRoot');
  const cypressFolder = `${projectRoot}/cypress`;

  it('should have cypress folder', () => {
    cy.task('checkExists', { pathToCheck: cypressFolder }).then(exists => {
      expect(exists).to.be.true;
    });
  });

  ['fixtures', 'integration', 'plugins', 'support'].forEach(subfolder => {
    it(`should have ${subfolder} folder inside cypress`, () => {
      cy.task('checkExists', { pathToCheck: `${cypressFolder}/${subfolder}` }).then(exists => {
        expect(exists).to.be.true;
      });
    });
  });

  it('should have cypress.json file in project root', () => {
    cy.task('checkExists', { pathToCheck: `${projectRoot}/cypress.json` }).then(exists => {
      expect(exists).to.be.true;
    });
  });
});

This test uses Cypress tasks to access the Node.js file system because Cypress commands run in the browser context and cannot directly check files or folders on disk.

In cypress/plugins/index.js, we define a task checkExists that returns true if a given path exists.

The test file folder_structure_spec.js uses this task to verify the presence of the cypress folder, its subfolders fixtures, integration, plugins, and support, and the cypress.json configuration file in the project root.

Each check uses cy.task and asserts the result is true, ensuring the folder structure is as expected.

Common Mistakes - 3 Pitfalls
Trying to check folder existence using only Cypress browser commands
{'mistake': "Hardcoding absolute paths instead of using Cypress.config('projectRoot')", 'why_bad': 'Hardcoded paths may not work on different machines or environments, causing tests to fail.', 'correct_approach': "Use Cypress.config('projectRoot') to get the project root dynamically."}
Not asserting the result of the file existence check
Bonus Challenge

Now add data-driven testing to verify additional custom folders inside the 'cypress' folder, such as 'e2e' and 'support_old', using an array of folder names.

Show Hint

Practice

(1/5)
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
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard