[Node] puppeteer で画面操作とスクリーンショット

はじめに
puppeteer
1. puppeteer とは
2. puppeteer のデメリット
  1. Chromium とライブラリのバージョンに依存がある
  2. Safari や Edge は使えない
画面操作とスクリーンショット
1. サンプルコードのポイント
  1. ライブラリはクリーンインストール& package-lock.json に従って依存関係は解消しない
  2. timeout を時間を調整
おわりに
参考
1. 関連

はじめに

昔から Web アプリケーションの試験の自動化が行われてきていましたが、最近めっきり触れなくなったので改めて触れてみました。
ついでに未体験の Node.js 系の puppeteer[1] を使ってみます。

puppeteer

puppeteer とは

Chrome や Chromium を制御する Node ライブラリです。スナップショット、ページの PDF 化、SPA ページでスクロールし、コンテンツを読み込ませる、ボタン操作、キーボード操作等大体のブラウザ操作が可能です。

デフォルトは headless（実際にブラウザを立ち上げない）で動作します。

puppeteer のデメリット

Chromium とライブラリのバージョンに依存がある

公式ドキュメント[2]に Chromium とライブラリの依存関係が記述されています。Chromium をバージョンアップすると動かなくなる可能性があります。

Safari や Edge は使えない

多くの Web アプリケーションは Chrome なんであんまり影響ないです。

画面操作とスクリーンショット

本ブログのトップページを表示＆スクリーンショットすることを目的とします。コードは GitHub で公開しています。

サンプルコードのポイント

ライブラリはクリーンインストール& package-lock.json に従って依存関係は解消しない

# Dockerfile
RUN npm ci

npm 5.7[3]で追加されたコマンドで、 package-lock.json の内容でライブラリをインストールするコマンドです。通常の install を行うと以上関係を修正して、タイミングによって環境の差異が出る可能性があります。

timeout を時間を調整

"scripts": {
    "test": "mocha ./**.js --timeout 100000"
  },

外部の URL を扱う場合、デフォルトの時間だと Timeout が発生する場合があります。10秒ほどにしています。

試験コードを動かすと、スナップショットが取得できました。取得したスナップショットを図1に示します。

おわりに

公式サイトを見ながら行うと意外とすんなりいきました。
最新の node に入れようとすると Chrome のバージョンが合わないとかいろいろ面倒でした。

参考

[1] puppeteer, https://github.com/puppeteer/puppeteer
[2] Puppeteer API Tip-Of-Tree, https://github.com/puppeteer/puppeteer/blob/main/docs/api.md
[3] v5.7.0, https://github.com/npm/npm/releases/tag/v5.7.0