動かざることバグの如し

近づきたいよ 君の理想に

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

環境

  • 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間隔待機しつつ、5回繰り返す。

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

注意

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

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

参考リンク