scrollTo
滚动到指定位置。
在 .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.scrollTo(0, 500) // 将窗口向下滚动 500px
cy.get('.sidebar').scrollTo('bottom') // 将 'sidebar' 滚动到底部
错误用法
cy.title().scrollTo('My App') // 错误，'title' 不返回 DOM 元素
参数
position (String)
要滚动窗口或元素到的指定位置。有效位置包括 topLeft、top、topRight、left、center、right、bottomLeft、bottom 和 bottomRight。
x (Number, String)
距离窗口/元素左侧的像素距离或窗口/元素宽度的百分比。
y (Number, String)
距离窗口/元素顶部的像素距离或窗口/元素高度的百分比。
options (Object)
传入一个选项对象以更改 cy.scrollTo() 的默认行为。
| 选项 | 默认值 | 描述 |
|---|---|---|
duration | 0 | 滚动的持续时间（毫秒） |
easing | swing | 使用缓动动画滚动 |
ensureScrollable | true | 确保元素可滚动。如果元素无法滚动则报错。 |
log | true | 在命令日志中显示该命令 |
timeout | defaultCommandTimeout | 等待 .scrollTo() 解析的超时时间 |
生成结果
.scrollTo()返回与传入时相同的目标对象。- 在
.scrollTo()之后继续链式调用依赖该目标对象的命令是不安全的。
示例
位置
滚动到窗口底部
cy.scrollTo('bottom')
滚动到列表中央
cy.get('#movies-list').scrollTo('center')
坐标
将列表向下滚动 500px
cy.get('#infinite-scroll-list').scrollTo(0, 500)
将窗口向右滚动 500px
cy.scrollTo('500px')
滚动到元素高度的 25% 处
cy.get('.user-photo').scrollTo('0%', '25%')
选项
使用线性缓动动画滚动
cy.get('.documentation').scrollTo('top', { easing: 'linear' })
在 2000ms 内滚动到右侧
cy.get('#slider').scrollTo('right', { duration: 2000 })
如果元素不可滚动则不报错
假设我们不知道 table 元素是否可滚动。有时 table 可能是可滚动的（有 2,000 行），有时 table 可 能不可滚动（只有 5 行）。可以通过传递 ensureScrollable: false 来忽略元素是否可滚动的检查。
// 即使表格不可滚动也会继续执行下一条命令
cy.get('table').scrollTo('bottom', { ensureScrollable: false })
cy.get('table').find('tr:last-child').should('be.visible')
注意事项
可操作性
cy.scrollTo() 是一个“操作命令”，遵循可操作性的所有规则。
作用域
cy.scrollTo() 的行为取决于它是作为命令序列的起点还是被链式调用。
作为命令序列的起点时：
这会滚动 window。
cy.scrollTo('bottom')
被链式调用时：
这会滚动 <#checkout-items> 元素。
cy.get('#checkout-items').scrollTo('right')
快照
快照不反映滚动行为
Cypress 不会在快照中准确反映任何元素的滚动位置。 如果想查看实际的滚动行为，建议使用 .pause() 逐步执行每个命令，或观看测试运行的视频。
规则
要求
.scrollTo()需要链式调用一个返回 DOM 元素的命令。.scrollTo()要求元素可滚动。
超时设置
.scrollTo()可能会在等待你添加的断言通过时超时。
命令日志
滚动到窗口底部，然后将元素滚动到“右侧”
cy.scrollTo('bottom')
cy.get('#scrollable-horizontal').scrollTo('right')
上述命令将在命令日志中显示为：
当点击命令日志中的 scrollTo 时，控制台会输出以下内容：
历史
| 版本 | 变更 |
|---|---|
| 4.11.0 | 添加了对 ensureScrollable 选项的支持。 |