Skip to main content

Cypress Viewport Command

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

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)
  1. width: Accept non-negative finite number to set the width in pixels.
  2. height: Accept non-negative finite numbers to set the width in pixels.
  3. 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.
  4. orientation: The default value is portrait. Set the orientation to landscape by giving landscape value.
  5. 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.

Cypress Viewport Presets and Sizes

Preset width height
ipad-2 768 1024
ipad-mini 768 1024
iphone-3 320 480
iphone-4 320 480
iphone-5 320 568
iphone-6 375 667
iphone-6+ 414 736
iphone-7 375 667
iphone-8 375 667
iphone-x 375 812
iphone-xr 414 896
iphone-se2 375 667
macbook-11 1366 768
macbook-13 1280 800
macbook-15 1440 900
macbook-16 1536 960
samsung-note9 414 846
samsung-s10 360 760

Cypress Viewport Example 

You can set viewport by giving width and height or by giving presets.

Cypress Set Viewport Width and Height

cy.viewport(375, 667)

Cypress Set Viewport Using Presets and Orientation

cy.viewport('iphone-5', 'landscape')

Video Tutorial: Cypress Viewport

Tags
Submitted by tgoswami on August 24, 2021

Tarun has 11+ years of experience in Quality Assurance in different domains like Banking, E-commerce, Health and Education.

About

At ProgramsBuzz, you can learn, share and grow with millions of techie around the world from different domain like Data Science, Software Development, QA and Digital Marketing. You can ask doubt and get the answer for your queries from our experts.