Setting Up Cypress

Installation Prerequisite
We must install a few items to also install Cypress to pursue this tutorial: NodeJS and NPM. Notice that Cypress is a JavaScript automation tool, so we have to use the modern JavaScript toolkit. And this toolkit contains such things as NodeJS and NPM.
(Now is the time to do this, if you haven’t already built a NodeJS. NodeJS from the NodeJS website should be installed. The link can be found in the references here: https://nodejs.org/en/).

Make sure the version is equivalent or higher than v8 if you have NodeJS enabled already. Let’s see how. Open a terminal window and type:

node --version

Node Version

I have 12.21.0 Node that’s all right. Any 8.0.0 version is OK.

An editor or IDE is also essential. As it’s my favorite editor, I’ll be using WebStorm and have outstanding Javascript support. If you’ve got another editor, it’s okay.

Installing Cypress
Now we’re set for Cypress installation. Cypress is a software NPM that is normally installed locally, and in the same folder as the test code itself, we install NPM packages. We must start by creating the folder in which our test code is located. And so that you know, I’m a freak on the command line, so I’ll do this kind of stuff in the command line. All the commands I’m showing will run on Windows, Linux, and macOS, so don’t be concerned — they’re going to work on you.

Now let’s create our folder. Let’s name it “cypress-tests”.

mkdir cypress-tests

Creating a folder

Our folder has only been developed where the test is to be carried out. I just open the created folder via WebStorm and the folder is vacant as you can see.

Empty Folder

Ok, obviously: no files were created there! Let’s begin with the package.json. Do you wonder what the package.json file is? So, let’s make it, and then I’m going to demonstrate. I’m going to open the terminal and run init -y at npm. This time, to execute commands and modify code at the same time, I will open a terminal in the IDE.

Create package.json

We built a package.json using the npm command, which initializes the folder ready for npm commands.

package.json available in the folder

Ok, let’s get Cypress installed. When NPM is used, all the installs are local, so we install them in the folder that we have made. This is great because it allows various applications to have different cypress models or other packages installed by the team. Then let’s do that! So, let’s do that!

npm install cypress --save

After few minutes Cypress is installed based on the network bandwidth. And you can see the node_modules folder appears inside our project folder. The package.json gets updated with cypress dependency.

Cypress Installed Successfully

Now let’s run Cypress.
Ok, we don’t have tests at present, but we must run them once to build enough folders that we will need. Let’s run it, then. Let’s run it. You must use the npx to execute the kit command locally.

npx cypress open

A “local command,” obviously named “cypress,” has installed Cypress, which I ran with NPX. I run the npx cypress, asked for a folder structure and the UI was opened and told that it produced us.

After Execution of NPX

After I closed the UI, The folder called “cypress” was created with several subfolders inside. “Integration” is the most critical thing — this is where we write tests. It made example tests for our use.

Generated Folder Structurer

Let’s remove the example folder for the moment to avoid distracting us.

Folder Structurer After Deleted Example