SYM's Tech Knowledge Index & Creation Records

「INPUT:OUTPUT=1:1以上」を掲げ構築する Tech Knowledge Stack and Index. by SYM@設計者足るため孤軍奮闘する IT Engineer.

フロントエンド E2E テスト + MSW (Playwright/Cypress 試行) メモ

FrontEnd

フロントエンド E2E テスト + MSW (Playwright/Cypress 試行) メモ

E2E テストフレームワーク

色々あるが、本記事で触れるのは Playwright と Cypress

以下４つの比較がある。 ref:E2E テストツール Autify を使うまでの話

  • TestCafe
  • WebDriverIO
  • Cypress.io
  • Autify (有料)

以下３つの比較がある。 ref: E2E テストフレームワークはどれを選べばいいんじゃい！

  • Cypress
  • Playwright
  • CodeceptJS

Playwright

導入：

npm i -D @playwright/test msw
npx playwright install

コード自動生成（画面操作によってコードが自動的に作られる）※playwright-cli が統合された

npx playwright codegen https://yahoo.co.jp

参考：

Cypress

テスト時に特定の要素を取得する際は、data-*属性を追加し、アプリ側の変更でテストへ影響が及びにくくする。

ref: Best Practice

e2e テスト時にしか使用しない属性であれば、本番環境で余分になるものを含めないように、e2e テスト時のみ追加するような工夫をするのが良い（はず）。

export const makeAttrForTest = (label: string) => {
  if (process.env.VITE_E2E_MODE) {
    return { "data-test": label };
  }
  return {};
};

※Vite を使用していてコードに import.meta.env.VITE_XXXX での分岐を入れているとうまくいかないので、以下で置き換えを行う必要があった（置換ライブラリはいくつかあるが何が最適化分からないため archive されていなかった以下をひとまず使用）

// vite.config.ts
import env from "vite-plugin-env-compatible";
// ref: https://github.com/IndexXuan/vite-plugin-env-compatible

export default defineConfig({
  plugins: [env({ prefix: "VITE", mountedPath: "process.env" })],
});

その他参考

MSW のレスポンス上書き設定

window オブジェクトに msw を挿入することでテストコードから操作できるようになる

refs:

上記だけではうまくいかなかった。アプリ側での MSW の起動を e2e テスト側で待つ必要がある

ref: Cypress issues when using window.msw

beforeEach(() => {
  cy.visit("/");
  // Wait for MSW server to start
  cy.window().should("have.property", "appReady", true);
});

※ Playwright でも、window オブジェクトに msw を挿入するだけではうまくいかなかった。上記と同じように待ち合わせが必要かもしれない。Playwright の場合は以下も参考になるかも

playwright-msw

mswjs/data

  • 仮想 DB をブラウザ（インメモリ）に展開する、データモデリング・リレーションライブラリ
  • ORM 風な API を提供
  • UI のみをテストしたいのであれば MSW 単体で十分。mswjs/data が活きるのは、画面を横断する E2E テストケース（別画面操作による更新内容/状態を引き継げる）

採用モチベーション：

  • 実際の DB・バックエンドが揃う前に、アプリケーション E2E テスト実施可能
  • 従来のテストインフラ整備と比較し、軽量・手軽に E2E テストが実施可能

ref: mswjs/data で広がるテスト戦略

Github Actions (Cypress)

以下がとても参考になった。

実際にやってみた。

https://github.com/Symthy/react-clone-yumemi-exam

公式ドキュメント:

さいごに

簡単な E2E テスト（MSW を利用した正常系と異常系）を実装してみた

https://github.com/Symthy/react-clone-yumemi-exam

個人的には Playwright の方が開発者体験が良く（テストコードが実際に画面を操作して自動で生成される）、こちらを使用したかったが

MSW の設定上書きがうまくいかず（window オブジェクトに msw の注入がうまくいかず）

MSW の公式ドキュメントに Cypress の例があるため、Cypress なら確実にできるだろうと考え、Cypress を使用して事なきを得た。

今回のように小規模のテストであれば、Cypress でも苦はないが、テストの内容が大きくかつ複雑化してくると、多くのコードを書く必要が出てくるため、やはり苦しくなりそうである。