初めてのE2E

E2Eテストとは

End to Endのテストの略で、システム全体を通したテストを行うこと。
Webサービスで言うと、ブラウザ上からテストを行うこととなる。

メリット

ブラウザ上から実行するということで、よりユーザに近い環境でテストを行い、品質を担保することができる。
その結果として、ユーザに影響が出ていないことを担保できる。

難しい点

ブラウザ上から実行するためには、事前の準備が必要となる。
単体テストであればモックを使うことができるか、E2Eはそうはいかないので、DB等一通りのミドルウェアの準備は必要。

またHTMLの構造が変わりやすい場合、E2Eテストが動かなくなる恐れがある。
構造の変化に追従するコストも払う必要がある。

ブラウザ上から実行するということで、よりユーザに近い環境でテストを行い、品質を担保することができる。 その結果として、ユーザに影響が出ていないことを担保できる。

実行

Puppeteerとは

Chrome / Chromium を動かす Node のフレームワーク。 デフォルトは Headless(GUI を持たず、コマンドで操作できる)で、ブラウザを出しての操作も可能。

Seleniumとの比較

過去によく使われていたツールとしてSeleniumがある。 Seleniumと比べると、下記の強みがある

Webページのステータスコードを判定できる
Chromeに特化した機能もテストできる
出典 : https://qiita.com/okitan/items/a625d68496fc1a11dcd9

一方で下記のデメリットがある

出典 : https://www.cresco.co.jp/blog/entry/15215/

今回はステータスコードも確認できるPuppeteerを使おうと思います。

導入

PHPでPuppeteerを使えるpuphpeteerを利用して、テストを動かしてみた。 https://git.dmm.com/kimura-tsuyoshi/TIL/tree/master/PHP/E2E

コードを動かすとLCのTOPページのスクショを撮る。

躓いた点

Docker上でブラウザを動かすために、インストールするモジュールが多かった

https://github.com/juve534/TIL/blob/c5a61d7d6a1596b17a919036ce147ac782f01ba7/PHP/E2E/Dockerfile#L10