E2Eっぽいけど違う — APIモックとPlaywrightで実現するフロントエンド統合テスト by 笹木 信吾

昨今のWebフロントエンドは非常に高機能化し、一つの画面で多数のリッチな機能が提供されることが多くあります。
各機能が適切に動いているかを担保するため、ついE2Eテストに甘えたくなることもあるでしょう。

しかし、E2EテストはAPIなどの外部システムに依存するため、低速で不安定になりやすいことから、運用は修羅の道です。
一方、単体テストで担保する場合、状態や副作用を多く抱えるモジュールの単体テストのためには複雑なセットアップが必要で、本質的でなく良くわからないテストが増えて惰性で運用しがちです。

そのような課題に対して、APIをモックした状態でPlaywrightを活用する、E2Eテストと単体テストの良いとこ取りを実現した「フロントエンド統合テスト」を導入しました。OpenAPIに基づいて型安全にAPIをモックしたり、AIによって自動生成するといった工夫についても紹介します。