After installing Cypress, it will create a recommended folder structure for you. There are four significant folders:
1. Cypress Fixtures Folder
We use this folder to store data objects or external pieces of static data that we use throughout the tests; you will be typically using them with cy.fixture command. Usually, the data is stored in JSON format.
2. Cypress Integration Folder
The next folder is integration; This is the main folder to store all your test. We add the Basic, End to End Test, Visual or Cucumber test here. All your spec files will be here. Test file can be written as .js, .jsx, .coffee and .cjsx.
Earlier, we have executed the script from this example folder; From the example folder, you can refer to different commands in Cypress; this will be very helpful during our script development.
3. Cypress Plugins Folder
It has its own index.js file. Put here your custom plugins code. You can find different plugins on the cypress.io website. The plugins file is a particular file that executes in Node before the project is loaded, before the browser launches, and during your test execution.
While the Cypress tests execute in the browser, the plugins file runs in the background Node process, giving your tests the ability to access the file system and the rest of the operating system by calling the cy.task() command.
The plugins file is an excellent place to define how you want to bundle the spec files via the preprocessors, find and launch the browsers via the browser launch API, and other things.
4. Cypress Support Folder
There are two files inside the support folder: commands.js and index.js
- command.js: is the file where you add your commonly used functions and custom commands. It includes functions you may call to use in different tests, such as the login function. Cypress created some functions for you, and you can override them here if you want.
- index.js: This file runs before every single spec file. This file is a great place to put global configuration and behavior that modifies Cypress like before or before each. By default, it is importing only commands.js, but you can import or require other files to keep things organized.
Cypress recommends the above folder. However, You can modify the folder configuration in your configuration file. cypress.json is the main configuration file; you can override different default settings for Cypress here.
Apart from the above four folders, we have a few Asset Folders like Screenshot, Download, and Video to store different related files, which we will discuss later.
