Cypress: Complete Setup Guide
Tags: node, cypress, javascript, testing
Published: 2021-08-08 00:33:04

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

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51tmpkhicz830xgb1y9a.png)

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

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hntxoodcbwtfuxrrq8ho.png)


***

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

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99o4iac4yuxx16mdoekt.png)
 
> * In VS Code terminal, run a command - `npm init` .
  * Enter the package name and just hit enter for other options leaving them blank.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ly841ibg234xi8hibd6c.png)
 
 
> This will create a new package.json file in your project folder.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s9fvsdm8vfbu1m0mmsn.png)

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

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e14yny64a04d3dnphje5.png)

> **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`.


![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8380xmsgsbc3l7105c4q.png)
 

> * 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"
    ]
}
```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nud26eedovuijm08c4w.png)
 

> **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"
}
```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdkmucqb6670qqvwx8b1.png)

 
> * 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"
   }
}
```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mx7kdnr4njbnz49qfr82.png)
 


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