Set viewport dimensions through cy.viewport() or test configuration
Introduced 2026-09-01 · score 0.92
HOW TO USE IT
When a test needs different viewport dimensions, call `cy.viewport(width, height)` during execution or set `viewportWidth` and `viewportHeight` in its `describe`, `context`, or `it` test configuration. Cypress 16 no longer allows changing these dimensions with `Cypress.config()` during test execution.
cy.viewport(550, 750)describe('page display on medium size screen', { viewportHeight: 1000, viewportWidth: 400 }, () => { it('does not display sidebar', () => { cy.get('#sidebar').should('not.be.visible') }) })WHY THIS HELPS
Change viewport dimensions during a test or define them for a test suite.
BEFORE THIS CHANGE
Before Cypress 16, changing `viewportWidth` or `viewportHeight` with `Cypress.config()` during test execution affected the next test and was not reflected in Test Replay.
REQUIREMENTS AND LIMITATIONS
- Version: 16.0.0
- width (required): Viewport width in pixels; must be a non-negative, finite number.
- height (required): Viewport height in pixels; must be a non-negative, finite number.
- viewportWidth (required): Test configuration key for viewport width in pixels.
- viewportHeight (required): Test configuration key for viewport height in pixels.
- describe(name, config, fn) (required): Pass a configuration object as the second argument to set values for a suite; values reset afterward.
- Setting dimensions with `Cypress.config()` during test execution affected the next test rather than the current one and was not reflected in Test Replay.
FIRST-PARTY EVIDENCE
- https://docs.cypress.io/app/references/changelog#16-0-0
- https://docs.cypress.io/api/commands/viewport
- https://docs.cypress.io/app/references/configuration
- https://docs.cypress.io/app/references/migration-guide/migrating-to-cypress-16-0.md
Check the installed version and the source before using it. Entry JSON