Cypress web自動化13-viewport設置不同分辨率,適配不同設備,手機型號


前言

通常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)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM