{"__v":0,"_id":"56902d20efcc380d0043a5b4","category":{"__v":60,"_id":"569002f19ebef90d0087289d","pages":["56900352769f210d00132595","5690047121fcf0190071d943","569004924719c119002ce654","569004ceb700ce0d002f4b94","569023e518c3920d00be8b37","569023f748df220d004ca215","5690240af7eb9a0d00f4465d","5690241b48df220d004ca217","5690243e48df220d004ca219","56902453741e9c0d00af2fb5","56902463efcc380d0043a5a1","5690247b18c3920d00be8b39","56902492f7eb9a0d00f4465f","569024a16c49d70d00f18075","569024b2efcc380d0043a5a3","569024cc48df220d004ca21b","569024ea18c3920d00be8b3b","5690258618c3920d00be8b3f","5690259bf7eb9a0d00f44662","569025b06c49d70d00f18077","569029b418c3920d00be8b43","569029d4f7eb9a0d00f44667","569029e8e056c80d00fdec58","569029fb48df220d004ca221","56902a1c18c3920d00be8b46","56902a45f7eb9a0d00f44669","56902a6be056c80d00fdec5a","56902a78f7eb9a0d00f4466b","56902a8848df220d004ca224","56902aa018c3920d00be8b4b","56902ace6c49d70d00f18085","56902ae0741e9c0d00af2fc6","56902aee48df220d004ca226","56902af8f7eb9a0d00f44674","56902b26efcc380d0043a5b1","56902b8148df220d004ca22a","56902ba918c3920d00be8b55","56902bb96c49d70d00f1808b","56902bc818c3920d00be8b57","56902bd518c3920d00be8b59","56902be218c3920d00be8b5b","56902bf66c49d70d00f1808e","56902c05e056c80d00fdec5d","56902c196c49d70d00f18090","56902c2648df220d004ca22d","56902c34f7eb9a0d00f44678","56902c5518c3920d00be8b5d","56902c62741e9c0d00af2fcc","56902cde48df220d004ca230","56902cea741e9c0d00af2fcf","56902d0ae056c80d00fdec60","56902d20efcc380d0043a5b4","56902d3448df220d004ca232","5696c3fbf9203821005fe2fb","5696c3fb9e2d000d00947ab0","5696c3fbf9203821005fe2fa","5697efee8d2a770d00d2fd17","569802611c4dc823005426c7","56a65c82b3ffe00d00156eaf","56f01f88332da41700f24b74"],"project":"568fde81b700ce0d002f4b43","version":"568fde82b700ce0d002f4b46","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-01-08T18:41:53.562Z","from_sync":false,"order":1,"slug":"commands","title":"Commands"},"parentDoc":null,"project":"568fde81b700ce0d002f4b43","user":"568fffce769f210d0013258f","version":{"__v":23,"_id":"568fde82b700ce0d002f4b46","project":"568fde81b700ce0d002f4b43","createdAt":"2016-01-08T16:06:26.373Z","releaseDate":"2016-01-08T16:06:26.373Z","categories":["568fde82b700ce0d002f4b47","568ff0e504440a1700e4cbbd","569002f19ebef90d0087289d","569004f4769f210d00132599","5690056d9ebef90d008728a0","569005d394c5030d0028813a","5690067804440a1700e4cbe2","569137eb3c4f510d00ec9b92","56913815e56a790d008dbfe3","569138ba3c4f510d00ec9b93","5691392f3c4f510d00ec9b94","56913bbe72f2810d007e4cb0","56933b8d6ebadc0d005b71d2","56933b8d6ebadc0d005b71d3","569564facaa32519009c41e6","5696a319b6d61f0d00acfb40","5696a319a857080d0082e8e8","5697efe43503e40d0061f4d1","5697efe48d2a770d00d2fd16","569e9597ffccd10d00a05c59","56a7a1523d33bc2100793d5c","56a7a32ecf6d771700baeee8","56b8b0f7ddeb231700e69825"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":false,"codename":"bar","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-01-08T21:41:52.851Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":69,"body":"Use `cy.viewport` to control the screen size and orientation of your application. This command is useful for when you need to test your application in a specific width or height, such as responsive applications or applications utilizing media queries. `cy.viewport` width and height must be between 200px and 3000px.\n\n| | |\n|--- | --- |\n| **Returns** | `null` |\n| **Timeout** | *cannot timeout* |\n\n***\n\n# [cy.viewport( *width*, *height* )](#section-usage)\n\nResize the viewport to the specified dimensions in pixels.\n\n***\n\n# [cy.viewport( *preset*, *orientation* )](#section-preset-usage)\n\nResize the viewport to a preset dimension. Viewport supports the following presets (in pixels):\n\n| Preset | width | height |\n| ----------- | ----- | ------ |\n| `macbook-15`  | 1440  | 900    |\n| `macbook-13`  | 1280  | 800    |\n| `macbook-11`  | 1366  | 768    |\n| `ipad-2`      | 1024  | 768    |\n| `ipad-mini`   | 1024  | 768    |\n| `iphone-6+`   | 414   | 736    |\n| `iphone-6`    | 375   | 667    |\n| `iphone-5`    | 320   | 568    |\n| `iphone-4`    | 320   | 480    |\n| `iphone-3`    | 320   | 480    |\n\nThe **default orientation** is `portrait`. Pass `landscape` as the orientation to reverse the width/height.\n\n***\n\n# Options\n\nPass in an options object to change the default behavior of `cy.viewport`.\n\n**cy.viewport( *width*, *height*, *options* )**\n**cy.viewport( *preset*, *orientation*, *options* )**\n\nOption | Default | Notes\n--- | --- | ---\n`log` | `true` | whether to display command in command log\n\nYou can also set options for the viewport's `viewportWidth` and `viewportHeight` globally in [configuration](https://on.cypress.io/guides/configuration).\n\n***\n\n# Usage\n\n## Resize the viewport to 1024 x 768\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// the viewport will now be changed to 1024x768 pixels\\ncy.viewport(1024, 768)\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## Organize desktop vs mobile tests separately\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"describe(\\\"Nav Menus\\\", function(){\\n  context(\\\"720p resolution\\\", function(){\\n    beforeEach(function(){\\n      // run these tests in a desktop browser\\n      // with a 720p monitor\\n      cy.viewport(1280, 720)\\n    })\\n\\n    it(\\\"displays full header\\\", function(){\\n      cy\\n        .get(\\\"nav .desktop-menu\\\").should(\\\"be.visible\\\")\\n        .get(\\\"nav .mobile-menu\\\").should(\\\"not.be.visible\\\")\\n    })\\n\\n  context(\\\"iphone-5 resolution\\\", function(){\\n    beforeEach(function(){\\n      // run these tests in a mobile browser\\n      // and ensure our responsive UI is correct\\n      cy.viewport(\\\"iphone-5\\\")\\n    })\\n\\n    it(\\\"displays mobile menu on click\\\", function(){\\n      cy\\n        .get(\\\"nav .desktop-menu\\\").should(\\\"not.be.visible\\\")\\n        .get(\\\"nav .mobile-menu\\\")\\n          .should(\\\"be.visible\\\")\\n          .find(\\\"i.hamburger\\\").click()\\n        .get(\\\"ul.slideout-menu\\\").should(\\\"be.visible\\\")\\n    })\\n  })\\n})\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n# Preset Usage\n\n## Resize the viewport to iPhone 6 width and height\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// the viewport will now be changed to 414x736\\ncy.viewport(\\\"iphone-6\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## Change the orientation to landscape\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// the viewport will now be changed to 736x414\\n// which simulates the user holding the iPhone in lanscape\\ncy.viewport(\\\"iphone-6\\\", \\\"landscape\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n# Known Issues\n\n## `devicePixelRatio` is not simulated\n\nThis is something Cypress will eventually do, which will match how Chrome's responsive mobile browsing simulation works. [Open an issue](https://github.com/cypress-io/cypress/issues/new?body=**Description**%0A*Include%20a%20high%20level%20description%20of%20the%20error%20here%20including%20steps%20of%20how%20to%20recreate.%20Include%20any%20benefits%2C%20challenges%20or%20considerations.*%0A%0A**Code**%0A*Include%20the%20commands%20used*%0A%0A**Steps%20To%20Reproduce**%0A-%20%5B%20%5D%20Steps%0A-%20%5B%20%5D%20To%0A-%20%5B%20%5D%20Reproduce%2FFix%0A%0A**Additional%20Info**%0A*Include%20any%20images%2C%20notes%2C%20or%20whatever.*%0A) if you need this to be fixed.\n\n***\n\n# Notes\n\n## Cypress will restore the viewport for each command\n\nWhen hovering over each command, Cypress will automatically restore the viewport to the dimensions that existed when that command ran.\n\n***\n\n## Default sizing\n\nBy default, until you issue a `cy.viewport` command, Cypress will assume the width is: `1000px` and the height is `660px`.\n\nYou can [change these default dimensions](https://on.cypress.io/guides/configuration) by adding the following to your `cypress.json`\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"{\\n  viewportWidth: 1000,\\n  viewportHeight: 660\\n}\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nAdditionally, Cypress automatically sets the viewport to it's default size between each test.\n\n***\n\n## Auto Scaling\n\nBy 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 Cypress to accommodate.\n\nScaling the app should not affect any calculations or behavior of your application (in fact it won't even know it's being scaled).\n\nThe upsides to this is that tests should consistently pass or fail regardless of each of your developers' screen sizes. Tests will also consistently run in `CI` because all of the viewports will be the same no matter what machine Cypress runs on.\n\n# Related\n\n- [Configuration](https://on.cypress.io/guides/configuration)","excerpt":"Change the screen size of your application","slug":"viewport","type":"basic","title":"viewport"}

viewport

Change the screen size of your application

Use `cy.viewport` to control the screen size and orientation of your application. This command is useful for when you need to test your application in a specific width or height, such as responsive applications or applications utilizing media queries. `cy.viewport` width and height must be between 200px and 3000px. | | | |--- | --- | | **Returns** | `null` | | **Timeout** | *cannot timeout* | *** # [cy.viewport( *width*, *height* )](#section-usage) Resize the viewport to the specified dimensions in pixels. *** # [cy.viewport( *preset*, *orientation* )](#section-preset-usage) Resize the viewport to a preset dimension. Viewport supports the following presets (in pixels): | Preset | width | height | | ----------- | ----- | ------ | | `macbook-15` | 1440 | 900 | | `macbook-13` | 1280 | 800 | | `macbook-11` | 1366 | 768 | | `ipad-2` | 1024 | 768 | | `ipad-mini` | 1024 | 768 | | `iphone-6+` | 414 | 736 | | `iphone-6` | 375 | 667 | | `iphone-5` | 320 | 568 | | `iphone-4` | 320 | 480 | | `iphone-3` | 320 | 480 | The **default orientation** is `portrait`. Pass `landscape` as the orientation to reverse the width/height. *** # Options Pass in an options object to change the default behavior of `cy.viewport`. **cy.viewport( *width*, *height*, *options* )** **cy.viewport( *preset*, *orientation*, *options* )** Option | Default | Notes --- | --- | --- `log` | `true` | whether to display command in command log You can also set options for the viewport's `viewportWidth` and `viewportHeight` globally in [configuration](https://on.cypress.io/guides/configuration). *** # Usage ## Resize the viewport to 1024 x 768 [block:code] { "codes": [ { "code": "// the viewport will now be changed to 1024x768 pixels\ncy.viewport(1024, 768)\n", "language": "javascript" } ] } [/block] *** ## Organize desktop vs mobile tests separately [block:code] { "codes": [ { "code": "describe(\"Nav Menus\", function(){\n context(\"720p resolution\", function(){\n beforeEach(function(){\n // run these tests in a desktop browser\n // with a 720p monitor\n cy.viewport(1280, 720)\n })\n\n it(\"displays full header\", function(){\n cy\n .get(\"nav .desktop-menu\").should(\"be.visible\")\n .get(\"nav .mobile-menu\").should(\"not.be.visible\")\n })\n\n context(\"iphone-5 resolution\", function(){\n beforeEach(function(){\n // run these tests in a mobile browser\n // and ensure our responsive UI is correct\n cy.viewport(\"iphone-5\")\n })\n\n it(\"displays mobile menu on click\", function(){\n cy\n .get(\"nav .desktop-menu\").should(\"not.be.visible\")\n .get(\"nav .mobile-menu\")\n .should(\"be.visible\")\n .find(\"i.hamburger\").click()\n .get(\"ul.slideout-menu\").should(\"be.visible\")\n })\n })\n})\n", "language": "javascript" } ] } [/block] *** # Preset Usage ## Resize the viewport to iPhone 6 width and height [block:code] { "codes": [ { "code": "// the viewport will now be changed to 414x736\ncy.viewport(\"iphone-6\")\n", "language": "javascript" } ] } [/block] *** ## Change the orientation to landscape [block:code] { "codes": [ { "code": "// the viewport will now be changed to 736x414\n// which simulates the user holding the iPhone in lanscape\ncy.viewport(\"iphone-6\", \"landscape\")\n", "language": "javascript" } ] } [/block] *** # Known Issues ## `devicePixelRatio` is not simulated This is something Cypress will eventually do, which will match how Chrome's responsive mobile browsing simulation works. [Open an issue](https://github.com/cypress-io/cypress/issues/new?body=**Description**%0A*Include%20a%20high%20level%20description%20of%20the%20error%20here%20including%20steps%20of%20how%20to%20recreate.%20Include%20any%20benefits%2C%20challenges%20or%20considerations.*%0A%0A**Code**%0A*Include%20the%20commands%20used*%0A%0A**Steps%20To%20Reproduce**%0A-%20%5B%20%5D%20Steps%0A-%20%5B%20%5D%20To%0A-%20%5B%20%5D%20Reproduce%2FFix%0A%0A**Additional%20Info**%0A*Include%20any%20images%2C%20notes%2C%20or%20whatever.*%0A) if you need this to be fixed. *** # Notes ## Cypress will restore the viewport for each command When hovering over each command, Cypress will automatically restore the viewport to the dimensions that existed when that command ran. *** ## Default sizing By default, until you issue a `cy.viewport` command, Cypress will assume the width is: `1000px` and the height is `660px`. You can [change these default dimensions](https://on.cypress.io/guides/configuration) by adding the following to your `cypress.json` [block:code] { "codes": [ { "code": "{\n viewportWidth: 1000,\n viewportHeight: 660\n}\n", "language": "javascript" } ] } [/block] Additionally, Cypress automatically sets the viewport to it's default size between each test. *** ## 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 Cypress to accommodate. Scaling the app should not affect any calculations or behavior of your application (in fact it won't even know it's being scaled). The upsides to this is that tests should consistently pass or fail regardless of each of your developers' screen sizes. Tests will also consistently run in `CI` because all of the viewports will be the same no matter what machine Cypress runs on. # Related - [Configuration](https://on.cypress.io/guides/configuration)