Viewport

Examples of changing the size of your application's viewport in Cypress, for a full reference of commands, go to docs.cypress.io

cy.viewport()

To set the viewport size and dimension, use the cy.viewport() command.

const deviceViewports = [
  'macbook-15',
  'macbook-13',
  'macbook-11',
  'ipad-2',
  'ipad-mini',
  'iphone-6+',
  'iphone-6',
  'iphone-5',
  'iphone-4',
  'iphone-3',
]

cy.get('.navbar').should('be.visible')
cy.viewport(320, 480)

// the navbar should have collapse since our screen is smaller
cy.get('#navbar').should('not.exist')

// instead we have the "hamburger" icon
cy.get('.sidebar-button').should('be.visible').click()
cy.get('.nav-item').find('a').should('be.visible')

// lets see what our app looks like on a super large screen
cy.viewport(2999, 2999)

// Test viewport at different preset widths
deviceViewports.forEach((resolution) => {
  cy.viewport(resolution)
  cy.wait(200)
})

// Test viewport in portrait and landscape orientations
cy.viewport('ipad-2', 'portrait')
cy.wait(200)
cy.viewport('iphone-4', 'landscape')
cy.wait(200)

// The viewport will be reset back to the default dimensions
// in between tests (the default can be set in cypress.json)

Viewport and the config viewport values

<p>Some text</p>

// Cypress.config('viewportWidth') shows the current value
// cy.viewport() does not change it
const w = Cypress.config('viewportWidth')
expect(w, 'initial width').to.be.greaterThan(100)
cy.log('initial', w) // whatever value, probably 600
cy.viewport('ipad-2')
cy.log('still the same', Cypress.config('viewportWidth')) // same value
cy.viewport('iphone-4').then(() => {
  expect(
    Cypress.config('viewportWidth'),
    'after using viewport',
  ).to.equal(w)
})

To know the current viewport, use cy.viewport(w, h).

Important: in Cypress v16+ you can no longer use the Cypress.config to change the viewport.

cy.viewport(1200, 400)
  // some time later
  .then(() => {
    expect(
      Cypress.config('viewport'),
      'config viewport',
    ).to.equal(undefined)
  })

You can also get the current resolution from the application's window object.

cy.window().its('innerWidth').should('equal', 1200)