'Wait for web page to adjust DOM when viewport is changed in cypress

I'm trying to change the viewport of my application multiple times using cypress.

cy.viewport(393, 851);
// do something
cy.viewport(1366, 768);
// do something

Once the view port changes, the dom will take some time to adjust itself.

How can I wait here for the dom to adjust itself and continue the execution?

I have tried to reload the app after changing the view port. But I don't recommend this solution as it consumes time and not all pages are reloadable.

cy.viewport(393, 851);
cy.reload();
// do something
cy.viewport(1366, 768);
cy.reload();
// do something
javascriptcssdomcypressresponsive


Solution 1:[1]

A different way of changing viewports is by setting them via test configuration.

describe(
  'page display on medium size screen',
  {
    viewportHeight: 1000,
    viewportWidth: 400,
  }

or

it(
  'page display on medium size screen',
  {
    viewportHeight: 1000,
    viewportWidth: 400,
  }, () => {
  // visit and take snapshot
})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jjhelguero

Related Questions