puppeteer チートシート

はじめに

スクレイピングをする際に、puppeteerを使ってみたら
という声をいただいたので、メモをしながら触ってみたいと思います。

Puppeteerとは

NodeでヘッドレスChromeを操作できるパッケージ
→　動的ページのスクレイピングなどにとても便利

環境とインストール

❯ node -v
v12.6.0

❯ yarn -v
1.17.3

❯ yarn add puppeteer
yarn add v1.17.3

hello world

test.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
  console.log("スクリーンショットを保存しました");
})();

よく使う(今回使った)method

APIドキュメント

Puppeteer

name	meaning
launch()	ブラウザの起動

Browser

name	meaning
newPage()	新規ページ生成

Page

name	meaning
goto('URL')	URLにアクセス
$(selector)	tagやcssセレクタでの絞り込み
focus(selector)	tagやcssセレクタでの絞り込み(一つ目のエレメントを取得)
type(selector, value)	セレクターに入力
click(selector)	セレクターをクリック
waitForNavigation(waitOptions)	オプションのタイミングまで待つ
screenshot({path: 'path.png'})	path名でスクリーンショットを保存

サンプル

アマゾンで商品を検索してみる

test.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.amazon.co.jp/');
  await page.type('#twotabsearchtextbox', 'Nature Remo mini');
  await page.click('input[type="submit"][value="検索"]');
  await page.waitForNavigation({waitUntil:"networkidle0"});

  await page.screenshot({path: 'example.png'});
  await browser.close();
})();