DEV Community

Cover image for Cypress: Complete Setup Guide
Anandteerth Onkar
Anandteerth Onkar

Posted on

Cypress: Complete Setup Guide

This blog post is a simple and easy guide for the first time Cypress users, who wish to setup Cypress on their Windows machines.

Environment Setup:

  • Install node.js and Set node_home (Open Environment Variables and add the node bin folder path to Paths).


  • Install Visual Studio Code a.k.a VS Code(Recommended IDE for JS/TS projects.

  • Install plugins highlighted in image below to VS Code, by going to plugins tab.


Installing & Setting up Cypress:.

  • Create a project folder (Note: Don't name it as Cypress).

Let's says you named it: 'CypressAutomationProject'.

  • Open the project folder in VS Code.


  • In VS Code terminal, run a command - npm init .
    • Enter the package name and just hit enter for other options leaving them blank.


This will create a new package.json file in your project folder.


  • In VS Code terminal, run a command - npm install --save-dev cypress.

This will install the latest Cypress version locally as a dev dependency for your project.
node_modules folder will be created in main project folder.


Note: At this moment you won't be able to see the Cypress folder in your project folder. This is a bit tricky, as the suspense reveals in the next command.

  • In VS Code terminal, run a command - ./node_modules/.bin/cypress open or npx cypress open.


  • When you run this command, the Cypress Test Runner is opened, and now you can see a Cypress folder created in your project folder.

  • You can click on any of the spec file listed in test runner, and see Cypress in action. ( I will include the details of test runner in my next blog article).

Cypress Project Configuration:

These configuration serve as the key aspects to the cypress project.

There are 3 main configuration files:

1) jsconfig.json

  • Not present by default, need to create.
  • Therefore the step here is to create a jsconfig.json file under main project folder - 'CypressAutomationProject'.

  • Enter below code & Save the file:

    "include": [
Enter fullscreen mode Exit fullscreen mode


NOTE: The definition in this file helps us to populate all cypress commands (methods) to be used in project spec files (i.e. Test Scripts).

2) cypress.json

  • Present, nested under cypress folder inside main project folder. (Project Folder > cypress > cypress.json).

    • We use this file to view default settings or update the default project settings (Closely related to Cypress).
  • The settings can be viewed on Cypress Test Runner under Settings tab.

  • In cypress.json, the main line of code to be entered is:
   "$schema": ""
Enter fullscreen mode Exit fullscreen mode


  • This acts as an intellisense that populates all cypress settings automatically (After type double quotes you can see the list).

3) package.json

  • Present, nested under main project folder. (Project Folder > cypress > package.json).

  • This is related to Node.js, where devDependencies and Scripts can be defined.

  • We are going to define scripts in this file to run the cypress in Head and Headless mode.

  • Remove the default test script present and enter below lines lines of code under the scripts object and save the file.

 "scripts" : {
    "cy:open": "./node_modules/.bin/cypress open",
    "cy:run": "./node_modules/.bin/cypress run"
Enter fullscreen mode Exit fullscreen mode


  • To run the scripts in Head mode, run command: npm run cy:open.
    (Note: This actually opens up test runner).

  • To run the scripts in Headless mode, run command: npm run cy:run.

Hurray! Your machine is now setup to use Cypress. Enjoy every bit of it, It's really an awesome tool.
Any queries related to cypress, please post them in comments.

Discussion (0)