How to setup cypress for the very first time

This article will cover how to setup cypress with a detailed step-by-step explanation.

Cypress has taken over the web application testing like a storm, with its features like taking snapshots as your tests run. And by simply hovering over commands in the Command Log to see exactly what happened at each step. Cypress calls this feature as Time Travel. Other features like real-time reload, Automatic waiting, Network traffic control, make the tool to be adopted in the Software industry.

To start Cypress, Firstly we need to install some prerequisite software into our system.

Pre requisite Installation

We will start with downloading nodejs. Node.js is a very powerful JavaScript-based platform built on Google Chrome’s JavaScript V8 Engine.

We Install the nodeJs into operating system by following the installation wizard. Once the installation is completed, add the nodeJs to the system variable.

Next, We need to download and install the source code editor for creating cypess scripts. We recommend using Visual Studio Code Editor, which is a open source code editor by Microsoft.

After installation, We will create a folder for Cypress project in any directory as shown below.

After that, open the Visual Studio code editor and from the File menu, select the open folder option and open the folder created.

setup cypress

Once the folder is opened in VS code editor, open the terminal which is present last on the top panel.

Setting up npm dependency

npm stands for node package manager. It allows for seamless node.js package management. You can install, share and manage node.js packages.

Type in the npm command in terminal

npm init

The above code will create a versioning file called package.json file. It is used to install different open source and other available packages in a Node.js project.

Once the command is executed, the node requires details for creating the package.json, which can be provided or skipped based on project requirements.

Once details are furnished, it will ask for confirmation, type in ok and enter as shown below.

setup cypress

We will have package.json created in our project.

setup cypress

Now, we need to install all the node dependencies to run for the cypress project, for that we need to run an npm command.

npm install
setup cypress
The image shows the successful installation of node dependencies.

Now, finally, we need to install npm dependency for cypress. To do that we need to execute the node command.

Installing Cypress dependency
npm install cypress
setup cypress
Image shows successful installation of cypress dependency

Finally, to open the cypress dashboard, we need to execute one more npm command.

npx cypress open
setup cypress

After verification, cypress will launch runner with some pre existing example scripts as shown below.

If the runner fails to open due to cypress verification timed out exception. We can make it work by increasing the page load. Read more

Opening cypress runner
setup cypress

We successfully setup up for environment for running scripts in our system. Go ahead and start designing your cypress testcase.

Leave a Reply