puppeteer でviewportを指定するとスクリーンショットのfullPage: true が効かなくなる問題

これで解決!

await page.setViewport({
  width: 320,
  height: await page.evaluate(() => document.body.clientHeight),
});

なにが問題なのか

puppeteer でscreenshot をフルスクリーンで撮るにはscreenshot()のオプションにfullPage: trueを指定します。

await page.screenshot({
  path: `${outdir}/test.png`,
  fullPage: true
});

これでばっちりだと思いきや、なぜかsetViewportwidthheightを指定すると無効化されてしまいます???

await page.setViewport({
  width: 320,
  height: 3000,
});

ならばと、widthだけを指定してみたところ怒られます。。

await page.setViewport({
  width: 320,
  // height: 3000,
});

なんでや。。

Protocol error (Emulation.setDeviceMetricsOverride): Invalid parameters height: integer value expected

どうすればいいのかと悩んでいたところ、単純にコンテンツの高さを取得する方法で解決できました。
それが冒頭のコードです。

await page.setViewport({
  width: 320,
  height: await page.evaluate(() => document.body.clientHeight),
});

古典的な解決策ですね。

2017年の8月に起票されてるけどいまだにOpenのままです。
Chrome seems to have a hard limit when taking screenshots of tall pages · Issue #359 · GoogleChrome/puppeteer · GitHub

作って動かすALife ―実装を通した人工生命モデル理論入門

作って動かすALife ―実装を通した人工生命モデル理論入門

  • 作者: 岡瑞起,池上高志,ドミニク・チェン,青木竜太,丸山典宏
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2018/07/28
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログ (1件) を見る