UI Automation Testing using Cypress — Part 1

Cypress Introduction

Cypress is free, open source, and locally installed front end testing tool. It can be used by developers or QA engineers, who build web applications using JavaScript framework.

One can do unit testing, integration testing and end to end testing by writing test case using Cypress. Using cypress, one can test anything that can run in browser.

Features of Cypress

Capturing Videos and Screenshots: Cypress is useful in recording the tests or for taking the screenshots on failure when run from CLI.

Easy debugging: Cypress displays readable errors and makes the debugging easy and fast. Tests written in Cypress are easy to read and understand.

Network Traffic Control: One can stub the network traffic control however he likes, without involving server.

Real Time Tests: One can watch tests run in real time as one develops the application.

Installing and Opening Cypress

Cypress is a GUI Test Runner application that is installed on computer. There are no other dependencies involved for installing Cypress such as server or drivers . Installing Cypress via npm is easy. One just has to go to the project path and install Cypress locally by executing the below command.

$npm install cypress --save-dev

We just need to make sure we already have run npm init or have a node_modules folder or package.json file in the root of the project in order to ensure that cypress is installed in the correct directory.

Or if we are not using node.js or npm in the project, we can download Cypress directly from the site. The direct download will always get the latest version. One needs to manually unzip and double click. Cypress will run without installing any dependencies.

If one has used npm to install, Cypress will get installed to ./node_modulesdirectory, with its binary executable accessible from ./node_modules/.bin. Then one can call it from the project root using either of the following ways:

The long way with the full path:

./node_modules/.bin/cypress open

Or the shortcut using npm bin:

$(npm bin)/cypress open

On opening the cypress test runner, it will show the listing of the files and folders of the directory, from which we have to run the js file listed in the integration folder, where the testcases are written.

Frontend automation testing using Cypress

I have tried cypress in order to automate frontend for the project, I am working upon. I have automated few testcases in my project using cypress and few examples are as below:

Visiting a URL: One can visit the URL using cy.visit() method of cypress.

This will visit the URL mentioned: http://localhost/hq

Get a DOM element: One can get the DOM element(s) by selector using cy.get() method of cypress.

This will get the last DOM element of class .toolkit-image-container and click it.

This will get the first element from drop down having class .fb-page-inner-container > .fb-img-container and click it.

Assert the button is disabled: One can do assertion for the DOM element(s) using .should() method

This will get the saveToolkitBtn and check whether it have the class ‘disabled’

This will assert that the value in input is not ‘ABC’.

Printing a message: One can print the message in cypress command log by using cy.log() method

This will print the message in log command as ‘Successfully logged in’.

Each loop in cypress: One can iterate through an array or objects with a length property using each() function.

This will iterate for each element having class .fb-page-wrapper > .fb-page-followers and it will print the Followers as a text for each element found.

Basic HTTP Authentication: Cypress will automatically apply the right authorization headers, if one wants to visit an application that requires Basic HTTP Authentication.

One can do that by simply providing the username and password in the auth object.

Conclusion

I hope sharing the examples would help you to start using cypress for frontend automation as it helped me doing the frontend automation for my project and made the tedious tasks easy and faster for testing.

Refer to this blog if you want to install Cypress system dependencies on an AWS EC2 instance (Amazon Linux AMI).