Folder Structure in a Cypress Project

Folder Structure in a Cypress Project – Explained Simply

When you set up Cypress in a project (npx cypress open or npm install cypress), it creates a default folder structure like this:

cypress/
├── e2e/           # Your actual test files go here
├── fixtures/      # Static test data (JSON files)
├── support/       # Reusable code, custom commands, setup logic
└── downloads/     # (Optional) For downloaded files during tests
cypress.config.js  # Cypress configuration file

---

🔍 Let’s Break It Down

1. cypress/e2e/ ✅

E2E tests (end-to-end) are written here.

• Test files usually end with .cy.js or .cy.ts

• Each file contains one or more describe() and it() blocks.

📌 Example: login.cy.js, signup.cy.ts

---

2. cypress/fixtures/ 📄

Use this for test data in JSON format.

📌 Example:
user.json might contain:

json
{
  "username": "rasagna",
  "password": "test123"
}

You can load it in your test:

js
cy.fixture('user').then((data) => {
  cy.get('#username').type(data.username)
})

---

3. cypress/support/ 🧩

Used for shared logic, like:

• commands.js: Add custom commands using Cypress.Commands.add()

• e2e.js: Runs before every test file (good for global setup)

📌 Example in commands.js:

js
Cypress.Commands.add('login', (username, password) => {
  cy.get('#user').type(username)
  cy.get('#pass').type(password)
  cy.get('#submit').click()
})

---

4. cypress.config.js ⚙️

The main config file where you define:

• Base URL

• Timeouts

• Reporter settings

• Test patterns

📌 Example:

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    baseUrl: "http://localhost:3000",
    setupNodeEvents(on, config) {
      // plugins or reporters
    }
  }
});

---

5. Other Optional Folders

• downloads/: Created if your tests trigger file downloads

• videos/, screenshots/: Cypress saves test run recordings and failure screenshots (if enabled)

---

🧠 Summary

Folder/File	Purpose
e2e/	Where your test files live
fixtures/	Test data (e.g., users, products)
support/	Reusable code, custom commands
cypress.config.js	Configuration settings

Learn Cypress Course in Hyderabad

Read More 

How to Test Forms Using Cypress

Introduction to Cypress Test Runner

How Cypress Works Behind the Scenes

Installing Cypress: Step-by-Step Guide