Cypress folder structure - Build an Automation Script
/// <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.
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.
Practice
Solution
Step 1: Understand folder purposes
Thee2efolder is designed to hold end-to-end test files in Cypress.Step 2: Differentiate from other folders
fixturesholds test data,supporthas helper code, andpluginsmanages plugins, not tests.Final Answer:
e2e-> Option DQuick Check:
Tests go ine2efolder [OK]
e2e folder by default [OK]- Confusing
fixtureswith test files - Thinking
supportholds tests - Assuming
pluginsstores tests
Solution
Step 1: Recall default Cypress folder structure
Fixture files are stored directly inside thecypress/fixturesfolder.Step 2: Eliminate incorrect paths
Options placing fixtures insidesupportore2eare incorrect. Also,fixtures/cypressis not standard.Final Answer:
cypress/fixtures -> Option AQuick Check:
Fixtures folder iscypress/fixtures[OK]
cypress/fixtures [OK]- Placing fixtures inside
support - Adding extra nested folders incorrectly
- Confusing fixtures with test files location
cypress/
e2e/
fixtures/
support/
commands.js
index.jsSolution
Step 1: Identify default support file
Cypress automatically loadscypress/support/index.jsas the support file.Step 2: Differentiate from other files
commands.jsis imported insideindex.js, but Cypress looks forindex.jsby default.Final Answer:
cypress/support/index.js -> Option BQuick Check:
Support file =cypress/support/index.js[OK]
support/index.js by default [OK]- Choosing commands.js as main support file
- Looking in e2e or fixtures folders for support
- Assuming support file is optional
cypress/support instead of cypress/e2e. What issue will you face?Solution
Step 1: Understand folder roles
Thesupportfolder is for helper code, not test files.Step 2: Consequence of wrong placement
Cypress only runs tests insidee2efolder by default, so tests insupportwon't run.Final Answer:
Tests will not run because Cypress does not look for tests insupport-> Option AQuick Check:
Tests must be ine2e, notsupport[OK]
e2e folder won't run [OK]- Assuming tests run anywhere inside cypress folder
- Confusing support folder as test location
- Thinking fixtures affect test execution location
Solution
Step 1: Identify fixture folder purpose
Thecypress/fixturesfolder is meant for test data files, including environment-specific data.Step 2: Organize environment data properly
Using subfolders likedevandprodinsidefixtureskeeps data organized and easy to load.Final Answer:
Place all environment files insidecypress/fixtureswith subfolders likedev,prod-> Option CQuick Check:
Environment data belongs infixtureswith subfolders [OK]
fixtures for environment data [OK]- Putting data in
supportfolder - Mixing data files with test files in
e2e - Creating folders outside Cypress structure
Ready to prove it?
Pass the test and this pattern moves unknown
