如何使用Cypress触发D3.js图表的滚动缩放事件

你之前的触发代码没有传递D3缩放逻辑依赖的滚动增量参数，所以无法触发缩放效果。D3的zoom行为会读取wheel事件的deltaY判断滚动方向、deltaMode判断滚动单位，缺少这两个参数时D3会判定为无效滚动，不会触发缩放回调。

正确触发代码 #

单步滚动触发 #

// 模拟向上滚动（放大效果）
cy.get('.pippo > svg')
  .trigger('wheel', {
    x: 500,
    y: 500,
    deltaY: -100, // 负值对应向上滚动（放大），正值对应向下滚动（缩小），数值越大缩放幅度越高
    deltaMode: 0, // 0代表滚动单位为像素，和浏览器默认滚动行为一致
    force: true
  });

异常场景适配 #

如果上述代码依然没有生效，可以按照以下优先级排查调整：

• 确认选中的元素是D3绑定zoom监听的元素，部分场景下zoom事件会绑定在SVG内部的容器元素而非SVG根节点，你可以给绑定zoom的元素添加专属类名后再选择。
• 增加bubbles: true参数，确保事件可以冒泡到绑定监听的元素：

cy.get('.pippo > svg')
  .trigger('wheel', {
    x: 500,
    y: 500,
    deltaY: -100,
    deltaMode: 0,
    bubbles: true,
    force: true
  });

• 部分交互逻辑需要先让元素进入激活状态，可以先触发鼠标悬停、按下事件后再触发滚动：

cy.get('.pippo > svg')
  .trigger('mouseover', 500, 500, { force: true })
  .trigger('mousedown', 500, 500, { force: true })
  .trigger('wheel', {
    x: 500,
    y: 500,
    deltaY: -100,
    deltaMode: 0,
    force: true
  })
  .trigger('mouseup', { force: true });

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