Install And Configure Cypress on Windows

 How to install and configure Cypress on Window Operating systems:

To watch in YouTube: click here 

 

To install Cypress(Summary):

1.      Download/install Node.js

node –v  or node - -verson

npm –v

 

2.      Download/install Visual Studio code IDE , VS Code

3.      Set Environment variable

4.      install Cypress

npm itit –y

npm install cypress - -save –dev

npx cypress –v

npx cypress verify

 

5.      open/run cypress

npx cypress open

 

To install Cypress(Detail):

We need two things to install first before cypress: Node.js because Cypress is a node based application and an IDE such as Visual Studio code(VS code) to write cypress scripts.

download Node.js should be version 12 or above

Open Google and search “download node.js” and select a URL to download Node.js

https://nodejs.org/en/download

Choose operating system, Windows, MAC or Linux

And install the node.js

Set Environment Variable

Open System Properties, Environment Variables, open System Variable and add

NODE_HOME = C:\program files\Nodejs

Click PATH and click EDIT

Add the path C:\program files\Nodejs

 

Check if node is installed or not

Open cmd or terminal or PowerShell

And type node -v or node  - -verson

Type npm -v or npm –verson   => npm is “Node Package Manager” , it comes along with node.

It should show the version, but

If you see error, restart the computer and try again

 

Download/install Visual Studio code(VS Code)

Visual Studio Code is an IDE(integrated development environment)

To download, Open Google and search for Download Visual Studio code

Go with the default options while installing the VS code

 

Install Cypress

Create a folder for the cypress project

Open the folder from VS Code

Open the Terminal and run below command

Npm init -y 

You can use “npm init” also but it will ask some questions and you will have to reply those questions.

After initialization is complete, you can find that a file package.json should be created and you should see the name, version, description, scripts, author, license etc on the file.

 

Npm install cypress   - -save -dev

Or you can use “npm install cypress” => this will install the latest version of cypress

Or if you want ot intall a particular version, you can run “npm install cypress@versionNumber

In can also use below code to install cypress

Yarn add cypress  - -dev

 

After the install is complete, you will see dependency in the package.json

You can check the version of cypress:

Npx cypress -v

Npx cypress verify => to check if everything is fine or not.

It adds all the required packages and you can see that a new folder node_modules and file package-lock.json have been created

Click the node_modules

You should see @cypress and click the .bin, you should find cypress

 

To open and run the cypress

Npx cypress open  => npx= node package execute

Select Testing: e2e or Component: component is for unit testing, so for beginners or for practice purpose go with e2e testing.

Click Continue for Configuration files.

Select Browser and click the button for "Start e2e testing in <Browser name>"

Click "Create New Spec" , to access the cypress provided example , you can click "Scaffold example specs"

in 1st time execution: you will be provided a spec file

if it is not 1st time, then you get a list of existing spec files(test files), you should click whichever test file you want to run.

Then test execution starts and shows in Test Runner UI.

Above command should create the cypress project structure.

Now we should see a new cypress folder in the VS Code.

In the cypress folder, you get below folders:

e2e

Fixtures

Support

We create our test files in the e2e folder