如果想從頭學起Cypress，可以看下面的系列文章哦
https://www.cnblogs.com/poloyy/category/1768839.html
作用
控制瀏覽器窗口的尺寸和方向
重點
- 也可以通過在配置項中定義 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 提供了以下的預設值
| 預設值 |
寬度 |
高度 |
| ipad-2 |
768 |
1024 |
| ipad-mini |
768 |
1024 |
| iphone-3 |
320 |
480 |
| iphone-4 |
320 |
480 |
| iphone-5 |
320 |
568 |
| iphone-6 |
375 |
667 |
| iphone-6+ |
414 |
736 |
| iphone-x |
375 |
812 |
| iphone-xr |
414 |
896 |
| macbook-11 |
1366 |
768 |
| macbook-13 |
1280 |
800 |
| macbook-15 |
1440 |
900 |
| samsung-note9 |
414 |
846 |
| samsung-s10 |
360 |
760 |
正確格式
重要事項
獨立命令
cy.viewport() 后面不能再鏈接其他命令
自動縮放
- 默認情況下，如果屏幕不夠大，無法顯示應用程序所有像素，則 Cypress 會將應用程序縮放並居中，以適應 Cypress Test Runner
- 縮放應用程序不會影響應用程序的任何計算或行為
- 自動縮放好處：無論屏幕大小如何，測試都始終通過或失敗；測試最終在 CI 中運行，因此無論 Cypress 在什么計算機上運行，所有 viewports 都將相同
Cypress.config()
也可以通過此命令來設置全局 viewport 寬高
結尾
我的博客即將同步至騰訊雲+社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1