Cypress Viewport

Cypress Viewport command controls the orientation and size of the screen of your application. Using this command, you can set the size of desktop, mobile, and tablet devices. This command yields null.

Cypress Default Viewport
cypress.json viewport
Cypress Autoscaling
Cypress Viewport Syntax
Cypress Viewport Rules
Cypress Viewport Presets and Sizes
Cypress Viewport Examples

Cypress Default Viewport

By default, without viewport command, Cypress sets the width to 1000px and height to 660px. You can check the viewport value using below code:

cy.log('Width:' + Cypress.config('viewportWidth'))
cy.log('Height:' + Cypress.config('viewportHeight'))

If you have added value to cypress.json, it will return value from the JSON file.

cypress.json viewport

You can set the dimension globally by adding the value viewportWidth and viewportHeight in your configuration file.

{
  "baseUrl": "https://www.programsbuzz.com",
  "viewportHeight": 1080,
  "viewportWidth": 1920,
}

Cypress Autoscaling

Cypress supports auto-scaling by default. If your screen is not large enough to display all of the current dimension's pixels, Cypress will scale and center your application within the Cypress runner to accommodate. It will not impact the behavior of your application.

Syntax

Here is the syntax:

cy.viewport(width, height)
cy.viewport(preset, orientation)
cy.viewport(width, height, options)
cy.viewport(preset, orientation, options)

width: Accept non-negative finite number to set the width in pixels.
height: Accept non-negative finite numbers to set the width in pixels.
preset: It accepts preset string values for devices like iphone-6, iphone-x, macbook-11, and macbook-13. The complete preset table is given below.
orientation: The default value is portrait. Set the orientation to landscape by giving landscape value.
options: Only accepted object is the log.

Rules

cy.viewport() requires being chained off of cy and cannot be chained further.
cy.viewport() cannot have any assertions chained.
cy.viewport() cannot time out.