Chrome Devtools Protocol to scroll a page

Scroll a page with Devtools Protocol

Smooth scrolling in Playwright or Puppeteer is no easy task. It takes quite some code to script.

In an example script in the ‘Lighthouse User flows’ documentation I came across code which uses Chrome Devtools Protocol to scroll a page.

Not yet tested but might be interesting to investigate.

  const session = await page.target().createCDPSession();

// We need the ability to scroll like a user. There's not a direct puppeteer function for this, but we can use the DevTools Protocol and issue a Input.synthesizeScrollGesture event, which has convenient parameters like repetitions and delay to somewhat simulate a more natural scrolling gesture.
  // https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-synthesizeScrollGesture
  await session.send('Input.synthesizeScrollGesture', {
    x: 100,
    y: 0,
    yDistance: -2500,
    speed: 1000,
    repeatCount: 2,
    repeatDelayMs: 250,
  });

Previous:

Edit this page on Github