如何使用 puppeteer 在弹出窗口中模仿 div 内的鼠标滚动？

Question

假设您有一个 <div> 元素，它在单击鼠标时出现。在它里面有一长串被固定尺寸的包装纸裁剪的项目。据我所知，在 div 元素上设置 .offsetTop 可以解决这个问题，但我试图在 puppeteer 无头浏览器中使用它的 page.evaluateHandle 方法来解决这个问题 return一个JSHandle。所以我很困惑，如果我不能通过这个函数得到原始元素 returned ，究竟如何实现结果。在回调中设置 offsetTop 并没有什么区别，所以我肯定做错了什么。

  const divHandle = await page.evaluateHandle(() => {
    let overflowDiv = document.querySelectorAll(
      `some > selector`
    )[0];
    overflowDiv.offsetTop = overflowDiv.offsetTop + 200
    return overflowDiv.offsetTop;
  });

顺便说一句，.asElement() 也有一些意想不到的行为，我不完全明白如何尝试查找元素、获取它的绝对位置或简单地设置参数。

补充说明：正如 API 文档所说 .evaluateHandle():

...Function to be evaluated in the page context

...The only difference between page.evaluate and page.evaluateHandle is that page.evaluateHandle returns in-page object (JSHandle).

更新因此，要获取一个元素，必须从 evaluateHandle 方法 return JSHandle，然后将其作为第二个参数传递给 evaluate 方法，如下所示：

await page.evaluate(e => e, jsHandle);

但主要问题是如何操作属性，特别是 offsetTop 来模拟滚动。

Answer 1

其实答案很简单。我错过了 div.scrollTop = ....

最简单的解决方案

try {
  const res = await page.$eval(`div._weirdo`,
    e => {
      e.scrollTop = e.scrollTop + 200
      return e
    }
  )
}
catch (e) {
  console.log(e)
}

如何使用 puppeteer 在弹出窗口中模仿 div 内的鼠标滚动？

How to imitate mouse scroll inside div in popup with puppeteer?

javascript

web-scraping

puppeteer