Puppeteer：スクリーンショットを取得時の注意点

概要

Headless Chrome ライブラリ Puppeteer を使って
スクリーンショットを取得してみました。

指定したDOM（HTML）のみの手順

https://qiita.com/tamanugi/items/8cc1266265457f13b9ea

上記のサイトを参考にしました

  var targetElementSelector = '#marquee_cms01'
  await page.waitFor(targetElementSelector)
  var clip = await page.evaluate(s => {
    const el = document.querySelector(s)

    // エレメントの高さと位置を取得
    const { width, height, top: y, left: x } = el.getBoundingClientRect()
    return { width, height, x, y }
  }, targetElementSelector)
  await page.screenshot({ clip, path: 'images/sitetop/marquee1.png' })
  await page.waitFor(1000);
  //clip
  console.log(clip);

Selectorさえ指定できればその部分のDOM(HTML)のみを
スクリーンショットがとれます

注意点

IDセレクタが複数ある場合

IDセレクタが複数あるクソみたいなHTMLはうまく動きません
本来取得した座標がとれません

http://lealog.hateblo.jp/entry/2011/12/06/202348

上記のサイトにも書いてあるとおり、
IDセレクタは複数を書いていけない

というか
気が付かなかった・・・
まじはまった
作成した技術者はやめたから文句もいえない

focusによる画面キャプチャ

バグかもしれないが
inputのtextがある場合のみその付近での画面キャプチャがとれます

成功

  await page.focus('#menuTab0701 > div.search.alL > div > form > input.search_box');

失敗

  await page.focus('#dispbody > footer > div > ul > li');