🎭

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

2022/08/01に公開

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

比較早見表

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

Cypress Playwright CodeceptJS
コード生成
WebKitでのテスト 🔺 🔺
Firefoxでのテスト 🔺 🔺
GUIテストランナー
コンポーネント単体のテスト 🔺
Visual Regression Test 🔺 🔺
モバイルサイズのViewportでテスト
TypeScriptサポート
リトライ時録画
テキストからDOM要素を取得
開発元 Cypress社 Microsoft 個人
ライセンス MIT Apache 2.0 MIT
Github Star 39.5k 40.1k 3.7k

各E2Eテストフレームワークの特徴

Playwright

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

Cypress

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

CodeceptJS

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

人気度の比較

機能的にはPlaywrightが優れているように見えますが、Google TrendsやStackoverflowの質問数を比較した結果、三製品の中では Cypressが一番ユーザー多い と推定できます。

Stackoverflowの質問数

Stackoverflowのタグ検索([製品名])で製品に紐づく質問を集計してみると、以下のようになりました。

製品名 Stackoverflowの質問数
Cypress 7577
Playwright 1096
CodeceptJS 242

それぞれのリリース日

バージョン1.0.0がリリースされた順に並べてみると、CodeceptJSとCypressがリリースから一番時間が経っているようです。

製品名 1.0.0のリリース日
CodeceptJS 2017/06/24
Cypress 2017/10/09
Playwright 2020/05/06

で、あなたはどれを選んだの?

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

そのサービスでは

  • 別タブの値を使用した機能が存在する
  • 一部SPAが使われている
  • エンジニア以外もHTMLテンプレートや、Vueコンポーネントを実装する
  • デザイナーも手動テストを書いている
  • QAエンジニアは居ない

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

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

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

おわりに

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

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

  • E2Eテストにどの程度知識を持っているか
  • E2Eテストにどの程度リソースを割けるか
  • E2Eテストに何を求めるか

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

Discussion