ヘッドレスchrome で特定ID部分のキャプチャ

http://qiita.com/hai/items/522f2596734c9fef99c8
にてphantomjs で実装していたのだが、svgのmask関連が上手く表示できておらず、
泣く泣くコードを捨てて ヘッドレスchrome　で実装しました。node,js関連でかなりハマりましたので共有します。

https://developers.google.com/web/updates/2017/04/headless-chrome?hl=ja
Lighthouse の ChromeLauncher を使う

を参考にCentosにyumで入れ実行したが上手く値が取得できない。
小1時時間ほど悩んでログが/tmp/lighthouse.****
に出ていることを発見し原因が判明。

lighthouse/lighthouse-cli/chrome-launcherが見ているchromeがstableのため、stableは現在ver58のためheadlessは非対応。
bataでver59 を入れてstableはアンインストールしたが挙動は変わらず。。
/etc/alternatives/google-chrome -> /usr/bin/google-chrome-beta

になっているにもかかわらずgoogle-chrome-stableの方を直に見ているらしく、betaを参照できない。
仕方がないので、無理やりln -s /usr/bin/google-chrome-beta google-chrome-stable
にてようやくChromeLauncherが正常動作。

キャプチャに関しては、
https://medium.com/@dschnr/using-headless-chrome-as-an-automated-screenshot-tool-4b07dffba79a

を参考に座標、サイズを取得して位置を決めてscreenshopを実施。

const {root: {nodeId: documentNodeId}} = await DOM.getDocument();
const {nodeId: frontNodeId} = await DOM.querySelector({selector: '#hogehogeID',nodeId: documentNodeId,});
const {model: {height:frontHeight,width:frontWidth,content:[frontX,frontY]}} = await DOM.getBoxModel({nodeId: frontNodeId});
await Emulation.setVisibleSize({width: frontWidth, height: frontHeight});
await Emulation.forceViewport({x: frontX, y: frontY, scale: 1});