Cypress系列（40）- viewport() 命令详解

作用

控制浏览器窗口的尺寸和方向

重点

• 也可以通过在配置项中定义 viewportWidth 和 viewportHeight 来全局设置浏览器窗口的宽度和高度
• 默认宽高：1000px * 660px

语法格式

cy.viewport(width, height)
cy.viewport(preset, orientation)
cy.viewport(width, height, options)
cy.viewport(preset, orientation, options)

参数讲解

width、height

• 必须为非负数
• 像素单位 px

options

只有 log，不再展开讲了

orientation

• 屏幕的方向
• 默认：纵向，

portrait

• 可改横向，

landscape

preset

预设值，Cypress 提供了以下的预设值

正确格式

重要事项

独立命令

cy.viewport() 后面不能再链接其他命令

自动缩放

• 默认情况下，如果屏幕不够大，无法显示应用程序所有像素，则 Cypress 会将应用程序缩放并居中，以适应 Cypress Test Runner
• 缩放应用程序不会影响应用程序的任何计算或行为
• 自动缩放好处：无论屏幕大小如何，测试都始终通过或失败；测试最终在 CI 中运行，因此无论 Cypress 在什么计算机上运行，所有 viewports 都将相同

Cypress.config()

也可以通过此命令来设置全局 viewport 宽高

结尾

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1