javascript - How to imitate mouse scroll inside div in popup with puppeteer? - Stack Overflow

admin管理员组

文章数量:1434239

Let's say you have a <div> element which appears on a mouse click. Inside of it one has a long list of items cropped by the fixed size of the wrapper. As I understand, setting the .offsetTop on the div element would solve this, but I'm trying to do that within puppeteer headless browser by using it's page.evaluateHandle method which returns a JSHandle. So I'm confused how exactly to achieve the result if I can't get the original element returned by this function. And setting the offsetTop inside the callback doesn't make difference, so I'm definitely doing something wrong.

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

BTW the .asElement() also behaves in some unexpected way, I do not pletely get it how to try to find an element, get it's absolute position or simply set the parameter.

Additional note: as API docs say regarding the .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).

update So, to get an element one has to return the JSHandle from evaluateHandle method and then pass it as second parameter to evaluate method as following:

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

But the main question how to manipulate the attributes, specifically offsetTop to imitate scroll remains.

Let's say you have a <div> element which appears on a mouse click. Inside of it one has a long list of items cropped by the fixed size of the wrapper. As I understand, setting the .offsetTop on the div element would solve this, but I'm trying to do that within puppeteer headless browser by using it's page.evaluateHandle method which returns a JSHandle. So I'm confused how exactly to achieve the result if I can't get the original element returned by this function. And setting the offsetTop inside the callback doesn't make difference, so I'm definitely doing something wrong.

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

BTW the .asElement() also behaves in some unexpected way, I do not pletely get it how to try to find an element, get it's absolute position or simply set the parameter.

Additional note: as API docs say regarding the .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).

update So, to get an element one has to return the JSHandle from evaluateHandle method and then pass it as second parameter to evaluate method as following:

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

But the main question how to manipulate the attributes, specifically offsetTop to imitate scroll remains.

• javascript
• web-scraping
• puppeteer

Share Improve this question Follow edited Aug 16, 2018 at 8:30 magnump0 asked Aug 15, 2018 at 21:54 magnump0magnump0 2,56622 gold badges2828 silver badges3232 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Actually the answer is very straightforward. I missed the simplest solution with div.scrollTop = ....

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

本文标签： javascriptHow to imitate mouse scroll inside div in popup with puppeteerStack Overflow