作用

滑动浏览器自带的滚动条、元素的滚动条

语法格式

  1. cy.scrollTo(position)
  2. cy.scrollTo(x, y)
  3. cy.scrollTo(position, options)
  4. cy.scrollTo(x, y, options)
  5. // ---或---
  6. .scrollTo(position)
  7. .scrollTo(x, y)
  8. .scrollTo(position, options)
  9. .scrollTo(x, y, options)

可以是 cy 直接调用，也可以是 DOM 元素来调用

正确写法

  1. // 整个页面往下滑动 500px
  2. cy.scrollTo(0, 500)
  3. // 滚动 .sidebar 元素到它的底部
  4. cy.get('.sidebar').scrollTo('bottom')

重点

  • 必须是 DOM 元素才能调用 .scrollTo()
  • 可以是针对浏览器窗口
  • 也可以是针对有滚动条的元素

错误写法

  1. // 不是 DOM 元素
  2. cy.title().scrollTo('My App')

参数列表

position 位置参数

每个元素都有九个 position，具体可看下图
Cypress系列（28）- scrollTo() 命令详解 - 图1

坐标 x, y

距离 DOM 元素左上角的坐标，x 是横轴，y 是竖轴

options

Cypress系列（28）- scrollTo() 命令详解 - 图2

实际栗子

html 代码

Cypress系列（28）- scrollTo() 命令详解 - 图3

测试文件代码

Cypress系列（28）- scrollTo() 命令详解 - 图4

总结，有三种x, y的写法

  1. 直接写数字，代表 px，但不用加 px
  2. 百分比
  3. 指定px，需要加px

测试结果

Cypress系列（28）- scrollTo() 命令详解 - 图5

https://www.cnblogs.com/poloyy/p/13141302.html