puppeteer on DockerでE2Eテストを書いた

Programming

要約

puppeteerでE2Eテストを書いたのでその記録です

動機

ショッピング機能のあるサイトを作成しているのですが、UIのちょっとした変更のたびに手動で購入プロセスを踏んでテストするのがとても面倒で自動化したいなと思ったのがきっかけです

選定

もともとつくりかけのnightwatchを使ったコード片が存在していましたが、seleniumがうまく起動しない問題などが存在していました。 またポータブルな形でやりたいな〜と思っていたので、puppeteerをDocker上で動かすことができるということを聞き、いっちょ使ってみっか〜と始めてみました。

コード

こちら です

コード詳細

Dockerfile

puppeteerのドキュメントにあったDockerfileに、以下の変更を加えました - mocha, chai, dotenvの追加->既存のテストはmocha, chaiを使っているので、同じ操作感でE2Eもテストしたかったため。dotenvはパスワード等の設定のため

テストコード

testディレクトリの中のexample.jsがメインコードです。test/PageObjectsディレクトリ内に各ページ用のクラスを配置しておき、それらを呼び出してテストを行います。このようにしたのは、ページの変更は頻繁に行われるため、ページ実装に対応する層としてページ用のクラスを置き、メインコードではテストシナリオを担当させるためです。

test/example.js

今回のテスト対象のページはベーシック認証がかかっていたため、最初のうちはpage.setExtraHTTPHeadersを使用してAuthorizationヘッダーを付与していました。しかしこれを使うと、puppeteerから送るすべてのHTTPリクエストに対してこのヘッダーを付与してしまうため、対象ドメインを含むURLに対してのリクエスト時にだけAuthorizationヘッダーを送るようにしているのが19〜24行目です。

テスト部分は通常のmochaと同じようにdescribe, itを使って書き、非同期処理になるため中にdoneを入れています。

test/PageObjects/Item.js

こちらでは実際にページを表示し、表示された内容を返したりフォームに書き込みをしたりボタンをクリックしたりさせています。 async, awaitが使えるので楽に書くことができます。