So if you query an element and call hover on that it will scroll into view if needed. So IMO there should also be an API to simply scroll an element into view without triggering any other side effects.

you can also

page.evaluate(_ => {
  window.scrollBy(0, window.innerHeight);
});

@Garbee but right now I can't figure out how to iterate over all the images. see #303.
@paulirish thanks! I was currently messing with sending keyboard events, since I was aiming for a specific position... But it would be nice to be able to figure out how to iterate over DOM elements easily.

We use scrollIntoViewIfNeeded. I think that this will solve your issue once we have page.$$

@JoelEinbinder can you elaborate what you mean by page.$$ is that integration of jquery?

can you elaborate what you mean by page.$$ is that integration of jquery?

We do nothing with jQuery internally. That is a page-level library. page.$$ is one of the public API methods puppeteer provides.

window.scrollBy(0, document.body.scrollHeight);

works better for me.

you can use it

const autoScroll = async (page) => {
  await page.evaluate(async () => {
    await new Promise((resolve, reject) => {
      let totalHeight = 0
      let distance = 100
      let timer = setInterval(() => {
        let scrollHeight = document.body.scrollHeight
        window.scrollBy(0, distance)
        totalHeight += distance
        if(totalHeight >= scrollHeight){
          clearInterval(timer)
          resolve()
        }
      }, 100)
    })
  })
}

I solved this, editing the onReady.js file located at /engine_scripts/puppet/

The final .js file looks like this:

module.exports = async (page, scenario, vp)=>{
function wait (ms) {
return new Promise(resolve => setTimeout(() => resolve(), ms));
}

await page.goto(scenario.url, {waitUntil: 'load'});
// Get the height of the rendered page
const bodyHandle = await page.$('body');
const { height } = await bodyHandle.boundingBox();
await bodyHandle.dispose();

// Scroll one viewport at a time, pausing to let content load
const viewportHeight = page.viewport().height;
let viewportIncr = 0;
while (viewportIncr + viewportHeight < height) {
await page.evaluate(_viewportHeight => {
window.scrollBy(0, _viewportHeight);
}, viewportHeight);
await wait(2000);
viewportIncr = viewportIncr + viewportHeight;
}

// Scroll back to top
await page.evaluate(_ => {
window.scrollTo(0, 0);
});

// Some extra delay to let images load
await wait(2000);
};

I found this solution at https://www.screenshotbin.com/blog/handling-lazy-loaded-webpages-puppeteer .

@visualxcode ,you got my code from here? chenxiaochun/blog#38

page.$eval('#element', (el) => el.scrollIntoView())

Worked for me:

        let previousHeight;
        while (true) {
          try {
            previousHeight = await page.evaluate('document.body.scrollHeight')
            await page.evaluate('window.scrollTo(0, document.body.scrollHeight)')
            await page.waitForFunction(`document.body.scrollHeight > ${previousHeight}`)
          } catch (e) {
            console.log('Scroll End Page')
            break
          }
        }