Puppeteerで一定回数スクロールしまくる

2022年7月30日追記

Puppeteerのpage._clientは非公開APIなのでcreateCDPSession()を使用してclientにアクセスしたほうがいいとのこと

    const client = await page.target().createCDPSession();
    await client.send(
      'Input.synthesizeScrollGesture',
      {
        x: 0,
        y: 0,
        xDistance: 0,
        yDistance: distance,
        repeatCount: 5,
        repeatDelayMs: 200
      }
    );

参考リンク: Puppeteerのpage._clientの代わりにcreateCDPSession()を使おう。 | Ginpen.com

環境

• Nodejs 10
• Puppeteer v1.12.2

概要

言わずとしれたヘッドレスで動作するChromeこと、Puppeteer

で、今回は長いページで下までスクロールしたい。普通に考えてwindow.scrollTo(0,1000);をpage.evaluate()するのが一般的なのだが、訴求面と見ていると、スクロール専用の隠し？APIがあった。

コード

予めpuppeteerがインストールされていれば以下で動く

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://github.com/GoogleChrome/puppeteer');
  await page._client.send(
    'Input.synthesizeScrollGesture',
    {
      x: 0,
      y: 0,
      xDistance: 0,
      yDistance: -700,
      repeatCount: 5,
      repeatDelayMs: 200

    }
  );

  await browser.close();
})();

ドキュメントはここだが、なんとなく渡す名前で想像がつく。上の例だと、700px下に移動するのを200ms間隔待機しつつ、５回繰り返す。

この方法を使えば、lazyload等のスクロールしないと正しく表示されないサイトとかでもテストができる。

注意

ただし、 Input.synthesizeScrollGestureがまだEXPERIMENTALなので仕様がガラッと変更、ないしは削除されることも全然あり得るという点がある。。

ただ、Chrome DevTools Protocolにはまだまだ知らないAPIがたくさんあるなぁと思った

参考リンク

• Chrome DevTools Protocol Viewer