How to run tests simulating mobile devices with Cypress

Today in the “Pinches of Cypress” series, learn how to run tests in a mobile viewport

One of the great advantages of automated tests is that they do not get tired. Therefore, they can be executed in different operating systems, browsers, and viewports to guarantee the application's functioning in these different “environments”.

Currently, an increasing number of people access the internet daily through their mobile devices. As professionals in software development, our responsibility is to ensure the perfect functioning of applications in the desktop viewport and mobile.

With Cypress, we can run the tests simulating a mobile device easily. Let's look at a couple of options.

From the command line

To run tests simulating a mobile device via the command line, use the following command:

cypress run --config viewportWidth=375,viewportHeight=667

Note: The height and width values can be changed according to your needs.

Via config file

By default, Cypress uses a width of 1000px and a height of 660px.

However, it is possible to override these values via the configuration file (cypress.json). See an example below, using the same values used in the previous section.

{
  "viewportWidth": 375,
  "viewportHeight": 667
}

The tests will be performed in a mobile viewport with the above-configuration, both when running in headless mode (with cypress run) and when executed in interactive mode (with cypress open).

That's it.

For more details, visit the official Cypress documentation.

Did you like today's Pinch?

Leave a comment with your experience or any curiosity about the subject.

This post was originally published in Portuguese on the Talking About Testing blog.

Would you like to learn about test automation with Cypress? Get to know my online courses on Udemy.