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 viewportHeight=667,viewportWidth=375

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.config.js from version 10 and beyond or cypress.json before version 10). See an example below, using the same values used in the previous section.

Example on cypress.config.js (from version 10 and beyond):

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  viewportHeight: 667,
  viewportWidth: 375,
})

Example on cypress.json (before version 10):

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

With the above configuration, the tests will be performed on a mobile viewport, 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 of Cypress"?

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? Check out my online courses on Udemy.