top of page

Cypress Install & Config

Updated: Jul 1

This reference guide covers the complete workflow from installation to running tests.


Prerequisites


  • Node.js installed on your system

  • Visual Studio Code (or your preferred code editor)


Installation


npm install cypress --save-dev --force

The --save-dev flag ensures Cypress is installed as a development dependency, and --force resolves any potential dependency conflicts.


Initial Setup


npx cypress open

When you run this command for the first time:

  • Select "E2E Testing"

  • Choose your preferred browser (Chrome, Firefox, Edge, Electron)

  • Click "Start E2E Testing" to finish setup

This creates the Cypress folder structure in your project, including sample test files.


File Structure Overview


cypress/
├── e2e/                        # Your test files location
│   ├── 1-getting-started/      # Cypress sample tests
│   ├── 2-advanced-examples/    # Cypress sample tests
│   └── firstTest.spec.js       # Your actual test files
├── fixtures/                   # Test data storage
├── support/                    # Support files and custom commands
│   ├── e2e.js                  # Global setup
│   └── commands.js             # Custom commands
└── cypress.config.js           # Main configuration file

Key Directories

ree

e2e/ - Contains your test files. By default, Cypress creates 1-getting-started and 2-advanced-examples folders with sample tests.


fixtures/ - Store test data here (JSON files, mock responses, etc.).


support/ - Contains:


  • e2e.js - Executed first before all tests. Use for global setup and environment configuration.

  • commands.js - Define custom commands here (like reusable login functions).





Configuration


Configure cypress.config.js with basic settings:



Configuration Options


excludeSpecPattern - Removes the default Cypress sample tests (1-getting-started and 2-advanced-examplesfolders) from the test runner.


specPattern - Defines which files Cypress treats as tests. Pattern "cypress/e2e/**/*.{js,jsx,ts,tsx}" matches files like cypress/e2e/firstTest.spec.js.


baseUrl - Set to your application URL to use relative paths in tests.


viewportHeight/Width - Sets consistent browser dimensions for reproducible tests.


video: false - Disables video recording to speed up test execution.

Note: You can add a screenshot of your cypress.config.js file here.


Running Tests


npx cypress open

After configuration, the test runner shows:

  • Only your actual test files (like firstTest.spec.js)

  • Sample tests are hidden (excluded by excludeSpecPattern)

Click on any test file to run it and watch the execution in real-time.


IDE Setup


  • Install Material Icon Theme in VS Code for better file visibility

  • Enable Auto Save: File > Auto Save to automatically save changes


Best Practices


Configuration Management


  • Always set a baseUrl to avoid hardcoding URLs

  • Use excludeSpecPattern to hide Cypress sample tests

  • Customize viewport settings for consistent testing


File Organization


  • Keep test data in fixtures/ directory

  • Use commands.js for reusable functions

  • Follow consistent naming conventions (e.g., *.spec.js)


Workflow


  • Install Node.js and initialize project

  • Run npx cypress open to create folder structure

  • Configure cypress.config.js with basic settings

  • Create test files in cypress/e2e/

  • Run npx cypress open to execute tests


Additional Resources


For comprehensive configuration options: Cypress Configuration Documentation

 
 
bottom of page