Cypress — A Cool Tool for End-to-End Testing

Cypress is a Javascript end-to-end testing tool to test anything that runs on a browser. End-to-end testing is a technique to make sure that the application behaves properly from start to end. Cypress makes sure your web application is tested thoroughly before sending it to quality assurance for testing and to deliver your code confidently. It inserts assertions and tests your application state after any code change making it more reliable.

There are many end-to-end testing tools available within the market. But Cypress has the below advantages over the other tools.

Advantages of Cypress

1. Cypress is fast to set up. There are not any dependencies and it is not required to setup complex testing environment
2. It’s written in Javascript, based on Mocha and Chai, and runs in browsers using Node.js. This makes it fast and reliable for testing every website, even the one’s not written in Javascript.
3. There is no need for extra libraries, test engines, servers, drivers, etc
4. Write your tests and watch them get executed in real-time.
5. You can debug your application directly with Chrome DevTools while the tests are being executed within the browser. When a test fails, an error message is thrown. You can also record screenshots.
6. Cypress automatically waits for DOM to be loaded, you don’t have to implement additional waits or sleep. Cypress executes everything synchronously, it knows when the page is being loaded and when elements send events.
7. Record CI data, screenshots, and video and view results in a dashboard.
8. Most of all, it’s free and open source.

To understand Cypress better, I have created a sample react application that has two pages, home, and profile. Below are the steps to install and run a Cypress application in any javascript or any other environment provided that it is a web application.

Install Cypress

Use the below command to install Cypress.
npm install cypress

Run Cypress
With the complete path
./node_modules/.bin/cypress open

Or with the shortcut using npm bin
$(npm bin)/cypress open

Or by using npx
(npx is included with npm > v5.2 or it can be installed manually)
npx cypress open

Once you have installed Cypress, Cypress creates a folder in your project root and displays the subsequent dialog.

The Cypress Test Runner attempts to seek out all compatible browsers on the user’s machine. The drop-down to select a different browser is found in the top right corner of the Test Runner.

Run your first test

1. Create a new file sample-spec.js under cypress/integration folder
2. The file automatically gets identified in the Cypress runner.
3. Write a test to test the navi. Refer sample code below. You can also test the text inside a page, events inside a page, and any content on the page even after a REST API call. Cypress will wait for the response without any sleep or wait, unlike other tools.

4. Go to Cypress runner. The code automatically gets executed and provides a success or error message

Cypress Dashboard — View test results:

1. You can log in to Cypress dashboard (https://dashboard.cypress.io/) and create an organization and projects to integrate the CI. It gives you access to recorded tests.
2. Copy the project key in cypress.json generated.
3. And run npx cypress run — record — key {key value}
4. You can view the test results in the Cypress dashboard and also view the analytics of run duration, the slowest tests, top failures, flaky tests, etc.

This way, Cypress helps to test a web application from start to end, and also when integrated to a CI helps developers to deliver the code confidently and without introducing additional issues when fixing an existing code.

The errors produced by Cypress are more readable and easy for the developers to understand and fix. It can be easily debugged in Chrome DevTools. Cypress dashboard is also very useful in tracking the most recurring and most time-consuming issues.

Author: Rohini Chellapandian