Cypress学习13-viewport设置不同分辨率，适配不同设备,手机型号

Posted 2020-11-28 yoyoketang

前言

通常web测试需测下在不同设备，手机上，不同的分辨率显示效果，可以用viewport()方法实现

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)