scrollIntoView
将元素滚动到可视区域。
在 .scrollIntoView() 之后继续链式调用依赖于该目标元素的命令是不安全的。
语法
.scrollIntoView()
.scrollIntoView(options)
用法
正确用法
cy.get('footer').scrollIntoView() // 将 'footer' 滚动到可视区域
错误用法
cy.scrollIntoView('footer') // 错误，不能从 'cy' 链式调用
cy.window().scrollIntoView() // 错误，'window' 不是 DOM 元素
参数
options (Object)
传入一个选项对象来改变 .scrollIntoView() 的默认行为。
| 选项 | 默认值 | 描述 |
|---|---|---|
duration | 0 | 滚动的持续时间（毫秒） |
easing | swing | 使用缓动动画进行滚动 |
log | true | 在命令日志中显示该命令 |
offset | {top: 0, left: 0} | 元素滚动到可视区域后，再额外滚动的距离 |
timeout | defaultCommandTimeout | 在超时前等待 .scrollIntoView() 解析的时间 |
生成结果
.scrollIntoView()返回与传入时相同的目标元素。- 在
.scrollIntoView()之后继续链式调用依赖于该目标元素的命令是不安全的。
示例
滚动
cy.get('button#checkout').scrollIntoView().should('be.visible')
选项
使用线性缓动动画进行滚动
cy.get('.next-page').scrollIntoView({ easing: 'linear' })
在 2000 毫秒内滚动到元素
cy.get('footer').scrollIntoView({ duration: 2000 })
滚动到元素下方 150px 处
cy.get('#nav').scrollIntoView({ offset: { top: 150, left: 0 } })
注意事项
快照
快照不反映滚动行为
Cypress 不会在快照中准确反映任何元素的滚动位置。 如果你想查看实际的滚动行为，我们建议使用 .pause() 逐步执行每个命令，或者观看测试运行的视频。
规则
要求
.scrollIntoView()需要链式调用一个返回 DOM 元素的命令。
断言
.scrollIntoView()会自动等待链式断言通过。
超时设置
.scrollIntoView()可能会在等待添加的断言通过时超时。
命令日志
断言元素滚动到可视区域后可见
cy.get('#scroll-horizontal button').scrollIntoView().should('be.visible')
上述命令将在命令日志中显示为：
当点击命令日志中的 scrollintoview 命令时，控制台会输出以下内容：
