You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.7 KiB
59 lines
1.7 KiB
/// <reference types="cypress" />
|
|
|
|
context("Viewport", () => {
|
|
beforeEach(() => {
|
|
cy.visit("https://example.cypress.io/commands/viewport")
|
|
})
|
|
|
|
it("cy.viewport() - set the viewport size and dimension", () => {
|
|
// https://on.cypress.io/viewport
|
|
|
|
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")
|
|
cy.get(".navbar-toggle").should("be.visible").click()
|
|
cy.get(".nav").find("a").should("be.visible")
|
|
|
|
// lets see what our app looks like on a super large screen
|
|
cy.viewport(2999, 2999)
|
|
|
|
// cy.viewport() accepts a set of preset sizes
|
|
// to easily set the screen to a device's width and height
|
|
|
|
// We added a cy.wait() between each viewport change so you can see
|
|
// the change otherwise it is a little too fast to see :)
|
|
|
|
cy.viewport("macbook-15")
|
|
cy.wait(200)
|
|
cy.viewport("macbook-13")
|
|
cy.wait(200)
|
|
cy.viewport("macbook-11")
|
|
cy.wait(200)
|
|
cy.viewport("ipad-2")
|
|
cy.wait(200)
|
|
cy.viewport("ipad-mini")
|
|
cy.wait(200)
|
|
cy.viewport("iphone-6+")
|
|
cy.wait(200)
|
|
cy.viewport("iphone-6")
|
|
cy.wait(200)
|
|
cy.viewport("iphone-5")
|
|
cy.wait(200)
|
|
cy.viewport("iphone-4")
|
|
cy.wait(200)
|
|
cy.viewport("iphone-3")
|
|
cy.wait(200)
|
|
|
|
// cy.viewport() accepts an orientation for all presets
|
|
// the default orientation is 'portrait'
|
|
cy.viewport("ipad-2", "portrait")
|
|
cy.wait(200)
|
|
cy.viewport("iphone-4", "landscape")
|
|
cy.wait(200)
|
|
|
|
// The viewport will be reset back to the default dimensions
|
|
// in between tests (the default can be set in cypress.json)
|
|
})
|
|
})
|
|
|