Responsiveness Testing using Cypress

As we all know there are two variations in testing, namely manual testing, and automation testing. As manual testing is performed by humans, it consumes more time. While, in automation testing, time only consumed while writing test cases and after that, there is no need for human intervention.

Almost every tester prefers to automate functionalities that are repetitive and consumes a lot of time especially when it comes to responsiveness testing right?

First, let’s discuss what it is, and then we will see the implementation of it using an automated tool.

What is it?

Responsiveness testing lies in the domain of UI(User Interface) testing which is done to check the visual elements of the web. UI testing validates that the elements(images, placement of text, navbar, etc) are in their right places. Now to make sure whether the elements are in their correct position on all screen sizes(desktop and mobile) are included in responsiveness testing. This means that the website must look good and the placement of text, navbar, UI elements, images rescale and resize, etc must be perfect on all desktop and mobile screens.

Before we dive into the code, let’s understand why it is beneficial to automate responsiveness testing.

Need to automate responsiveness testing:

When a website is in development, testers spend a lot of time testing responsiveness and alignment right? And when they get 3 to 4 builds daily, responsiveness testing becomes a great hassle. To eliminate the extra effort and save time, there are multiple tools for automating the responsiveness of a site. Some of them are selenium, cypress, mabl, appium, etc.
In this tutorial, I am using cypress to automate responsiveness testing because I find it more user-friendly and easy to use.

Cypress:

Cypress provides us a very easy, scalable solution to automate our websites be it responsiveness testing or functional testing.

It also provides a list of predefined dimensions. You can simply put it inside your function and you are good to go or you can define your own screen size too.

How To Automate:

Here is a guide on how you can automate your website on different screen resolutions for both web and mobile.

Collect Screen Sizes:

Following are the screen sizes that are mostly used by end-users worldwide. You can your desired screen sizes from here:

For Desktop:

• 1920x1200(24 inch)
• 1920x1080(23inch)
• 1680x1050(22 inch)
• 1600x900(20 inch)
• 1440x900(19 inch)
• 1366x768(15 inch notebook)
• 1024x800(13 inch notebook)
• 1024x600(10inch notebook)

For Mobile:

• iphone-4(320x480)
• iphone-5(320x568)
• iphone-6(375x667)
• iphone-6+(414x736)
• iphone-7'(375x667)
• iphone-8(375x667)
• iphone-x(375x812)
• iphone-xr(414x896)
• iphone-se2(375x667)
• samsung-note9(414x846)
• samsung-s10(360x760)
• samsung s5/s6/s7(360x640)

Pre-requisites:

1. Visual studio code installed
2. Javascript knowledge
3. Cypress knowledge(refer to cypress documentation)
4. Basic automation knowledge

C. Folder structure:

d. It’s time to code

1. Open visual studio code
2. Setup Cypress
3. Now inside the integration folder, create a .js file. I have named it (dimensions.js) here and added all the screen sizes on which I have to check responsiveness.

dimensions.js

4. Now create your spec file for running an automated test case

5. Here is a simple script for scrolling on different dimensions.

scrolling.spec.js

Output:

Let’s have a look at output:

screen size(360X760px)

screen size(1920x1200px)

screen size(375x812px)

Conclusion:

Using the above approach, regression testing of responsiveness becomes pretty easy and time-saving. Moreover, the script code and logic allow us to add as many screen resolutions as we want to completely test the UI on all kinds and sizes of devices.