puppeteerとは

プログラムから API で Chromeブラウザを制御できる Node.jsライブラリ。
ブラウザ制御にはコマンドラインAPI といった開発者モードで使用できる API をそのまま使用できる。

事前準備(puppeteerインストール)

※Node.jsはインストール済みとする。

npm init
npm install puppeteer

コード

test.js

puppeteerでGoogle検索を行い、検索結果の1番上のページにアクセスし、スクリーンショットを取得する。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  // Googleページを開く
  await page.goto('https://www.google.com/');
  // 検索boxに`puppeteer`を入力
  await page.type('input[name="q"]', 'puppeteer');
  // 「Enter」ボタン押下
  await page.keyboard.press('Enter');
  // 検索結果要素の表示まで待機
  await page.waitForSelector(".LC20lb", {visible: true});
  // 検索結果のタイトル・リンク一覧取得
  const searchResults = await page.evaluate(() => 
    [...document.querySelectorAll(".LC20lb")].map(e => ({
      title: e.innerText,
      link: e.parentNode.href
    }))
  );
  console.log(searchResults);
  // 検索結果のページ1番目をクリック
  await page.click(".LC20lb");
  // スクリーンショットを取得
  await page.screenshot({ path: 'screenshot.png'});

  await browser.close();

})();

動作確認

node test.js
[
  {
    title: 'puppeteer/puppeteer: Headless Chrome Node.js API - GitHub',
    link: 'https://github.com/puppeteer/puppeteer'
  },
  {
    title: 'puppeteerで始めるブラウザ操作の自動化 - 株式会社クレスコ',
    link: 'https://www.cresco.co.jp/blog/entry/15215/'
  },
  {
    title: 'ヘッドレス Chrome Node API 「Puppeteer」 - Qiita',
    link: 'https://qiita.com/bezeklik/items/c6448d50ff0efb45829e'
  },
  {
    title: 'Node.jsでPuppeteerを使いChromeを実行して画面キャプチャ ...',
    link: 'https://www.4peace.co.jp/tech/456/'
  },
  {
    title: 'Puppeteer | Tools for Web Developers | Google Developers',
    link: 'https://developers.google.com/web/tools/puppeteer'
  },
  {
    title: 'Puppeteer の概要 - Microsoft Edge (Chromium)',
    link: 'https://docs.microsoft.com/ja-jp/microsoft-edge/puppeteer/'
  },
  {
    title: 'Puppeteerでできることまとめ - GMOアドパートナーズ ...',
    link: 'https://techblog.gmo-ap.jp/2018/12/28/puppeteer%E3%81%A7%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%93%E3%81%A8%E3%81%BE%E3%81%A8%E3%82%81/'
  },
  {
    title: 'Puppeteerを使用したHeadless Chromeの操作 - ZOZO TECH ...',
    link: 'https://techblog.zozo.com/entry/puppeteer'
  },
  {
    title: 'puppeteer を使用する - Jest',
    link: 'https://jestjs.io/ja/docs/puppeteer'
  },
  {
    title: '「Puppeteer」とは？ マウスやキーボードなしでブラウザ操作 ...',
    link: 'https://www.sbbit.jp/article/cont1/34562'
  }
]

※ブラウザ操作が行われ、screenshot.pngがテストコードと同一フォルダに保存される。

※ヘッドレスモードで実行したい場合、以下のように変更する。

const browser = await puppeteer.launch({ headless: true });

参考情報