Puppeteer っての触ってる

Puppeteer

https://github.com/GoogleChrome/puppeteer

• Google の Chrome DevTools Teams が開発しているブラウザの自動化ライブラリ。
• パペティアって読むっぽい。日本語では「人形遣い」という意味。
• Node.js で動く。
• ブラウザの操作の自動化、画面操作やテスト、スクレイピングがはかどる。
• Selenuum（セレニウム）はもうアレらしい。
• FireFox 版もでたっぽい。 : https://github.com/GoogleChrome/puppeteer/tree/master/experimental/puppeteer-firefox

たとえば

SPA でクリックや、無限スクロールしないとコンテンツがでてこないページのものでもスクレイピングできちゃう。もっというと、Web 操作でできるものはすべて自動化できちゃう。 (E2Eテストとかも向いてる)

これよんでる　

https://www.amazon.co.jp/gp/product/4798055204/ref=oh_aui_detailpage_o05_s00?ie=UTF8&psc=1

非同期の扱いも解説されていて、これが個人的にイチバンよかった (Promise, async await) :smile:

カバーイラストは、熱狂的なファンが多い漫画家・鶴田謙二氏!

どこで動かす

• Node.js 動かせる環境ならどこでも大丈夫だけど、用途も限られているのでサーバーレスとかでやりたい
• lambda とは、相性ちょっと悪いけど、ゴニョゴニョすればうごくっぽい
• cloud function は Google製 だけあって、対応されている :+1:
  • https://cloud.google.com/blog/products/gcp/introducing-headless-chrome-support-in-cloud-functions-and-app-engine
• express と混ぜて、Heroku にデプロイすれば、すぐAPI的にも使えた :tada:

ちな

Cacooでも、本番導入？されてるっぽい　 https://nulab-inc.com/ja/blog/cacoo/headless-chrome-cacoo-auto-saving/

Chrome DevTools 豆

puppetter の記事とかを見ると、要素を取得するときに $ とか $$ っていう記述を使ってあるのが多いんだけれども、調べてみるとこれは、Chrome DevTools のコマンドラインAPI ぽい。

• $ は document.querySelector 相当
• $$は document.querySelectorAll 相当
• で、どちらも返り値は配列 (Array) なので、 map とか使ってゴニョゴニョできる

REF

developers.google.com