Cypress.io如何测试特定范围内的滚动量？

我完全理解你的需求：点击按钮触发页面滚动到特定高度后，需要校验这个滚动值是否落在你设定的区间里。你先确认目标元素不在可视区的思路是合理的，下面我给你两种更直接的实现方案，帮你完成滚动范围的验证：

方案一：直接校验窗口滚动高度 #

这种方式最直观，通过Cypress获取窗口对象后，直接读取滚动高度值并做范围断言：

// 先点击触发滚动的按钮
cy.get('button.scroll-trigger-btn').click()

// 获取窗口滚动高度，验证是否在目标区间内
cy.window().then(win => {
  // 示例：期望滚动高度在 800px 到 1000px 之间
  expect(win.scrollY).to.be.within(800, 1000)
})

// 兼容性更好的写法（针对文档根元素的scrollTop）
cy.document().then(doc => {
  expect(doc.documentElement.scrollTop).to.be.within(800, 1000)
})

方案二：结合目标元素位置间接验证 #

如果你的滚动目的是让特定元素进入可视区，还可以通过元素的视口位置来间接校验滚动范围，同时延续你之前的思路：

// 先确认目标元素不在当前可视区内
cy.get('#angular-projects').should('not.be.visible')

// 点击触发滚动的按钮
cy.get('button.scroll-trigger-btn').click()

// 先验证元素已进入可视区（可选，确保滚动生效）
cy.get('#angular-projects').should('be.visible')

// 获取元素位置，校验滚动范围
cy.get('#angular-projects').then($el => {
  const elementTopInViewport = $el[0].getBoundingClientRect().top
  // 示例：期望元素顶部在视口的100px-200px区间内
  expect(elementTopInViewport).to.be.within(100, 200)

  // 如果要验证页面整体滚动高度，可通过视口位置+滚动距离计算
  const totalScrollHeight = window.scrollY + elementTopInViewport
  expect(totalScrollHeight).to.be.within(800, 1000)
})

几个注意点 #

• 如果页面有自定义滚动动画，Cypress默认会等待动画完成，但如果动画时长较长，建议添加cy.wait(500)或者给断言设置{ timeout: 3000 }来延长等待时间，避免断言过早执行。
• 不同浏览器对scrollY和scrollTop的处理略有差异，测试时建议多覆盖几个主流浏览器环境。
• 如果滚动是针对某个容器（而非整个窗口），需要获取对应容器的scrollTop值，而非窗口的滚动属性。

内容的提问来源于stack exchange，提问作者A. Tran