Skip to main content

Cypress Folder Structure

After installing Cypress, it will create a recommended folder structure for you. There are four significant folders:

  1. Fixture
  2. Integration
  3. Plugins
  4. Support

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 ScreenshotDownload, and Video to store different related files, which we will discuss later.

Video Tutorial: Cypress Folder Structure

Tags
Submitted by tgoswami on April 29, 2021

Tarun has 11+ years of experience in Quality Assurance in different domains like Banking, E-commerce, Health and Education.

About

At ProgramsBuzz, you can learn, share and grow with millions of techie around the world from different domain like Data Science, Software Development, QA and Digital Marketing. You can ask doubt and get the answer for your queries from our experts.