16Puppeteerで自動ブラウザ操作するときによく使う操作一覧JavaScriptNode.jsスクレイピングpuppeteerテックタッチアドベントカレンダー16日目を担当する@kosyです。canvas、PWAの知識が深まる素晴らしい内容です。画像をリサイズしたいときに活用させていただきますね。はじめに簡単にブラウザ操作を自動化できるPuppeteerについて、自身の備忘録も兼ねてよく使う操作を紹介します。環境構築については以下の記事に分かりやすい説明が載っているため、本記事では省きます。'domcontentloaded'});page.goto()でページ移動できます。}では、読み込み完了のタイミングを指定することができます。domcontentloadedを指定すると、DOMContentLoaded発火後に次の操作を実行させることできます。ページ遷移後すぐにCSSセレクタを探しに行くと、CSSがまだ読み込まれておらず操作エラーになることがあるため、指定しておくと快適です。他にもnetworkidleというものがあります。これはネットワーク接続があるかどうかを確認するもので、以下の2種類あります。500ms以内のネットワーク接続が2つ以下になった場合クリックするpage.click('CSSセレクタ');指定したセレクタをクリックします。"domcontentloaded(もしくはnetworkidle)"});をセットで書いておきます。すれば遷移先のページをちゃんと読み込み完了後に、その後の処理を実行してくれます。'hoge');指定したセレクタに'hoge'と入力します。class="hoge">text</div>のようにタグで囲まれたテキストを取得できます。'page.pdf'});pathには保存場所や保存時のファイル名を指定できます。要素がない場合の処理}要素の有無で処理を分けたい場合などに使えますね。require('fs');を定義しましょう。サンプルじゃらんの札幌市中央区の観光スポット人気No.1の場所名・詳細リンク・画像URLを取得し、JSONファイルに出力します。browser.close();})();出力結果["札幌ステラプレイス","https://www.jalan.net/kankou/spt_guide000000176252/","https://cdn.jalan.jp/jalan/img/9/kuchikomi/1879/KL/8e82b_0001879684_2.jpg","センターとイーストの2つのゾーンに分かれ、レストランなど160店舗を超える日本最大級の巨大ショッピングモール。開放的な館内にはアーティストのオブジェや作品が配され、空間全体が楽しめるようにデザインされている。買う・食べる・観る・遊ぶ・感じるなど、新しいライフスタイルに出会えるスポット。"]おわりにpuppeteerでよく使う操作紹介でした。知りたくなった方は公式ドキュメントをぜひご覧ください。API最後のサンプルがなぜじゃらんなのか。観光地を取得しているのか。それは12月19日に投稿予定の記事で明らかになります。「テックの力を最大化する」をミッションに掲げ、ヒトとテクノロジーの架け橋となるサービスを提供します。upLoginユーザーは見つかりませんでした。