Cypress Folder Structure

Cypress creates a set of folders when you install it inside a project. Each folder holds a different piece of your testing setup. Understanding this structure helps you find files quickly and organize new tests properly.

The Main Folders

After installation, Cypress generates a folder named cypress at your project root. Inside it, you find several subfolders that separate different responsibilities.

cypress/
  e2e/
  fixtures/
  support/
cypress.config.js

A Simple Way to Picture It

Think of the cypress folder as a toolbox with labeled drawers. One drawer holds your actual tests. Another drawer holds sample data. A third drawer holds shared helper code. Everything has its own place, so nothing gets mixed up.

The e2e Folder

The e2e folder stores your test files. Each file inside this folder represents a group of related test cases. A file named login.cy.js might hold every test related to a login page. A file named cart.cy.js might hold every test related to a shopping cart.

Naming Test Files

Cypress test files typically end with .cy.js or .cy.ts. This naming pattern tells Cypress which files to treat as tests. A file without this pattern gets ignored during test runs.

The fixtures Folder

The fixtures folder stores static data used across your tests. A common example is a JSON file containing sample user information. Tests load this data instead of typing the same values repeatedly.

{
  "username": "testuser",
  "password": "secret123"
}

Storing data this way keeps your test files clean and easy to update.

The support Folder

The support folder holds code that runs before every test. It commonly includes custom commands and global settings. Placing shared logic here avoids repeating the same code across multiple test files.

Files Inside the Support Folder

A file named commands.js typically stores custom Cypress commands. A file named e2e.js runs automatically before each test file, making it a good place for global configuration.

The Configuration File

The cypress.config.js file sits at the project root, outside the cypress folder. It stores settings like the base web address, timeout values, and plugin configuration. Changing this file affects every test in your project.

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'https://example.com'
  }
})

Folder Structure Diagram

Project Root
 |
 |-- cypress.config.js   (settings)
 |
 |-- cypress/
      |-- e2e/           (your test files)
      |-- fixtures/      (sample data)
      |-- support/       (shared code)

Screenshots and Videos Folder

Cypress creates additional folders during test runs to store screenshots and videos. These folders appear automatically and do not need manual setup. They help you review what happened during a failed test.

Organizing Larger Projects

Large projects often group test files into subfolders inside e2e, such as e2e/auth or e2e/checkout. This grouping mirrors the structure of the actual application being tested. A well-organized folder structure makes it easier for new team members to find relevant tests.

Key Points

• The e2e folder stores your actual test files.
• The fixtures folder stores reusable sample data.
• The support folder stores shared code and global settings.
• The cypress.config.js file controls project-wide settings.
• Cypress automatically creates folders for screenshots and videos during test runs.