How do I point the mouse to a specific part of the page and then scroll? (Puppeteer)

Viewed 278

The URL I'm talking about is https://www.vudu.com/content/movies/movieslist. I'm trying to scroll through the part where the movies are. When I use the following code, it doesn't work.

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

I think this is because you naturally have to hover over the movies before that part can scroll. How can I solve this problem? Thanks!

My full code:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.setViewport({ width: 1280, height: 800 });
    url = "https://www.vudu.com/content/movies/movieslist"
    await page.goto(url, {waitUntil: 'load'});
    await page.evaluate( () => {
        window.scrollBy(0, window.innerHeight);
    });
    await page.waitFor(2000);
})()
2 Answers

It's not the window that you need to scroll, but the div that wraps the thunbnails.

Try getting a handle to the wrapper using:

var first = document.querySelector(".contentPosterWrapper");
var wrapper = first.parentNode.parentNode;
wrapper.scrollBy(0, 500);

You can use mouse.move() for this, but it seems this would not fix the issue as the document body is not scrollable. You need to find the scrollable element to scroll just it:

'use strict';

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch({ headless: false, defaultViewport: null });
    const [page] = await browser.pages();

    await page.goto('https://www.vudu.com/content/movies/movieslist');
    await page.waitForSelector('.nr-pt-40');

    const data = await page.evaluate(() => {
      const container = document.querySelector('.nr-pt-40');
      container.scrollBy(0, container.clientHeight);
    });

    // await browser.close();
  } catch (err) {
    console.error(err);
  }
})();
Related