Cypress Automation Step by Step: Cypress Architecture, Install Cypress

In this tutorial, we will discuss the Cypress Automation Framework in detail. We will be covering what Cypress is, how it is different from other testing frameworks, the architecture of Cypress, and the installation procedure in this article. Cypress is an exciting topic and is fun to learn too. Let’s begin!

Cypress Automation Framework

Cypress Automation Framework is a pure Javascript-based testing tool that mainly focuses on front-end testing in modern web applications. With Cypress, applications are easy to test with the visual interface to witness the test execution. Thus, Cypress comes as a boon for both developers and QA engineers by making script writing and test execution easy. In addition, it comes with a distinctive test runner, which makes DOM manipulation easy and runs directly on the Browser.

Table of Content

What is Cypress?

Cypress is faster, better and provides definitive testing that runs on a browser.Cypress is mainly compared with Selenium, but it is completely different. Cypress does not run on top of Selenium, which means it is completely independent. Instead, Cypress runs on top of Mocha, which is again a Javascript-rich test framework. It is compatible with only the Chai Assertion Library, which can access a wide range of BDD and TDD assertions.

Cypress mainly focuses on three different types of testing. They are End-to-End tests, Unit tests, and Integration tests. Cypress can execute any tests that can run in a browser. In addition, it comes along with different mocking capabilities and validations that are enthralled towards front-end testing.

The browsers that Cypress supports are Chrome, Firefox, Edge, Electron, and Brave. Moreover, cross-browser testing is easily achievable with Cypress. Finally, though Cypress supports only Javascript, it can also be written with Typescript, primarily written with Javascript.

Cypress Automation

Cypress is an open-source tool with a free Test runner but has pricing ranging for teams and businesses where they charge you for the Dashboard. However, Dashboard is free up to some extent, unless you additional features like Flake detection, Email support, Jira integration, and many more.

Cypress is mainly used to automate scripts on the web(can automate anything that runs on a browser). It can never run on native mobile apps but can automate some of the functionalities of the mobile applications if those are developed in a browser.

Features

There are many awesome features available in Cypress that stand out from any other automation tool. Here, let’s discuss some of the main features, and we’ll get introduced to other parts later once we begin writing our test cases!

  1. Automatic waiting – Cypress has the advantage of automatic waiting. We will never need to add force waits and sleeps for waiting for the DOM to fetch the element. Cypress automatically waits for any interaction with elements and execution of assertions. Thus, tests are fast!
  2. Time travel – Cypress captures screenshots during test execution. We can view the results visually in real-time by just hovering on the executed commands in the Dashboard. This way, the tests are easier to debug
  3. Debugging tests – Cypress can debug tests from popular tools like Developer tools. The errors are readable, and stacks are easily traceable.
  4. Stub requests – Cypress has options to confirm and control function behaviors, network responses, or timers used by stubs and spies.
  5. Continuous Integration – Cypress does not depend on any other additional CI services. However, on running the command for the test, integration is easily accessible.

Myth about Cypress

There is a myth that Cypress can run only on Javascript-friendly web applications. However, Cypress can test any web applications built with Django, Ruby on Rails, Laravel, etc. In addition, Cypress supports any of the programming languages such as PHP, Python, Ruby, C#, etc. However, we write our tests in Javascript; beyond that, Cypress works on any application.

Components of Cypress

There are two main components in Cypress. They are Test Runner and Dashboard.

Cypress
Cypress Test Runner
Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Cypress Test Feature

Test Runner – Cypress provides this unique test runner, where the user can view the commands during execution and application under test.

There are few subcomponents under Test runner. They are

  1. Command Log – This is a visual representation of the test suite. You can see the commands executed in the test, the assertion details, and the test blocks.
  2. Test Status menu – This menu shows the number of test cases that passed or failed and the time taken for execution.
  3. URL Preview – This gives you information about the URL you are testing to keep track of all the URL paths.
  4. Viewport sizing – You can set the app’s viewport size for testing different responsive layouts
  5. App Preview – This section displays the commands that run in real-time. Here you can use Devtools to debug or inspect each base.

