DEV Community

Cover image for How to run tests simulating mobile devices with Cypress
Walmyr
Walmyr

Posted on • Edited on

3

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
Enter fullscreen mode Exit fullscreen mode

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,
})
Enter fullscreen mode Exit fullscreen mode

Example on cypress.json (before version 10):

{
  "viewportHeight": 667,
  "viewportWidth": 375
}
Enter fullscreen mode Exit fullscreen mode

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.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay