Automated Testing with Cypress and Mocha

Introduction:

As we know manual testing is very tedious job, specially when we need to perform an end to end validation of some application. Each and every time we need to be so cautious about the validation point and the navigation flow. Sometime we felt so boring to perform such lengthy process repeatedly and here the Test Automation concept comes to the picture.

Now a days we have so many good, reliable and fast test automation tools which made our life so easy. Selenium, Katalon, Puppeteer, Webdriverio etc. These all are those which are currently being used by so many people in all over the world. Cypress is also one of them.

About Cypress:

Cypress is a front end or UI testing tool. It can be used in all major browsers like chrome, edge, Firefox, chromium etc. Cypress majorly supports JavaScript to design automated test scripts. The support of Chai and Should assertion libraries are in built with cypress. It allows BDD (Behavior-driven development) and TDD (Test-driven development) approaches. Cypress has it’s own test runner which is very useful for test execution and debugging, but apart from that user can control the execution from CLI as well.

For more details on cypress setup and it’s features please go through the below documentation link.

Cypress Documentation

Agenda:

In this article I will explain an automated test procedure in google search homepage with cypress and it’s features. Feel free to Fork or Clone form GitHub.

Source Code

Test Flow:

The project contains two test files. The base site URL where we will perform execution is google.com

• facebook_login_with_invalid_cred.js — is a Negative test script to demonstrate the failed step analysis
• Google_homePage_spec.js — is a Positive test script.

Test Flow Explanation:

1. The first Test will open google.com homepage and search for the keyword ‘facebook’ and click on search button, once results will appear then script will try to click on sign In link from the result (This particular step will fail)
2. The second test will be landing on google.com homepage, then it will verify various components available on the page like: google logo on the page, search box, gmail and images link on the page.

Project Folder Structure:

Project Dependencies:

package.json

Cypress Dependencies:

Data Source: In this project we have used an external data source called ‘data.json’

Note: Cypress created a folder called “fixtures” and we can place our data sources (.json) files into it. The advantage of having fixtures folder is we can easily use the data without writing any json parsing code. We can directly call through cypress’s predefined function and access the data.

snap 1: snapshot to demonstrate the usage of ‘fixture’ in cypress

Here from this code snippet (snap 1) we can see how the ‘data.json’ file can be accessible without writing any extra json parsing code.

Support Folder: Support folder contains below sub folders.

1. page_objects
2. Pages

Required page elements or locators are maintained under ‘page_objects’ folder. As shown in below snippets.

The next folder (i.e. Pages) contains few functions which are basically the step navigation flows, as mentioned in below code snippet.

Test Runner:

In this section we will talk about ‘Runner’ folder of this project. This folder contains the test runner files of each test scripts, which are developed on mocha unit test framework. Please refer the below code snippet for more clarity.

These runner files are placed under ‘integration’ folder of the root directory. These mocha based scripts are combined with ‘mochawesome-report’, so once the scripts are executed it will automatically generates the test reports and store under ‘mochawesome-report’ folder under the root directory. (For more details regarding mochawesome please follow the above mentioned link).

Test Reporting :

Attaching snapshot of the test reports.

Passed Report

Failed Report

How to run the scripts?

There are two ways to execute this project.

1. Through node.js command prompt (recommended) : Open node.js command prompt and type the below command and hit enter. Execution will start on chrome browser.

npm run cy:run

2. Through cypress UI : For this case if the below command will execute a cypress window will open which will contains the test scripts and you need to click on ‘Run all specs’ button and it will start execute all test scripts.

.\node_modules\.bin\cypress open

Cypress UI

Conclusion :

Cypress is really fast and reliable UI automation tool. This article talks about very few and basic features of it. There are more features are available with cypress which I will demonstrate in some other article. Thank You!