Puppeteerでスクレイピングする

目的

Cloud Functions with Puppeteer+GAS(clasp)でお手軽スクレイピングサーバーが作りたくなった
https://github.com/puppeteer/puppeteer

※clasp
Google製のCLIツール

環境

node v14.17.6
clasp v2.4.1
wsl(Windows10/Ubuntu20.04LTS)

下準備

puppeteer-coreをインストールする

補足

Puppeteerとは、ChromeブラウザやChromiumを制御しWebスクレイピングなどを行うNodeライブラリです。
Chromiumブラウザを新規にダウンロードせず、既存のChromeブラウザでPuppeteerを動かす際にはpuppeteer-coreをインストールします（version 1.7.0以降）

$ npm i puppeteer-core
# or "yarn add puppeteer-core"

https://github.com/puppeteer/puppeteer

Windowsのchrome.exeを実行時に呼び出すには、後述するexecutablePathに'/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe'を指定すればいい、と思いきや、うまくいかず。
ここではWSL2のUbuntu環境内にChromeをインストールします。

(事前準備)WSL上でGUIを動かすため、Xサーバーをインストール

https://sourceforge.net/projects/vcxsrv/

WSL2にchromeをインスールする

$ sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'

$ sudo wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -

$ sudo apt update
$ sudo apt install google-chrome-stable

起動確認

$ google-chrome-stable --version
$ google-chrome

Puppeteerを動かす

既存のChromeでPuppeteerを利用したいときは、ブラウザのインスタンス作成時、下記のように実行ファイルのパスを指定します。

const browser = await puppeteer.launch({ executablePath: '/path/to/Chrome' });

サンプルコード

src/hn.ts

const puppeteer = require("puppeteer-core"); // puppeteer-coreを指定する

(async () => {
  const browser = await puppeteer.launch({
    executablePath: "google-chrome-stable", // executablePathの指定が必須
    headless: false,
    slowMo: 250,
    defaultViewport: null,
  });
  const page = await browser.newPage();
  await page.goto("https://news.ycombinator.com", {
    waitUntil: "networkidle2",
  });
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio,
    };
  });

  console.log("Dimensions:", dimensions);

  await browser.close();
})();

$ node src/hn.ts

Chromeブラウザが立ち上がり、下記のようなログが出力されていれば成功です。

$ node src/hn.ts
Dimensions: { width: 1035, height: 1246, deviceScaleFactor: 1 }