Cypress如何测试鼠标中键（MMB）滚动触发的缩放功能

核心问题原因 #

鼠标中键缩放功能绑定的是wheel事件，而非你之前使用的scroll事件，事件类型不匹配导致无法触发组件的缩放逻辑。手动修改DOM属性的方式不会触发组件内部的事件回调，因此无法同步更新缩放百分比文本。

正确实现方案 #

// 模拟鼠标中键向上滚动（放大场景），向下滚动可把deltaY改为正值
cy.getCanvas()
  .trigger('wheel', {
    deltaY: -100, // 数值大小可根据需要的缩放幅度调整
    bubbles: true,
    cancelable: true
  })

// 验证缩放效果
// 1. 验证容器元素transform属性变更
cy.get('.react-transform-component')
  .should('have.attr', 'style')
  // 正则匹配scale值变化，不需要硬编码完整的transform字符串
  .and('match', /scale\((?!1\.)\d+\.?\d*\)/)

// 2. 验证缩放百分比文本更新，将选择器替换为你实际的百分比文本元素选择器
cy.get('.your-zoom-percentage-selector')
  .should('not.eq', '100%')

可选调整说明 #

• 如果在canvas上触发事件未生效，可直接将trigger方法绑定到.react-transform-component元素上，部分缩放库会直接在容器层绑定事件监听
• 需要模拟多次连续滚动时，可链式调用多次trigger方法，或通过循环实现多步缩放测试
• deltaY的绝对值越大，单次滚动的缩放幅度越高，可根据你的组件实际缩放步长调整对应数值

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