持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情
location作用
获取当前页面的 window.location
语法格式
cy.location()
cy.location(key)
cy.location(options)
cy.location(key, options)
options： 只有 timeout 和 log，不再展开讲了
正确写法
cy.location()
// 获取 host 值
cy.location('host')
// 获取 port 值
cy.location('port')
location 对象有哪些属性
- hash
- host
- hostname
- href
- origin
- pathname
- port
- protocol
- search
- toString
实际栗子
测试文件代码
测试结果
location() 命令的产物
总结
cy.location("host") 这样写只会返回对应属性的值
go作用
在浏览器历史记录中，访问前一个或后一个 URL
语法格式
cy.go(direction)
cy.go(direction, options)
options： 只有 timeout 和 log，不再展开讲了
正确格式
// 相当于单击浏览器左上角的后退←按钮
cy.go("back")
// 相当于单击浏览器左上角的前进→按钮
cy.go("forward")
实际栗子
// 相当于单击浏览器左上角的后退←按钮
cy.go(-1)
// 相当于单击浏览器左上角的前进→按钮
cy.go(1)
测试文件代码
reload作用
刷新页面
语法格式
cy.reload()
cy.reload(forceReload)
cy.reload(options)
cy.reload(forceReload, options)
options： 只有 timeout 和 log，不再展开讲了
forceReload
- 是否在不使用缓存的情况下重新加载当前页面
- true 表示强制重新加载而不使用缓存，所有资源文件都会重新拉取一遍，好处就是可从取服务器获取最新的资源文件，坏处就是加载时间会变长
正确格式
cy.reload()
实际栗子
测试文件代码
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 提供了以下的预设值
| 预设值 | 宽度 | 高度 |
|---|---|---|
| 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 宽高
