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": [
      "./node_modules/cypress",
      "cypress/**/*.js"
    ]
}

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": "https://on.cypress.io/cypress.schema.json"
}

• 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"
   }
}

• 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.