Responsive Testing & Cypress
So, how do we manage to have a scalable responsive solution?

For that purpose, we’ll use the Cypress API through a script.

As in everything, this is no more than an alternative. It is not intended to be the ultimate solution, but, after having tried it, I believe it turned into a strong starting point.

The aforementioned article understood that the right path is to have a default configuration in the cypress.json file that modifies some of its settings according to the parameters we establish. This is where we set ourselves apart and expand the solution. We want to have N resolutions (meaning N available devices to emulate) and N userAgents (in other words, N emulated operating systems). Moreover, we want to be able to set iOS apart from Android. We want to be able to provide test runs and regression tests even more specific: iPhone-X, iOS 13.3.1.

Commands

The script will allow us to set <device> and <osVersion> as parameters; and, if necessary, (for example, if we run the script on continuous integration), we can define the <record> parameter, which will, in turn, set the record key stored as an environment variable. It will also allow us to establish the <open> parameter so we can use the Cypress runner.

Hands on!

The script logic allows us to always get to execute the suites. As long as the <device> parameter exists in the devices.js file, the script will wait for us to set the <osVersion> corresponding to that kind of device (iOS & Android). For example, we can set “iPhoneX”.

Once the device has been defined, the script will search within the osVersions defined in the os.js file corresponding to the iOS devices. For example, we can set “13.3.1”.

If the version we entered doesn’t exist in the list, the script will search for the default version of that OS.

node cy-start.js — -d iphoneX -osV 13.3.1 -o

From the Cypress runner, we can see the following environment variables are available: device, osVersion, osType.

We can take advantage of those variables in order to use them for the suite names.

When running the example script, we’ll see that the tests were executed at the specified version and resolution.
['Gustavo Miguens']
['Cypress', 'QA', 'Automation', 'Technology', 'English']