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

如果想从头学起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

 

正确格式

Cypress系列(40)- viewport() 命令详解_第1张图片

 

重要事项

独立命令

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

 

自动缩放

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

 

Cypress.config()

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

 

结尾

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

你可能感兴趣的:(Cypress系列(40)- viewport() 命令详解)