node.js - 如何使用 mouse.wheel 在 puppeteer 5.1.0 中向右滚动？

Question

我在这个页面上有一个网格。最后一列在屏幕右侧。我想阅读标题单元格文本。
我看到了这个片段
https://pptr.dev/#?product=Puppeteer&version=v5.1.0&show=api-class-mouse
所以我在cucumber/puppeteer中运行了下面的代码。没有错误，但浏览器中什么也没发生。那么如何使用此功能或任何其他方式向右滚动。
我不能使用 querySelector... 来获取标题，因为在列可见之前选择器不存在。请指教。

async function scrollRight() {
   await this.page.mouse.wheel({ deltaX: 2500 })
}

Answer 1

您的 scrollRight()函数应该有一部分 鼠标悬停在右列上。 在链接的例子中有一个 page.mouse.move(x,y) 这也应该适用于您的情况。
要获取列的 X Y 坐标，您可以使用 elementHandle.boundingBox puppeteer 功能。使用简单的公式，您可以将光标精确定位到列的中心。
例如。:

async function scrollRight() {
  const elem = await page.$('.last-column');
  const boundingBox = await elem.boundingBox();
  await page.mouse.move(
    boundingBox.x + boundingBox.width / 2, // x
    boundingBox.y + boundingBox.height / 2 // y
  );

 await page.mouse.wheel({ deltaX: 2500 });
}

要检查列的可见性，您可以使用 page.waitForSelector 的 visible: true选项，等待元素可见，即没有 display: none或 visibility: hidden CSS 属性。默认为 false ，因此如果它在您的用例中导致问题不可见，它可能会有所帮助。

await page.waitForSelector('.last-column', {
  visible: true,
});