はじめに
昔から 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 cinpm 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
コメント