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
Table of Content
What is Cypress?
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.
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.
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!
- 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!
- 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
- Debugging tests – Cypress can debug tests from popular tools like Developer tools. The errors are readable, and stacks are easily traceable.
- Stub requests – Cypress has options to confirm and control function behaviors, network responses, or timers used by stubs and spies.
- 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
Components of Cypress
There are two main components in Cypress. They are Test Runner and Dashboard.
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
- 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.
- Test Status menu – This menu shows the number of test cases that passed or failed and the time taken for execution.
- URL Preview – This gives you information about the URL you are testing to keep track of all the URL paths.
- Viewport sizing – You can set the app’s viewport size for testing different responsive layouts
- 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.
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 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.
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
- Install via npm
- 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.
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.
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
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
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.
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.
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.
6. Hurray! We have installed Node.js and npm package. Click on Close to finish installing.
Visual Studio Code Installation in Mac
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.
1. Click on the Mac icon. You can see a package getting downloaded below.
2. Click on the downloaded file to unzip the package. Once unzipped, you can find the Visual Studio Code in your Downloads in Finder.
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.
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.
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.
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.
2. Once the terminal opens, type the below command in the project directory and press Enter.
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.
- 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.
We have now generated a package.json file. You can view the file in your code editor with the information we provided.
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
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.
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.
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.
- Cypress Commands and Cypress Custom Commands:HandsOn
- Step By Step Page Object Model in Cypress with Examples
- Cypress Promise and Cypress Asynchronous: Hands-On Implementation, Example
- What is Cypress Json: Example, Schema, Detailed Hands On Analysis
- Cypress Example: Open Cypress, Variables, First Test Script
- Cypress Automation Step by Step: Cypress Architecture, Install Cypress