Screen Resolution and Cypress

Problem

For Quality Assurance, one has to make sure that the Web Application under test run perfectly fine on different screen sizes or resolutions. This is a generic problem and every tester has to test this scenario to make sure the usability of the web application is not hampered on different screens.

What Cypress offers out of the?box

• Viewports
• Full-screen browser option

Viewports

How Cypress handles viewports is different from other frameworks.

In Cypress, the browser window is divided into 2 sections,

• The first section has all the test details
• The second section has an iframe that actually renders the web application

Viewport as per Cypress Documentation controls the size and orientation of the screen for your application. You can set the viewport's width and height.

And Viewport is the size of the iframe which renders the web application.

As per Cypress documentation:

You can set the viewport’s width and height globally by defining viewportWidth and viewportHeight in the Cypress configuration .

And Syntax to use this setting is?

cy.viewport(550, 750) // Set viewport to 550px x 750px
cy.viewport('iphone-6') // Set viewport to 375px x 667px        

If you set the viewport, Cypress will automatically use the scaling capability of the browser to adjust the size of the web application which means if you set a large viewport Cypress will scale down the application and if you set a smaller viewport Cypress will upscale the application.

This makes more sense if the browser opens in full screen, which is not happening by default in cypress. Following instructions can help you run a browser in full-screen mode in cypress

Open Browser in Full-screen in?Cypress

As per Cypress documentation, we can use the following event to modify the browser options

before:browser:launch        

For Cypress<10, we can use the following code in plugin/index.js file.

module.exports = (on, config) => {
  on('before:browser:launch', (browser = {}, launchOptions) => {
    if (browser.family === 'chromium' && browser.name !== 'electron') {
      launchOptions.args.push('--start-fullscreen')
  
      return launchOptions
    }
  
    if (browser.name === 'electron') {
      launchOptions.preferences.fullscreen = true
  
      return launchOptions
    }
  })
}        

For Cypress≥10, we will have to add code in cypress.config.js

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  
  e2e: {
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser = {}, launchOptions) => {
        if (browser.family === 'chromium' && browser.name !== 'electron') {
          launchOptions.args.push('--start-fullscreen')
      
          return launchOptions
        }
      
        if (browser.name === 'electron') {
          launchOptions.preferences.fullscreen = true
      
          return launchOptions
        }
      })
    }
  }
})        

With this, you can alter the browser behavior and it will now open in full-screen mode.

Combining full-screen mode and viewports one can achieve good results if they want to do resolution testing for web applications.

Hope the article was useful.

Happy Learning.

Follow my channel The Data Singh for useful videos

The Data Singh

Hey, I am Japneet Singh a developer by choice, learning new things in the Tech domain is my much-beloved hobby. I am on…www.youtube.com