Cypress 设置视口 - JavaScript

在 Cypress 中，可以使用 cy.viewport 命令设置浏览器视口的尺寸。它的语法如下:

cy.viewport(width, height, options)

其中 width 和 height 分别为视口的宽度和高度。options 参数可选，可以包含以下选项：

• viewportWidth 和 viewportHeight：覆盖 width 和 height 参数，以像素为单位设置视口大小。
• minimumWidth 和 minimumHeight：设置视口最小大小。
• maximumWidth 和 maximumHeight：设置视口最大大小。
• deviceScaleFactor：设置设备的缩放比例。

以下是一些用法示例：

示例 1

cy.viewport(1280, 720)

此命令设置浏览器视口大小为 1280x720 像素。

示例 2

cy.viewport(1280, 720, { viewportWidth: 1920, viewportHeight: 1080 })

此命令设置浏览器视口大小为 1920x1080 像素，覆盖原来的 1280x720 像素。

示例 3

cy.viewport(1280, 720, { minimumWidth: 960, minimumHeight: 540 })

此命令设置浏览器视口大小为 1280x720 像素，并确保其最小值为 960x540 像素。

示例 4

cy.viewport(1280, 720, { deviceScaleFactor: 2 })

此命令将设备缩放比例设置为 2，以 2560x1440 像素显示 1280x720 像素的内容。

使用 cy.viewport 命令可以模拟不同分辨率的设备，方便测试响应式布局和多设备兼容性。

有关更多信息，请查阅官方文档。