Dashboard: Cypress Dashboard gives the ability to access the tests that are being recorded. With Dashboard service, we can witness the number of passed, failed, or skipped tests. Also, we can view snapshots of the failed tests by using cy. screenshot() command. You can also witness the video of the entire test or the clip of the failed tests.

Cypress Architecture

Most of the testing tools run on the server outside the Browser and execute commands over the network. But, Cypress runs on the Browser where the application is also running. This way, it can access all the DOM elements and everything inside the Browser.

Node server runs behind the Cypress on the client-side. Thus, the node server and Cypress interact with each other, accompany and carry out tasks to support the execution. Since it has access to both the front and back end, the responsiveness to the application in real-time during execution is well accomplished and can also perform tasks that even run outside the Browser.

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Cypress Architecture

Cypress also interacts with the network layer and captures commands by reading and changing the web traffic. Finally, Cypress sends HTTP requests and responses from the node server to the Browser. Since Cypress operates in the network layer, it helps to modify the code that might interfere with the automation of the web browser. The communication between the Node server and Browser is via the WebSocket, which begins execution after the proxy is started.

Cypress controls all the commands that run in and out of the browsers. Since it is installed in a local machine, it directly interacts with the operating system to record videos, capture snapshots, accesses the network layer, and performs file system operations at ease. Cypress can access everything from DOM, window objects, local storage, network layer, and DevTools.

Install Cypress

This section will discuss the installation process that needs to be followed before writing our test cases. There are two different ways to download Cypress. They are

  1. Install via npm
  2. Direct Download

Before we install Cypress, we might need a few pre-requisites to kick start to install via npm. Let’s see them in detail.

Pre-requisites

We will require certain pre-requisites before writing our test cases.

  • As discussed above, Cypress runs on a node server; hence we will have to install Node.js.
  • Also, to write our test cases, we need a code editor or IDE.

In this example, we will be using Visual Studio Code. So let’s dive into the details.

Node.js Installation in Mac

Here, we shall discuss the steps to download Node.js in Mac. Navigate to https://nodejs.org/en/download/. You will now land on the download page.

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Node package in macOs

1.Click on the macOS Installer. On clicking, You can find a package file downloaded below. Click on the pkg file to install Node.js

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Installer introduction

2. Once you click the .pkg file, the Node installer will open. The introduction section gives you the Node.js and npm versions. Click on Continue

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Agree License
Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Allow Access in Installer

3. Click on Agree Button and then Continue. A pop-up will appear to allow access to your files in the Download folder. Click on Ok.

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Choose Destination

4. In this section, you can select the destination to which Node.js has to be downloaded. Again, you can choose according to your system space. Here I am choosing the default location.

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Installation Type
Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Enter Username and Password to Install

5. Click on the Install button. Once you click, a pop-up asking your system password would arise. Enter your password and click on Install Software.

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Installation Summary

6. Hurray! We have installed Node.js and npm package. Click on Close to finish installing.

Visual Studio Code Installation in Mac

We have successfully installed Node.js. Now let us install our code editor Visual Studio Code. VS code is a powerful tool that has all the in-built functionalities of Javascript. So let’s dive into the installation steps of Visual Studio Code.

Here we will discuss the steps to download VS code in Mac. First, navigate to https://code.visualstudio.com/download to land on the download page of VS code.

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
VS Code Install in Mac

1. Click on the Mac icon. You can see a package getting downloaded below.

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Installed Package in zip

2. Click on the downloaded file to unzip the package. Once unzipped, you can find the Visual Studio Code in your Downloads in Finder.

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
VS Code in Downloads

3. Hurray! We have downloaded our Code editor. Click on the icon to open Visual Studio Code.

Creation of a new Cypress project

We will now see how to create a new node project in our Visual Studio Code. Once you click on the VS code icon, you will land on the Welcome page. Next, click on the Add Workspace folder to create a new folder.

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Creation of new project

Once you click on the folder, you will get a pop-up asking to add a new folder. Now click on the location you want to add the workspace. Next, click on New Folder and Add the Folder name as CypressProject and click Open.

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
New folder Creation

