How do I scroll right in puppeteer 5.1.0 using mouse.wheel?

user_8548054 0
Viewed 2044

I have a grid on this page. The last column is off screen to the right. I want to read the header cell text. I saw this snippet at https://pptr.dev/#?product=Puppeteer&version=v5.1.0&show=api-class-mouse

So I ran the code below in cucumber/puppeteer. There were no errors but nothing happened in the browser. So how do I scroll to the right using this feature or any other way.

I can't use querySelector... to get the header because the selectors don't exist until the column is visible. Please advise.

async function scrollRight() {
   await this.page.mouse.wheel({ deltaX: 2500 })
}
puppeteer node.js
1 Answers

Your scrollRight() function should have a part where the mouse hovers over the right column. In the linked example there is a page.mouse.move(x,y) which should be applied in your case as well.

To get the X Y coordinates of your column you can use elementHandle.boundingBox puppeteer function. With a simple formula you can position the cursor exactly to the center of the column.

E.g.:

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 });
}

To check visibility of the column you can use page.waitForSelector's visible: true option, which waits for the element to be visible, i.e. to not have display: none or visibility: hidden CSS properties. It defaults to false, so if it caused problems in your use case that it was not visible it may help.

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