持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情
scrollTo作用
滑动浏览器自带的滚动条、元素的滚动条
语法格式
cy.scrollTo(position)
cy.scrollTo(x, y)
cy.scrollTo(position, options)
cy.scrollTo(x, y, options)
// ---或---
.scrollTo(position)
.scrollTo(x, y)
.scrollTo(position, options)
.scrollTo(x, y, options)
可以是 cy 直接调用，也可以是 DOM 元素来调用
正确写法
// 整个页面往下滑动 500px
cy.scrollTo(0, 500)
// 滚动 .sidebar 元素到它的底部
cy.get('.sidebar').scrollTo('bottom')
重点
- 必须是 DOM 元素才能调用 .scrollTo()
- 可以是针对浏览器窗口
- 也可以是针对有滚动条的元素
错误写法
// 不是 DOM 元素
cy.title().scrollTo('My App')
参数列表
position 位置参数
每个元素都有九个 position，具体可看下图
坐标 x, y
距离 DOM 元素左上角的坐标，x 是横轴，y 是竖轴
options
实际栗子
html 代码
测试文件代码
总结，有三种x, y的写法
- 直接写数字，代表 px，但不用加 px
- 百分比
- 指定px，需要加px
测试结果
title作用
获取页面的标题， document.title
语法格式
cy.title()
cy.title(options)
options： 只有 timeout 和 log，不再展开讲了
正确写法
cy.title()
实际栗子
测试文件代码
测试结果
再来看看命令在 console 会输出啥
yielded 就是产出的意思
如果想从头学起Cypress，可以看下面的系列文章哦
url作用
- 获取页面当前的 url
- 等价于 cy.location('href')
语法格式
cy.url()
cy.url(options)
options： 只有 timeout 和 log，不再展开讲了
正确写法
cy.url()
实际栗子
测试文件代码
测试结果
url() 命令在 console 会输出啥
location(href) 命令在 console 会输出啥
结论
- 可以看到 cy.url() 和 cy.location('href') 是等价效果的
- 其实还有更多等价的写法，看下面
三种等价的断言方式
测试文件代码
测试结果
