【Node.js】Puppeteerの仕様がまた変更になりました

sell ストアカスタマイズ
history2023/06/12

この記事を書いた人 石田正泰

中学生の時に趣味でZ80マシン語やFortran等を始めてから、現在まで数多くのプログラミング言語を経験。ShopifyによるECサイト構築では主にカスタマイズを担当。

はじめに

私事で恐縮ですが、ここのところ開発環境をWindowsからWindows+WSL(Ubuntu)+Dockerに移しつつあります。昔のオンプレミスのサーバーのインフラ構築は大変な作業なわけですが、今度はDocker環境になりインフラ構築が格段に楽になりました。AWSのApp RunnerやGCPのCloud Run等、様々なコンテナ実行環境とかでも活躍しそうです。Dockerって素晴らしいですね。

さて、先日の記事で触れたPuppeteerを久々にそのWSLでテスト的に動かしてみたところ、大きな仕様変更がまた有ったことに気が付いたので取り急ぎここに載せることにしました。今回試したバージョンはPuppeteer20.5.0です。

「page.waitForTimeout」の廃止

PuppeteerAPIには指定したミリ秒だけ処理を待機するpage.waitForTimeout(ミリ秒)というメソッドがあります。以前、page.waitFor()というメソッドがあったのですが、非推奨になったのでその代わりにpage.waitForTimeout()を使用していたのですが・・・なんと今度はこれが突然廃止になりました。
実はこれに気が付かずChromiumが突然落ちたのでPuppeteer APIのドキュメントを確認したところ、そこで初めて廃止を知りました。

代わりのメソッドは用意されていないようなので、以下の様に対応するしかなさそうです。

const sleep = milliseconds =>
  new Promise(resolve =>
    setTimeout(resolve, milliseconds)
  );

上のようにsetTimeout後にPromiseオブジェクトを返す関数を定義しておきます。
※ちなみにアロー関数の場合は、1命令で返却する場合は中括弧{}とreturnを省略できます。

そして待機したいところで以下の様に記述します。

//5秒待機する
await sleep(5000);

これで上の例では5,000ミリ秒(5秒)の間、処理を待機します。

Chromeのヘッドレスモードが変わったため「headless: true」が非推奨に

ヘッドレスモードとはUIを表示せずにChromium/Chromeを実行するモードです。Chrome Developersの記事によると、従来は通常のヘッドフルモードとヘッドレスモードとは実装が別だったらしいのですが、エンジニアの実装と保守の負担が大きい上に、ヘッドレスモードでしか存在しないバグが発生したりと言った問題が発生していたようです。
そのような理由から、ヘッドフルモードとヘッドレスモードとを完全統合化したそうです。新しいヘッドレスモードを使用するには以下のように変更する必要があります。

「headless: true」　→　「headless: ‘new’」

先日の記事の例で言えば、以下のように変更する必要があります。

const isDebug = process.env.NODE_ENV !== "production";
functions.logger.info("NODE_ENV: ", process.env.NODE_ENV);
const browser = await puppeteer.launch({
    headless: isDebug ? false : 'new',  // <--ここを変更
    defaultViewport: null,
    args: [
      "--disable-gpu",
      "--disable-dev-shm-usage",
      "--disable-setuid-sandbox",
      "--no-first-run",
      "--no-sandbox",
      "--no-zygote",
      "--single-process"
    ]
});
const page = (await browser.pages())[0];

従来の「headless: true」はそのうち廃止になると思います。