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
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
})