Search code examples
javascriptcypress

why is cy.viewport(width, height) not updating screen size?

I'm using cypress with javascript. I try to change the viewport size to 1280x720 but then when I print out the width to console it stills shows the default 1000. I am not setting the size to 1000 anywhere

  it('top screenshot', () => {
    cy.viewport(1280, 720)
    const viewportWidth = Cypress.config('viewportWidth')
    cy.task('log', `viewportWidth: ${viewportWidth}`) // viewportWidth: 1000
  })

Looking at the doc I can't see what I'm doing wrong. I do have a cy.viewport(1280, 720) in the beforeEach(..) call as well

I am trying to work with a plugin (Applitools), but I tried another Cypress plugin (cypress-visual-regression) to make sure Applitools wasn't messing this up, and that had the same issue

Solution

  • It seems to be a bug. There's an issue Values set from command does not override values set in configuration file #22688, not exactly the same but in the same area.

    There are a couple of alternatives

    it('top screenshot', () => {

  Cypress.config('viewportWidth', 1280)
  cy.wrap(Cypress.config('viewportWidth')).should('eq', 1280)   // passing
})

    it('top screenshot', {viewportWidth: 1280, viewportHeight: 1000}, () => {

  cy.wrap(Cypress.config('viewportWidth')).should('eq', 1280)   // passing
})

    The viewport:changed event is still being fired, so if you have a lot of cy.viewport() commands you can patch the event to make them continue to work.

    Cypress.on('viewport:changed', (newValue) => {
  Cypress.config('viewportWidth', newValue.viewportWidth)   // this works
  Cypress.config('viewportHeight', newValue.viewportHeight)
})

it('top screenshot', () => {

  cy.viewport(1280, 720)

  cy.then(() => {
    cy.wrap(Cypress.config('viewportWidth')).should('eq', 1280)  // passes
    cy.wrap(Cypress.config('viewportHeight')).should('eq', 720)  // passes
  })
})

    Note, I assert the values inside a .then() because the command queue should run before the assertion is done.

    To patch globally, add Cypress.on('viewport:changed', ...) in /cypress/support/e2e.js.