Cypress 中如何实现鼠标滚轮操作的模拟？

Cypress模拟滚轮无效果解决方案 #

原来的代码无效果通常是两个核心原因：事件参数不全不符合浏览器标准，或者选中的元素不是实际产生滚动的容器，可按以下方案逐一排查解决：

• 优先用Cypress内置滚动API，绝大多数场景下比手动触发wheel事件更稳定，不需要自己拼接事件参数：

// 向上滚动10px，对应你原代码的deltaY: -10需求
cy.get('#elId').scrollTo(0, -10)
// 向下滚动100px示例
cy.get('#elId').scrollTo(0, 100)
// 也支持直接滚动到容器顶部/底部
cy.get('#elId').scrollTo('top')

• 如果业务场景必须手动触发wheel事件，需要补全浏览器要求的标准事件属性，仅传deltaY多数浏览器内核不会识别为有效滚轮事件：

cy.get('#elId')
  .trigger('mouseover') // 先让鼠标悬浮在滚动区域，匹配真实操作逻辑
  .trigger('wheel', {
    deltaY: -10,
    deltaMode: 0, // 0代表滚动单位为像素，1为行，2为页，普通滚动场景填0即可
    bubbles: true,
    cancelable: true,
    force: true
  })

• 确认你选中的#elId是实际产生滚动的容器：如果溢出滚动的是子元素、滚动权限绑定在父容器上，需要把事件触发在对应的父容器上才会生效。
• 如果你要模拟的是整个页面的全局滚动，直接调用cy.scrollTo()即可，不需要选中特定元素。

内容的提问来源于stack exchange，提问作者dx584905