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.
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 initThe 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.
We will have package.json created in our project.
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
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
Finally, to open the cypress dashboard, we need to execute one more npm command.
npx cypress open
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
We successfully setup up for environment for running scripts in our system. Go ahead and start designing your cypress testcase.
