screen-resolution-testing-with-cypress.md

id	title	hide_title	sidebar_label	description	keywords	url	site_name	slug
screen-resolution-cypress	Test On Different Screen Resolutions In Cypress	true	Test On Different Screen Resolutions	Run your Cypress automation scripts across different screen resolutions on LambdaTest.	cypress screen resolution test test on different screen resolution cypress lambdatest cypress	https://www.lambdatest.com/support/docs/screen-resolution-testing-with-cypress/	LambdaTest	screen-resolution-testing-with-cypress/

<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.lambdatest.com" },{ "@type": "ListItem", "position": 2, "name": "Support", "item": "https://www.lambdatest.com/support/docs/" },{ "@type": "ListItem", "position": 3, "name": "Cypress Testing On Different Screen Resolutions", "item": "https://www.lambdatest.com/support/docs/screen-resolution-testing-with-cypress/" }] }) }} ></script>

Cypress Testing On Different Screen Resolutions

---

As part of a responsive design process, it is important to ensure that websites or web applications under test run properly on different screen sizes.

LambdaTest lets you test websites with Cypress across different screen resolutions on over 50+ browser versions on cloud.

Cypress provides website testing on different resolutions using

• Viewports
• Full Screen mode

Test on Viewports

---

When you define a viewport, Cypress automatically uses the browser's scaling capabilities to customize the size of the web application. Therefore, on defining a large viewport, Cypress will scale down the web application. If you specify a small viewport, Cypress will upscale it.

To set the viewport's width and height globally, you need to define viewportWidth and viewportHeight in the Cypress configuration file.

Syntax

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

For more details, please check the official Cypress documentation.

Test on Full Screen mode

---

:::tip The use of full-screen mode in conjunction with viewports can help you achieve good results when performing screen resolution testing for web applications. :::

To test your web applications in full screen mode, use the following event to change the browser options.

before:browser:launch

For Cypress v9 and below, use the following script in the 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 v10 and above, you can add the below code in cypress.config.js file.

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
        }
      })
    }
  }
})