🎭

E2Eテストフレームワークはどれを選べばいいんじゃい！

2022/08/01に公開

最近、私の勤務先が20年以上運営しているECサイトにE2Eテストを導入しました。利用するテストフレームワークを決めるため、色々調査したのでその内容をZennで共有します。😀

比較早見表

⭕：注意せずに使える機能
🔺：注意して使う必要がある機能
❌：使えない機能

playwright codegen https://~~ が強力
- 自分のブラウザ操作を記録してコードを生成できるのが非常に魅力的
- 生成されたコードは基本的にDOM要素に記述されたテキストからDOM要素を見つけてくれる
WebKitでのテストが可能
- WebKitはSafariの一部でしかないため、Safariと挙動が違う可能性もある
試験的機能としてUIフレームワークのコンポーネントをテストできる
Firefox Nightlyでのテストが可能
- 正式版とNightly版は動作が違う場合があるので注意
公式がVSCodeの拡張機能を出している
Microsoft製でゼロコストでTypeScript対応可能
プラグインなしでVisual Regression Test（以下VRT）が可能
テストが失敗したときにtraceファイルを出力でき、traceファイルには以下のデータが含まている
- 操作ごとのスクリーンショット
- 各操作ごとのタイムライン
- 発生したネットワークリクエスト

iframeを利用してテストが実行される
- 複数タブを用いたテストはできない
メソッドチェーンを利用してコードを書く
取得したDOM要素を変数に入れることができない
- Aliasという独自機能で、変数のように扱うことはできる
UIフレームワークのコンポーネントをテストできる
ネット上の情報が豊富
公式ドキュメントのガイドの質が高い
- テストしたい事象ごとに良い書き方と悪い書き方を紹介していたりする
- 内部実装がどうなっているか詳しく書かれたページも存在する
Cypress Dashboardという公式が提供するSaaSと連携できる
- Flakyなテストを分析する機能などが使えるようになるらしい
Cypress実行環境にインストールされたFirefoxもしくはChromeでテストを実行する

PlaywrightやPuppeteer、ChromiumWebDriverを内部で利用してE2Eテストを実行する
- CodeceptJS自体にはE2Eテストの実行機能が搭載されていない
- そのためPlaywrightを利用すればPlaywrightの機能が使える（ex. WebKitでのテスト）
用意されているメソッドの命名が特殊
- I.click(”クリックしたい要素”);
- I.see(”存在するか確認したいテキスト”);
現状ShadowDOMを特定できるのは、ChromiumWebDriverを用いたテストのみ
内部でAppliumというE2Eテストフレームワークを使うことでモバイル実機テストが可能

私がE2Eテストを導入することになったサービスでは Playwrightを導入することにしました。

そのサービスでは

以上のような状況なので、そもそもE2Eテストを簡潔に書けるほうが好ましく、その点ではユーザーの操作からコードを生成できるPlaywrightが素晴らしく感じました。

また、CIでの実行が失敗した際に原因究明を素早く行うために、traceファイルを出力できる機能も魅力的です。

Microsoft製ということもあり、Visual Studio Codeで標準機能を使ってGUIからテストを実行できるのも良いです。

今回の記事がみなさんのE2Eテスト導入のお役に立てれば嬉しいです。

また、導入する際は自分たちの開発組織が

などがわかっていると、この記事の情報がより扱いやすくなると思います。