2018年12月28日0件のコメントGMOアドマーケティングのy.a.です。https://developers.google.com/web/tools/puppeteer/)ですのでスクレイピングなり、なにかWebページのテストを自動化したい場合に、比較的手軽に色々できます。そこでPuppeteerに興味を持った方へ、なるべく簡潔にPuppeteerで出来ることをいくつか紹介したいと思います。※なお実行環境にNode.jsがインストールされていることが前提です。ここに以下紹介するものを入れるイメージです。ここに以下紹介するものを入れるイメージです。main.jsスクリーンショットはできる?できます。page.screenshotを使用してできます。'screenshot.png'});上記はページ全体ですが、特定の要素だけ取るということも可能です。elementHandle.screenshotです。https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#elementhandlescreenshotoptions例えばh1要素だけのスクリーンショットを撮りたい場合はこうです。'screenshot_h1.png'});JS実行できる?できます。page.evaluateを使用します。https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-argsこういう使い方をすることはないと思いますが、こんな感じでJS書けます。'hoge';});クリックして遷移は?できます。page.clickです。page.click('.button_element');あるいはelementHandle.clickもありますので、それに倣うならこうやってもいけますね。button_element.click();待つことは?できます。page.waitForNavigationです。https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitfornavigationoptionspage.goto()のデフォルトはloadなので、使う場面としてはclickしてページ遷移した後だと思います。下記はDOMContentLoadedまで、次の処理を行わないというものです。'domcontentloaded'});他にも、特定の要素を待つことなどもできます。waitForSelectorです。https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitforselectorselector-options下記はlazyクラスが付与された要素が出るまで待つ場合。page.waitForSelector('.lazy');ただやろうと思えば、page.waitForでほぼ全てこちらでまとめられそうです。page.waitFor('.lazy');他にもtimeoutなど。下記は5000ms待つ場合です。page.waitFor(5000);DOMレンダーツリーを取得GoogleChromeのDevToolで言うところの「Elements」パネルで表示されるものも、取得できます。先に紹介したpage.evaluateで、JS実行できることがわかっているので、あとはそれを応用してみましょう。下記はloadイベント後のDOMレンダーツリーです。bodyHandle);console.log(html);リダイレクト検知できます。request.redirectChainを使用します。https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#requestredirectchainpage.gotoがResponseクラスというPromiseオブジェクトを返しますので、それを利用します。リダイレクトのあったURL});fileプロトコルも取得できる?できます。fileプロトコルでパスを指定すれば良いだけです。file://path/to/htmlちなみにHTMLのstringだけ渡してもいけます。これはsetContentを使用します。page.setContent(html);おまけasync/await紹介したサンプルコードを見てもわかると思うのですが、async/await(ES2017)がとてもよく出てきます。これは非同期処理のために必要なものです。使い方についてほんとにざっくり説明すると、functionの前にasyncを定義することで非同期関数になりまして、その中で呼び出す別の非同期関数の前にawaitをつければ、その処理が返るまで待ちます。再掲しますが、最初にサンプルとして出したものも、そういった形で作られていることが分かると思います。ここに以下紹介するものを入れるイメージです。ここに以下紹介するものを入れるイメージです。browser.close();})();ただこの辺はJavaScriptのPromise(ES2015)の理解が前提ですので、PuppeteerやNode.js使う際は、ES2015以降の新シンタックスなどは押さえておくとよいと思います。独特に感じるAPIAPIドキュメントを見ていると「page.$()」や「page.$$()」など出てきます。https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference?hl=jaつまりブラウザのコンソールでも使えるんですね。APIとして使えるわけです。Protocolを使えるAPIも用意されています。普段開発でChromeを使用している人にとってもChromeの機能をほぼ不足なく使えそうです。https://chromedevtools.github.io/devtools-protocol/ということで私もまだまだ使い倒したいと思います。@gmoap_engineer本ブログで発信される情報は、各エンジニア個人の見解であり、弊社の公式見解ではありません。本ブログに掲載、引用等をしている商品またはサービス等の名称は、各社の商標または登録商標です。その他の事項について一切責任を負いかねます。発表する情報には注意を払っておりますが、公式発表、見解については、弊社WEBサイトおよびプレスリリースなどをご確認ください。GMOインターネットグループにおけるソーシャルメディア運用ポリシーについては次のページをご確認ください。本ブログに掲載のあるソフトウェアのダウンロードは自己責任で御願い致します。ソフトウェアのダウンロードの結果、ご利用者に何らかの損失・損害が生じたといえども、当社ではその責任を負いかねます。本ブログに掲載のあるソフトウェアを扱う際は、各ソフトウェアの公式リファレンスを参照のもとご使用下さい。ソフトウェアの実行の結果、ご利用者に何らかの損失・損害が生じたといえども、当社ではその責任を負いかねます。