How do you set up a Cypress project?

A new project needs the Cypress package, a config file and the conventional folder layout. Running the interactive runner once creates example specs and support files. After that you can delete the examples and write your own suite.

npm install --save-dev cypress
npx cypress open

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    baseUrl: "http://localhost:3000",
    supportFile: "cypress/support/e2e.ts",
    specPattern: "cypress/e2e/**/*.cy.ts",
    viewportWidth: 1280,
    viewportHeight: 800,
  },
});

The typical layout

• cypress/e2e for end-to-end specs
• cypress/support for shared commands and global hooks
• cypress/fixtures for JSON or other test data
• cypress.config.ts for project configuration
• A root tsconfig.json that includes the Cypress types

Add the Cypress types to the TypeScript configuration so cy, Cypress and the custom command declarations resolve in the editor. If the project already has a frontend tsconfig, keep the Cypress config separate to avoid mixing browser and Node settings.