To set the viewport size and dimension, use the cy.viewport()
command.
cy
.get('#navbar').should('be.visible')
cy.viewport(320, 480)
// the navbar should have collapse since our screen is smaller
cy
.get('#navbar').should('not.be.visible')
.get('.navbar-toggle').should('be.visible').click()
.get('.nav').find('a').should('be.visible')
// lets see what our app looks like on a super large screen
cy.viewport(2999, 2999)
// We added a cy.wait() between each viewport change so you can see
// the change otherwise it's a little too fast to see :)
cy
.viewport('macbook-15')
.wait(200)
.viewport('macbook-13')
.wait(200)
.viewport('macbook-11')
.wait(200)
.viewport('ipad-2')
.wait(200)
.viewport('ipad-mini')
.wait(200)
.viewport('iphone-6+')
.wait(200)
.viewport('iphone-6')
.wait(200)
.viewport('iphone-5')
.wait(200)
.viewport('iphone-4')
.wait(200)
.viewport('iphone-3')
.wait(200)
cy
.viewport('ipad-2', 'portrait')
.wait(200)
.viewport('iphone-4', 'landscape')
.wait(200)