本文へスキップ
Clinford Jordano Valencia
すべてのプロジェクト
プラットフォーム

Saga:テスト用の状態注入ツール

サーバー側で状態を注入し、QA や自動テストが長い本人確認フローの任意のステップへ直接移動できるようにしました。回帰テストの準備は最大 20 分から 1 分未満に。

役割
Senior Frontend Engineer
期間
2025–現在
技術スタック
TypeScript · Playwright · BFF · Test database

課題

KYC フローのステップ 5 のバグを確認するには、まず有効な個人情報を入力し、身分証をアップロードし、ステップ 1〜4 のライブネスチェックを通過する必要がありました。毎回、すべての pull request とすべての自動テストのたびにです。

アプローチ

Saga を使うと、テスターやスクリプトは必要な状態のアプリをいきなり開けます。

  1. Playwright のスクリプトや QA エンジニアが、安全なテストトークン付きでページを開きます。例:?state=step_4_ready。
  2. フロントエンドはハイドレーション時にトークンを検出し、ヘッダーで BFF に転送します。
  3. BFF は本番以外の環境であることを厳密に確認したうえで、テスト用データベースにユーザーのセッションを用意します。ステップ 1〜3 は完了、現在のポインターはステップ 4 です。
  4. BFF は本物のセッショントークンを返し、UI はすぐにステップ 4 を表示します。

クライアント側で localStorage をモックするのではなく、サーバー側での注入を選びました。現代のアプリはバックエンドでセッションを検証するため、クライアントだけのモックは現実とずれていき、ここでは通るのに本番で失敗するテストを生みます。

結果

回帰テストの準備は 1 サイクル 10〜20 分から 1 分未満になりました。毎週何十回もの pull request の実行と自動テストを考えると、四半期あたり数百時間のエンジニアリング時間を取り戻せた計算です。