【Gauge + Playwright】APIをモックしてエラー時のフロントのインテグレーションテストを容易に行う

こちらの記事はコドモン Advent Calendar 2022の23日目の記事です。

はじめに

こんにちは！プロダクト開発部の岡村です🎅

コドモン開発チームではGauge と Playwrightを使ってE2Eテストと、フロント・APIのインテグレーションテストを作成しています。

今回は、GaugeとPlaywrightを利用してフロントのインテグレーションテスト時にAPIをモックし、APIエラー時の自動テストを容易に実装することができたのでご紹介しようと思います。

playwright.dev

実装例

APIエンドポイント/api/v1/hogeに対してリクエストを送ったときに、ステータスコード500が返ってきたときのフロントの挙動をテストしてみます。

以下、サンプルコードです。

sample.spec

## APIで500エラーが発生した場合は500エラーページが表示される
* APIエンドポイント"**/api/v1/hoge/*"にリクエストするとステータスコード"500"を返すようにモックする
* ホームアイコンを押下する
* 500エラー画面が表示されること
* APIエンドポイント"**/api/v1/hoge/*"のモックを取り消す

mock.ts

  @Step('APIエンドポイント<path>にリクエストするとステータスコード<statusCode>を返すようにモックする')
  public async setupMock(path: string, statusCode: string) {
    await page.route(path, route => route.fulfill({
      status: parseInt(statusCode)
    }));
  }

  @Step('ルート<path>のモックを取り消す')
  public async undoSetupMock(path: string) {
    await page.unroute(path)
  }

次に、APIエンドポイント/api/v1/fugaに対してリクエストを送ったときに、ステータスコード503が返ってきたときのテストを実装してみます。

mock.ts

## APIで503エラーが発生した場合は503エラーページが表示される
* APIエンドポイント"**/api/v1/fuga/*"にリクエストするとステータスコード"503"を返すようにモックする
* ホームアイコンを押下する
* 503エラー画面が表示されること
* APIエンドポイント"**/api/v1/fuga/*"のモックを取り消す

Gaugeを使うとStepに記載したテスト仕様と、実装をアノテーションを利用して紐づけることができます。またパラメータを渡すこともできるため、1つのStep実装で複数のテストを記述することが可能になります。¹

今回の例では、Stepの'APIに<path>でリクエストするとステータスコード<statusCode>を返すようにモックする'のParamater部分を書き換えるだけで2種類のAPIリクエストに対するレスポンスのステータスコードをモック、テストすることができました。

GaugeとPlaywrightを組み合わせることで、テストの仕様と実装を明確に分離した上で、容易にAPIをモックしてサーバーエラー時のフロントのインテグレーションテストを実装することができたかなと思います。