Now we have created a folder for our Cypress test. Before we begin writing our tests, we should install the package.json file. Before installing, let us understand what is package.json file.

What is Package.json file?

Package.json comprises all the npm packages in a file, usually located in the project root. It is commonly located in the root directory of the Node.js project. This file holds all the applicable metadata necessary for the project. It gives all the information to npm and helps in identifying the project and handle dependencies. Package.json file contains information such as project name, versions, license, dependencies, and many more.
Now we have understood what is package.json file. So, let’s begin the steps to download the file in our Visual Studio code.

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Open Terminal

1. To execute our commands, we need to open the Terminal. On the top of the VS code, click on the Terminal. Once the dropdown opens, click on New Terminal.

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Install package.json file

2. Once the terminal opens, type the below command in the project directory and press Enter.

npm init

3. Once you press Enter, you can see the certain information displayed. You can type the required details in the Terminal and press Enter to obtain all the fields.

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Project details
  • Package name: You can provide any name to your package. I have left it blank as it is pre-populated with the folder name we created.
  • Version: This gives the information of the version of npm. You can skip this and press Enter.
  • Description: Here, you can give a piece of additional information to the package. If required, you can type the description and press Enter again.
  • Entry point: This represents the entry point of the application. Since it is pre-populated with index.js, we can skip this field and press Enter.
  • Test command: Command that is given to run the test. Here it is not necessary to give any commands, but if required, you can definitely provide any command.
  • Git repository: This field requires the path to the git repository. You can leave this field blank as well.
  • Keywords: Unique keywords to help identify the project. You can skip this field too.
  • Author: This is usually the username of the person. You can add your name and press Enter.
  • License: License is pre-populated with ISC. You can proceed by pressing Enter.
  • 4. Once you press Enter, Terminal will ask for confirmation by listing all the details you provided. Type Yes and press Enter again.
Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Package.json file creation confirmation

We have now generated a package.json file. You can view the file in your code editor with the information we provided.

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Created Package.json file

Installation steps of Cypress

We have installed all the pre-requisites for our Cypress download, node, and initialized npm. As mentioned above, there are two ways to download Cypress.

Download Cypress via npm

You will have to pass the below-mentioned command in the Terminal to install Cypress. In addition, you will have to give the command in the project directory to install the node and generated the package.json file.

npm install cypress --save-dev
Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Cypress Installation command

Once you pass the command, it will download all the relevant dependencies required for the project. At the writing of this article, the latest version of Cypress is 7.7.0. The version might differ at the time you are downloading.

Cypress Automation Step by Step: Cypress Architecture, Install Cypress
Successful Cypress Installation

With reference to the above image, you can see that we have downloaded Cypress. You can verify by the downloaded representation in Terminal and the addition of devDependencies in the package.json file.

Direct Download

We can download Cypress directly from their CDN if you are not using the Node or npm package in the project. However, recording the tests in the Dashboard is not possible via direct download.

You can download by clicking on download Cypress directly from this link. This will now directly download the package. Once the package is downloaded, open the zip file and double click. Cypress will run without the need for any installation of dependencies. This download will always pick up the latest version based, and the platform will be detected automatically. However, downloading Cypress via npm is recommended rather than a direct download.

For more post on Technology, please visit our Technology page.

About Aishwarya Lakshmi

Cypress Automation Step by Step: Cypress Architecture, Install CypressI am a testing enthusiast and have nearly 2+ years of experience in the testing domain. I am passionate about testing and love to explore new things in my field and share them with my peers. I enjoy writing blogs during my free time in the simplest but effective way. As a tester, I like to have things to perfection, so I wish my readers to have the perfect understanding of the technology. I keep myself updated with the new technologies related to testing and spend time understanding them. I am glad to help students understand the concepts in testing.
Let's connect through LinkedIn - https://www.linkedin.com/in/aishwarya-lakshmi-n-46903217a

x
About Lambdageeks

1 thought on “Cypress Automation Step by Step: Cypress Architecture, Install Cypress”

  1. Pingback: Cypress Example: Open Cypress, Variables, First Test Script - Lambda Geeks

Comments are closed.

en English
X