{
  "doc": {
    "id": "api/commands/viewport",
    "title": "viewport | Cypress Documentation",
    "description": "Control the size and orientation of the screen for your application in Cypress.",
    "section": "api",
    "source_path": "/llm/markdown/api/commands/viewport.md",
    "version": "3cf5b86b3403f604bdf7f3e35025c3bc3865e02c",
    "updated_at": "2026-05-07T17:44:31.931Z",
    "headings": [
      {
        "id": "api/commands/viewport#viewport",
        "text": "viewport",
        "level": 1
      },
      {
        "id": "api/commands/viewport#syntax",
        "text": "Syntax",
        "level": 2
      },
      {
        "id": "api/commands/viewport#usage",
        "text": "Usage",
        "level": 3
      },
      {
        "id": "api/commands/viewport#arguments",
        "text": "Arguments",
        "level": 3
      },
      {
        "id": "api/commands/viewport#yields-learn-about-subject-management",
        "text": "Yields Learn about subject management",
        "level": 3
      },
      {
        "id": "api/commands/viewport#examples",
        "text": "Examples",
        "level": 2
      },
      {
        "id": "api/commands/viewport#width-height",
        "text": "Width, Height",
        "level": 3
      },
      {
        "id": "api/commands/viewport#resize-the-viewport-to-1024px-x-768px",
        "text": "Resize the viewport to 1024px x 768px",
        "level": 4
      },
      {
        "id": "api/commands/viewport#organize-desktop-vs-mobile-tests-separately",
        "text": "Organize desktop vs mobile tests separately",
        "level": 4
      },
      {
        "id": "api/commands/viewport#dynamically-test-multiple-viewports",
        "text": "Dynamically test multiple viewports",
        "level": 4
      },
      {
        "id": "api/commands/viewport#preset",
        "text": "Preset",
        "level": 3
      },
      {
        "id": "api/commands/viewport#resize-the-viewport-to-iphone-6-width-and-height",
        "text": "Resize the viewport to iPhone 6 width and height",
        "level": 4
      },
      {
        "id": "api/commands/viewport#orientation",
        "text": "Orientation",
        "level": 3
      },
      {
        "id": "api/commands/viewport#change-the-orientation-to-landscape",
        "text": "Change the orientation to landscape",
        "level": 4
      },
      {
        "id": "api/commands/viewport#notes",
        "text": "Notes",
        "level": 2
      },
      {
        "id": "api/commands/viewport#devicepixelratio",
        "text": "devicePixelRatio",
        "level": 3
      },
      {
        "id": "api/commands/viewport#devicepixelratio-is-not-simulated",
        "text": "devicePixelRatio is not simulated",
        "level": 4
      },
      {
        "id": "api/commands/viewport#restores",
        "text": "Restores",
        "level": 3
      },
      {
        "id": "api/commands/viewport#cypress-will-restore-the-viewport-in-the-snapshot",
        "text": "Cypress will restore the viewport in the snapshot",
        "level": 4
      },
      {
        "id": "api/commands/viewport#defaults",
        "text": "Defaults",
        "level": 3
      },
      {
        "id": "api/commands/viewport#default-sizing",
        "text": "Default sizing",
        "level": 4
      },
      {
        "id": "api/commands/viewport#scaling",
        "text": "Scaling",
        "level": 3
      },
      {
        "id": "api/commands/viewport#auto-scaling",
        "text": "Auto Scaling",
        "level": 4
      },
      {
        "id": "api/commands/viewport#reset-viewport-via-cypress-config",
        "text": "Reset viewport via Cypress.config()",
        "level": 3
      },
      {
        "id": "api/commands/viewport#set-viewport-in-the-test-configuration",
        "text": "Set viewport in the test configuration",
        "level": 3
      },
      {
        "id": "api/commands/viewport#rules",
        "text": "Rules",
        "level": 2
      },
      {
        "id": "api/commands/viewport#requirements-learn-about-chaining-commands",
        "text": "Requirements Learn about chaining commands",
        "level": 3
      },
      {
        "id": "api/commands/viewport#assertions-learn-about-assertions",
        "text": "Assertions Learn about assertions",
        "level": 3
      },
      {
        "id": "api/commands/viewport#timeouts-learn-about-timeouts",
        "text": "Timeouts Learn about timeouts",
        "level": 3
      },
      {
        "id": "api/commands/viewport#command-log",
        "text": "Command Log",
        "level": 2
      },
      {
        "id": "api/commands/viewport#history",
        "text": "History",
        "level": 2
      },
      {
        "id": "api/commands/viewport#see-also",
        "text": "See also",
        "level": 2
      }
    ]
  },
  "chunks": [
    {
      "id": "api/commands/viewport#syntax",
      "doc_id": "api/commands/viewport",
      "heading": "Syntax",
      "heading_level": 2,
      "content_markdown": "## Syntax\n\n```\ncy.viewport(width, height)cy.viewport(preset, orientation)cy.viewport(width, height, options)cy.viewport(preset, orientation, options)\n```\n\n### Usage\n\n**Correct Usage**\n\n```\ncy.viewport(550, 750) // Set viewport to 550px x 750pxcy.viewport('iphone-6') // Set viewport to 375px x 667px\n```\n\n### Arguments\n\n**width _(Number)_**\n\nWidth of viewport in pixels (must be a non-negative, finite number).\n\n**height _(Number)_**\n\nHeight of viewport in pixels (must be a non-negative, finite number).\n\n**preset _(String)_**\n\nA preset dimension to set the viewport. Preset supports the following options:\n\n| Preset | width | height |\n| --- | --- | --- |\n| `ipad-2` | 768 | 1024 |\n| `ipad-mini` | 768 | 1024 |\n| `iphone-3` | 320 | 480 |\n| `iphone-4` | 320 | 480 |\n| `iphone-5` | 320 | 568 |\n| `iphone-6` | 375 | 667 |\n| `iphone-6+` | 414 | 736 |\n| `iphone-7` | 375 | 667 |\n| `iphone-8` | 375 | 667 |\n| `iphone-x` | 375 | 812 |\n| `iphone-xr` | 414 | 896 |\n| `iphone-se2` | 375 | 667 |\n| `macbook-11` | 1366 | 768 |\n| `macbook-13` | 1280 | 800 |\n| `macbook-15` | 1440 | 900 |\n| `macbook-16` | 1536 | 960 |\n| `samsung-note9` | 414 | 846 |\n| `samsung-s10` | 360 | 760 |\n\n**orientation _(String)_**\n\nThe orientation of the screen. The _default orientation_ is `portrait`. Pass `landscape` as the orientation to reverse the width/height.\n\n**options _(Object)_**\n\nPass in an options object to change the default behavior of `cy.viewport()`.\n\n| Option | Default | Description |\n| --- | --- | --- |\n| `log` | `true` | Displays the command in the [Command log](/llm/markdown/app/core-concepts/open-mode.md#Command-Log) |\n\n### Yields [Learn about subject management](/llm/markdown/app/core-concepts/introduction-to-cypress.md#Subject-Management)\n\n*   `cy.viewport()` yields `null`.\n",
      "section": "api",
      "anchors": [
        "syntax"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 383
    },
    {
      "id": "api/commands/viewport#arguments",
      "doc_id": "api/commands/viewport",
      "heading": "Arguments",
      "heading_level": 3,
      "content_markdown": "### Arguments\n\n**width _(Number)_**\n\nWidth of viewport in pixels (must be a non-negative, finite number).\n\n**height _(Number)_**\n\nHeight of viewport in pixels (must be a non-negative, finite number).\n\n**preset _(String)_**\n\nA preset dimension to set the viewport. Preset supports the following options:\n\n| Preset | width | height |\n| --- | --- | --- |\n| `ipad-2` | 768 | 1024 |\n| `ipad-mini` | 768 | 1024 |\n| `iphone-3` | 320 | 480 |\n| `iphone-4` | 320 | 480 |\n| `iphone-5` | 320 | 568 |\n| `iphone-6` | 375 | 667 |\n| `iphone-6+` | 414 | 736 |\n| `iphone-7` | 375 | 667 |\n| `iphone-8` | 375 | 667 |\n| `iphone-x` | 375 | 812 |\n| `iphone-xr` | 414 | 896 |\n| `iphone-se2` | 375 | 667 |\n| `macbook-11` | 1366 | 768 |\n| `macbook-13` | 1280 | 800 |\n| `macbook-15` | 1440 | 900 |\n| `macbook-16` | 1536 | 960 |\n| `samsung-note9` | 414 | 846 |\n| `samsung-s10` | 360 | 760 |\n\n**orientation _(String)_**\n\nThe orientation of the screen. The _default orientation_ is `portrait`. Pass `landscape` as the orientation to reverse the width/height.\n\n**options _(Object)_**\n\nPass in an options object to change the default behavior of `cy.viewport()`.\n\n| Option | Default | Description |\n| --- | --- | --- |\n| `log` | `true` | Displays the command in the [Command log](/llm/markdown/app/core-concepts/open-mode.md#Command-Log) |\n",
      "section": "api",
      "anchors": [
        "arguments"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 325
    },
    {
      "id": "api/commands/viewport#examples",
      "doc_id": "api/commands/viewport",
      "heading": "Examples",
      "heading_level": 2,
      "content_markdown": "## Examples\n\n### Width, Height\n\n#### Resize the viewport to 1024px x 768px\n\n```\ncy.viewport(1024, 768)\n```\n\n#### Organize desktop vs mobile tests separately\n\n```\ndescribe('Nav Menus', () => {  context('720p resolution', () => {    beforeEach(() => {      // run these tests as if in a desktop      // browser with a 720p monitor      cy.viewport(1280, 720)    })    it('displays full header', () => {      cy.get('nav .desktop-menu').should('be.visible')      cy.get('nav .mobile-menu').should('not.be.visible')    })  })  context('iphone-5 resolution', () => {    beforeEach(() => {      // run these tests as if in a mobile browser      // and ensure our responsive UI is correct      cy.viewport('iphone-5')    })    it('displays mobile menu on click', () => {      cy.get('nav .desktop-menu').should('not.be.visible')      cy.get('nav .mobile-menu')        .should('be.visible')        .find('i.hamburger')        .click()      cy.get('ul.slideout-menu').should('be.visible')    })  })})\n```\n\n#### Dynamically test multiple viewports\n\n*   End-to-End Test\n*   Component Test\n\n```\nconst sizes = ['iphone-6', 'ipad-2', [1024, 768]]describe('Logo', () => {  sizes.forEach((size) => {    // make assertions on the logo using    // an array of different viewports    it(`Should display logo on ${size} screen`, () => {      if (Cypress._.isArray(size)) {        cy.viewport(size[0], size[1])      } else {        cy.viewport(size)      }      cy.visit('https://example.cypress.io')      cy.get('#logo').should('be.visible')    })  })})\n```\n\n```\nconst sizes = ['iphone-6', 'ipad-2', [1024, 768]]describe('Logo', () => {  sizes.forEach((size) => {    // make assertions on the logo using    // an array of different viewports    it(`Should display logo on ${size} screen`, () => {      if (Cypress._.isArray(size)) {        cy.viewport(size[0], size[1])      } else {        cy.viewport(size)      }      cy.mount(<MyComponent />)      cy.get('#logo').should('be.visible')    })  })})\n```\n\n### Preset\n\n#### Resize the viewport to iPhone 6 width and height\n\n```\ncy.viewport('iphone-6') // viewport will change to 414px x 736px\n```\n\n### Orientation\n\n#### Change the orientation to landscape\n\n```\n// the viewport will now be changed to 736px x 414px// and simulates the user holding the iPhone in landscapecy.viewport('iphone-6', 'landscape')\n```\n",
      "section": "api",
      "anchors": [
        "examples"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 377
    },
    {
      "id": "api/commands/viewport#width-height",
      "doc_id": "api/commands/viewport",
      "heading": "Width, Height",
      "heading_level": 3,
      "content_markdown": "### Width, Height\n\n#### Resize the viewport to 1024px x 768px\n\n```\ncy.viewport(1024, 768)\n```\n\n#### Organize desktop vs mobile tests separately\n\n```\ndescribe('Nav Menus', () => {  context('720p resolution', () => {    beforeEach(() => {      // run these tests as if in a desktop      // browser with a 720p monitor      cy.viewport(1280, 720)    })    it('displays full header', () => {      cy.get('nav .desktop-menu').should('be.visible')      cy.get('nav .mobile-menu').should('not.be.visible')    })  })  context('iphone-5 resolution', () => {    beforeEach(() => {      // run these tests as if in a mobile browser      // and ensure our responsive UI is correct      cy.viewport('iphone-5')    })    it('displays mobile menu on click', () => {      cy.get('nav .desktop-menu').should('not.be.visible')      cy.get('nav .mobile-menu')        .should('be.visible')        .find('i.hamburger')        .click()      cy.get('ul.slideout-menu').should('be.visible')    })  })})\n```\n\n#### Dynamically test multiple viewports\n\n*   End-to-End Test\n*   Component Test\n\n```\nconst sizes = ['iphone-6', 'ipad-2', [1024, 768]]describe('Logo', () => {  sizes.forEach((size) => {    // make assertions on the logo using    // an array of different viewports    it(`Should display logo on ${size} screen`, () => {      if (Cypress._.isArray(size)) {        cy.viewport(size[0], size[1])      } else {        cy.viewport(size)      }      cy.visit('https://example.cypress.io')      cy.get('#logo').should('be.visible')    })  })})\n```\n\n```\nconst sizes = ['iphone-6', 'ipad-2', [1024, 768]]describe('Logo', () => {  sizes.forEach((size) => {    // make assertions on the logo using    // an array of different viewports    it(`Should display logo on ${size} screen`, () => {      if (Cypress._.isArray(size)) {        cy.viewport(size[0], size[1])      } else {        cy.viewport(size)      }      cy.mount(<MyComponent />)      cy.get('#logo').should('be.visible')    })  })})\n```\n",
      "section": "api",
      "anchors": [
        "width-height"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 303
    },
    {
      "id": "api/commands/viewport#organize-desktop-vs-mobile-tests-separately",
      "doc_id": "api/commands/viewport",
      "heading": "Organize desktop vs mobile tests separately",
      "heading_level": 4,
      "content_markdown": "#### Organize desktop vs mobile tests separately\n\n```\ndescribe('Nav Menus', () => {  context('720p resolution', () => {    beforeEach(() => {      // run these tests as if in a desktop      // browser with a 720p monitor      cy.viewport(1280, 720)    })    it('displays full header', () => {      cy.get('nav .desktop-menu').should('be.visible')      cy.get('nav .mobile-menu').should('not.be.visible')    })  })  context('iphone-5 resolution', () => {    beforeEach(() => {      // run these tests as if in a mobile browser      // and ensure our responsive UI is correct      cy.viewport('iphone-5')    })    it('displays mobile menu on click', () => {      cy.get('nav .desktop-menu').should('not.be.visible')      cy.get('nav .mobile-menu')        .should('be.visible')        .find('i.hamburger')        .click()      cy.get('ul.slideout-menu').should('be.visible')    })  })})\n```\n",
      "section": "api",
      "anchors": [
        "organize-desktop-vs-mobile-tests-separately"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 131
    },
    {
      "id": "api/commands/viewport#dynamically-test-multiple-viewports",
      "doc_id": "api/commands/viewport",
      "heading": "Dynamically test multiple viewports",
      "heading_level": 4,
      "content_markdown": "#### Dynamically test multiple viewports\n\n*   End-to-End Test\n*   Component Test\n\n```\nconst sizes = ['iphone-6', 'ipad-2', [1024, 768]]describe('Logo', () => {  sizes.forEach((size) => {    // make assertions on the logo using    // an array of different viewports    it(`Should display logo on ${size} screen`, () => {      if (Cypress._.isArray(size)) {        cy.viewport(size[0], size[1])      } else {        cy.viewport(size)      }      cy.visit('https://example.cypress.io')      cy.get('#logo').should('be.visible')    })  })})\n```\n\n```\nconst sizes = ['iphone-6', 'ipad-2', [1024, 768]]describe('Logo', () => {  sizes.forEach((size) => {    // make assertions on the logo using    // an array of different viewports    it(`Should display logo on ${size} screen`, () => {      if (Cypress._.isArray(size)) {        cy.viewport(size[0], size[1])      } else {        cy.viewport(size)      }      cy.mount(<MyComponent />)      cy.get('#logo').should('be.visible')    })  })})\n```\n",
      "section": "api",
      "anchors": [
        "dynamically-test-multiple-viewports"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 152
    },
    {
      "id": "api/commands/viewport#orientation",
      "doc_id": "api/commands/viewport",
      "heading": "Orientation",
      "heading_level": 3,
      "content_markdown": "### Orientation\n\n#### Change the orientation to landscape\n\n```\n// the viewport will now be changed to 736px x 414px// and simulates the user holding the iPhone in landscapecy.viewport('iphone-6', 'landscape')\n```\n",
      "section": "api",
      "anchors": [
        "orientation"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 41
    },
    {
      "id": "api/commands/viewport#notes",
      "doc_id": "api/commands/viewport",
      "heading": "Notes",
      "heading_level": 2,
      "content_markdown": "## Notes\n\n### devicePixelRatio\n\n#### `devicePixelRatio` is not simulated\n\nFollow [#7075](https://github.com/cypress-io/cypress/issues/7075) if you need this supported.\n\n### Restores\n\n#### Cypress will restore the viewport in the snapshot\n\nWhen hovering over each command, Cypress will automatically display the snapshot in the viewport dimensions that existed when that command ran.\n\n### Defaults\n\n#### Default sizing\n\nBy default, until you issue a `cy.viewport()` command, Cypress sets the width to `1000px` and the height to `660px` by default.\n\nYou can [change these default dimensions](/llm/markdown/app/references/configuration.md#Viewport) by adding the following to your Cypress configuration:\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')module.exports = defineConfig({  viewportWidth: 1000,  viewportHeight: 660,})\n```\n\n```\nimport { defineConfig } from 'cypress'export default defineConfig({  viewportWidth: 1000,  viewportHeight: 660,})\n```\n\nAdditionally, Cypress automatically sets the viewport to its default size between each test.\n\n### Scaling\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 the preview pane 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 are that tests should consistently pass or fail regardless of a developers' screen size. 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### Reset viewport via `Cypress.config()`\n\nYou can change the size of the viewport height and width for the remainder of the tests by setting the new values for `viewportHeight` or `viewportWidth` within [Cypress.config()](/llm/markdown/api/cypress-api/config.md).\n\n```\nCypress.config('viewportWidth', 800)Cypress.config('viewportWidth') // => 800\n```\n\n### Set viewport in the test configuration\n\nYou can configure the size of the viewport height and width within a suite or test by passing the new configuration value within the [test configuration](/llm/markdown/app/references/configuration.md#Test-Configuration).\n\nThis will set the height and width throughout the duration of the tests, then return it to the default `viewportHeight` and `viewportWidth` when complete.\n\n```\ndescribe(  'page display on medium size screen',  {    viewportHeight: 1000,    viewportWidth: 400,  },  () => {    it('does not display sidebar', () => {      cy.get('#sidebar').should('not.be.visible')    })    it('shows hamburger menu', () => {      cy.get('#header').find('i.menu').should('be.visible')    })  })\n```\n",
      "section": "api",
      "anchors": [
        "notes"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 485
    },
    {
      "id": "api/commands/viewport#restores",
      "doc_id": "api/commands/viewport",
      "heading": "Restores",
      "heading_level": 3,
      "content_markdown": "### Restores\n\n#### Cypress will restore the viewport in the snapshot\n\nWhen hovering over each command, Cypress will automatically display the snapshot in the viewport dimensions that existed when that command ran.\n",
      "section": "api",
      "anchors": [
        "restores"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 43
    },
    {
      "id": "api/commands/viewport#cypress-will-restore-the-viewport-in-the-snapshot",
      "doc_id": "api/commands/viewport",
      "heading": "Cypress will restore the viewport in the snapshot",
      "heading_level": 4,
      "content_markdown": "#### Cypress will restore the viewport in the snapshot\n\nWhen hovering over each command, Cypress will automatically display the snapshot in the viewport dimensions that existed when that command ran.\n",
      "section": "api",
      "anchors": [
        "cypress-will-restore-the-viewport-in-the-snapshot"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 40
    },
    {
      "id": "api/commands/viewport#defaults",
      "doc_id": "api/commands/viewport",
      "heading": "Defaults",
      "heading_level": 3,
      "content_markdown": "### Defaults\n\n#### Default sizing\n\nBy default, until you issue a `cy.viewport()` command, Cypress sets the width to `1000px` and the height to `660px` by default.\n\nYou can [change these default dimensions](/llm/markdown/app/references/configuration.md#Viewport) by adding the following to your Cypress configuration:\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')module.exports = defineConfig({  viewportWidth: 1000,  viewportHeight: 660,})\n```\n\n```\nimport { defineConfig } from 'cypress'export default defineConfig({  viewportWidth: 1000,  viewportHeight: 660,})\n```\n\nAdditionally, Cypress automatically sets the viewport to its default size between each test.\n",
      "section": "api",
      "anchors": [
        "defaults"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 113
    },
    {
      "id": "api/commands/viewport#default-sizing",
      "doc_id": "api/commands/viewport",
      "heading": "Default sizing",
      "heading_level": 4,
      "content_markdown": "#### Default sizing\n\nBy default, until you issue a `cy.viewport()` command, Cypress sets the width to `1000px` and the height to `660px` by default.\n\nYou can [change these default dimensions](/llm/markdown/app/references/configuration.md#Viewport) by adding the following to your Cypress configuration:\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')module.exports = defineConfig({  viewportWidth: 1000,  viewportHeight: 660,})\n```\n\n```\nimport { defineConfig } from 'cypress'export default defineConfig({  viewportWidth: 1000,  viewportHeight: 660,})\n```\n\nAdditionally, Cypress automatically sets the viewport to its default size between each test.\n",
      "section": "api",
      "anchors": [
        "default-sizing"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 111
    },
    {
      "id": "api/commands/viewport#scaling",
      "doc_id": "api/commands/viewport",
      "heading": "Scaling",
      "heading_level": 3,
      "content_markdown": "### Scaling\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 the preview pane 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 are that tests should consistently pass or fail regardless of a developers' screen size. Tests will also consistently run in `CI` because all of the viewports will be the same no matter what machine Cypress runs on.\n",
      "section": "api",
      "anchors": [
        "scaling"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 131
    },
    {
      "id": "api/commands/viewport#auto-scaling",
      "doc_id": "api/commands/viewport",
      "heading": "Auto Scaling",
      "heading_level": 4,
      "content_markdown": "#### 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 the preview pane 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 are that tests should consistently pass or fail regardless of a developers' screen size. Tests will also consistently run in `CI` because all of the viewports will be the same no matter what machine Cypress runs on.\n",
      "section": "api",
      "anchors": [
        "auto-scaling"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 128
    },
    {
      "id": "api/commands/viewport#reset-viewport-via-cypress-config",
      "doc_id": "api/commands/viewport",
      "heading": "Reset viewport via Cypress.config()",
      "heading_level": 3,
      "content_markdown": "### Reset viewport via `Cypress.config()`\n\nYou can change the size of the viewport height and width for the remainder of the tests by setting the new values for `viewportHeight` or `viewportWidth` within [Cypress.config()](/llm/markdown/api/cypress-api/config.md).\n\n```\nCypress.config('viewportWidth', 800)Cypress.config('viewportWidth') // => 800\n```\n",
      "section": "api",
      "anchors": [
        "reset-viewport-via-cypress-config"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 53
    },
    {
      "id": "api/commands/viewport#set-viewport-in-the-test-configuration",
      "doc_id": "api/commands/viewport",
      "heading": "Set viewport in the test configuration",
      "heading_level": 3,
      "content_markdown": "### Set viewport in the test configuration\n\nYou can configure the size of the viewport height and width within a suite or test by passing the new configuration value within the [test configuration](/llm/markdown/app/references/configuration.md#Test-Configuration).\n\nThis will set the height and width throughout the duration of the tests, then return it to the default `viewportHeight` and `viewportWidth` when complete.\n\n```\ndescribe(  'page display on medium size screen',  {    viewportHeight: 1000,    viewportWidth: 400,  },  () => {    it('does not display sidebar', () => {      cy.get('#sidebar').should('not.be.visible')    })    it('shows hamburger menu', () => {      cy.get('#header').find('i.menu').should('be.visible')    })  })\n```\n",
      "section": "api",
      "anchors": [
        "set-viewport-in-the-test-configuration"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 124
    },
    {
      "id": "api/commands/viewport#rules",
      "doc_id": "api/commands/viewport",
      "heading": "Rules",
      "heading_level": 2,
      "content_markdown": "## Rules\n\n### Requirements [Learn about chaining commands](/llm/markdown/app/core-concepts/introduction-to-cypress.md#Chains-of-Commands)\n\n*   `cy.viewport()` requires being chained off of `cy`.\n\n### Assertions [Learn about assertions](/llm/markdown/app/core-concepts/introduction-to-cypress.md#Assertions)\n\n*   `cy.viewport()` cannot have any assertions chained.\n\n### Timeouts [Learn about timeouts](/llm/markdown/app/core-concepts/introduction-to-cypress.md#Timeouts)\n\n*   `cy.viewport()` cannot time out.\n",
      "section": "api",
      "anchors": [
        "rules"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 51
    },
    {
      "id": "api/commands/viewport#command-log",
      "doc_id": "api/commands/viewport",
      "heading": "Command Log",
      "heading_level": 2,
      "content_markdown": "## Command Log\n\n**_Change viewport size to test responsive nav_**\n\n```\ncy.get('#navbar').should('be.visible')cy.viewport(320, 480)// the navbar should have collapse since our screen is smallercy.get('#navbar').should('not.be.visible')cy.get('.navbar-toggle').should('be.visible')cy.get('.navbar-toggle').click()cy.get('.nav').find('a').should('be.visible')\n```\n\nThe commands above will display in the Command Log as:\n\nWhen clicking on `viewport` within the command log, the console outputs the following:\n",
      "section": "api",
      "anchors": [
        "command-log"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 63
    },
    {
      "id": "api/commands/viewport#history",
      "doc_id": "api/commands/viewport",
      "heading": "History",
      "heading_level": 2,
      "content_markdown": "## History\n\n| Version | Changes |\n| --- | --- |\n| [5.5.0](/llm/markdown/app/references/changelog.md#5-5-0) | Added support for `macbook-16` preset. |\n| [5.4.0](/llm/markdown/app/references/changelog.md#5-4-0) | Added support for presets `iphone-7`, `iphone-8`, and `iphone-se2`. |\n| [3.8.0](/llm/markdown/app/references/changelog.md#3-8-0) | Removed max viewport size and lowered min viewport size to `0`. |\n| [3.5.0](/llm/markdown/app/references/changelog.md#3-5-0) | Added support for presets `iphone-xr`, `iphone-x`, `samsung-s10`, and `samsung-note9` |\n| [3.5.0](/llm/markdown/app/references/changelog.md#3-5-0) | Increased max viewport size to `4000` |\n| [0.9.0](/llm/markdown/app/references/changelog.md#0-9-0) | `cy.viewport()` command added |\n",
      "section": "api",
      "anchors": [
        "history"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 104
    },
    {
      "id": "api/commands/viewport#see-also",
      "doc_id": "api/commands/viewport",
      "heading": "See also",
      "heading_level": 2,
      "content_markdown": "## See also\n\n*   Read blog post [Use meaningful smoke tests](https://www.cypress.io/blog/2019/12/06/use-meaningful-smoke-tests/) where we run the same test with different viewport resolutions\n*   Read blog post [Generate High-Resolution Videos and Screenshots](https://www.cypress.io/blog/2021/03/01/generate-high-resolution-videos-and-screenshots/) to learn how to change the browser's window size to capture screenshots and videos with more detail\n*   [Configuration](/llm/markdown/app/references/configuration.md)\n*   [Cypress.config()](/llm/markdown/api/cypress-api/config.md)\n",
      "section": "api",
      "anchors": [
        "see-also"
      ],
      "path": "/llm/json/chunked/api/commands/viewport.json",
      "token_estimate": 68
    }
  ]
}