触发鼠标滚轮滚动事件 - puppeteer

Question

我有一个脚本，我需要在其中测试页面上的滚动功能。我有两个滚动条，一个用于浏览器窗口，另一个用于实现无限滚动的网格。我正在像这样测试浏览器窗口滚动：

(async () => {

    const innerWidth = await page.evaluate(_ => { return window.innerWidth} );
    const innerHeight = await page.evaluate(_ => { return window.innerHeight} );
    const mouse = page.mouse
    await mouse.move(innerWidth/2, innerHeight/2);

    await page.waitFor(500);

    // Scroll Window
    page.evaluate(_ => {
        window.scrollBy(0, innerHeight);
    });     
    ...
}();

这适用于窗口滚动，但是，我不能用它来测试网格中的鼠标滚轮滚动。我知道有一种方法可以在 JQuery 中创建鼠标滚轮事件，如下所示：

$(".testdiv").on('mousewheel', function(e){
  console.log(e);

})
var event = jQuery.Event( "mousewheel" );
event.deltaY = -1;
$(".testdiv").trigger(event); 

我需要在纯 JS 中执行此操作。有没有办法在我的脚本中用纯 JS 实现这一点？

Answer 1

你要的是用纯JS实现鼠标滚轮，测试一下；即调用自定义事件。

为了添加鼠标滚轮监听器

yourdomNode.addEventListener('mousewheel', ()=>{
    //Some mousewheel listener
});

如果您想发送一个用于测试的自定义事件，您可以执行以下操作。您当然可以在创建的事件中添加更多符合您的测试目的的信息。

var cEvent = new Event('mousewheel');

cEvent.detail = 0;
cEvent.wheelDeltaY = someWheelDeltaY;
cEvent.wheelDeltaX = someWeelDeltaX;

if (cEvent.wheelDeltaY) {
  cEvent.wheelDelta = somewheelDeltaY;
} else if (cEvent.wheelDeltaX) {
  cEvent.wheelDelta = someWheelDeltaX;
}

yourdomNode.dispatchEvent(cEvent);