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

Question

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

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

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

附加说明：正如 API 文档所说，关于 .evaluateHandle()：

...要在页面上下文中评估的函数

...page.evaluate 和 page.evaluateHandle 的唯一区别是 page.evaluateHandle 返回页内对象 (JSHandle)。

更新 因此，要获取一个元素，必须从 evaluateHandle 方法返回 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)
}