control-ui-e2e

Control UI E2E

ワークフロー

1. 証明方法を選択します。 ルーティング、起動、Gateway ハンドシェイク、ユーザーフロー全体には既存のブラウザー E2E レーンを使用し、単独の描画ロジックにはブラウザー／ユニットテストを使用します。要求された結果に該当する以下の各分岐を確認します。 完了条件： 変更したすべての動作に、名前付きのシナリオと証明範囲が設定されています。
2. フィクスチャを準備します。 合成 Gateway データを使って、既存の ui/src/test-helpers/control-ui-e2e.ts を再利用します。応答がない場合に備えて、型付きシナリオオプションを拡張します。既存の依存関係インストールを使用し、ほかのジョブで使われているインストールを維持します。実際の Gateway／プロバイダーの認証情報を使うには、ライブ証明の明示的な許可が必要です。実行場所については、テストポリシーに従います。 完了条件： 対象のフローが意図したソースまたは本番ビルドに対して実行され、必要な各フィクスチャ応答が定義されています。
3. 動作を検証します。 遷移前にモックをインストールします。表示されているコントロールを操作し、描画結果と関連する Gateway リクエストの両方をアサートします。予期しない動作が発生した場合は、再実行する前に製品またはフィクスチャの担当者と解決します。 完了条件： 各シナリオがアサートされた結果に到達するか、満たされなかったアサーションを特定する失敗記録が保持されています。
4. 証拠を提出します。 以下の成果物ルールと、選択した分岐のチェックを適用します。検証済みの結果、失敗、未テストの状態を分けて報告します。 完了条件： 主張するすべての結果に確認可能な証拠があり、残っている不足点が明示されています。

UI ストレステスト

大規模なレイアウト／コンポーネントの変更や、複数状態にわたるデザインのフィードバックでは、ストレステスト用ギャラリーを作成する前に ビジュアル証明を確認します。小規模なコピー／アイコンの変更では、対象を絞った証明を使用できます。

ビジュアル証明の既定

見た目の変更、スクリーンショット、一時状態のキャプチャ、または動画については、ビジュアル証明を確認します。見た目の変更では、確認済みの変更前／変更後の証拠が必要です。視覚的でない修正では、動作のアサーションだけで十分な場合があります。

インタラクション性能監査

UI の遅さ、応答性の監査、または Chrome トレースの自動収集については、ビルド、フィクスチャ、測定範囲を選択する前にインタラクションのプロファイリングを確認します。

Run Inspector の証拠

実行／処理／判断の証拠については、レシートを選択する前に Run Inspector のキャプチャを確認します。

成果物

• 試行ごと、または単独の呼び出しごとに一度、createControlUiE2eArtifactDir(scope, parentDir?) で割り当てます。キャプチャ用ヘルパーにディレクトリを渡し、ステージごとに異なるファイル名を付け、レポート、スクリーンショット、トレース、動画を同じ場所にまとめます。
• 親ディレクトリの選択はヘルパーが行います。既存の出力設定、ゲート、ビューポート、録画オプションを維持し、返されたパスを最終レポートで使用します。
• 失敗した試行と成功した試行の両方を保持します。レビュー後、所有するディレクトリだけを正確に指定して削除してください。共有の成果物用親ディレクトリを消去したり、以前の証明を上書きしたりしないでください。
• タイムアウトの診断には、既存の診断用親ディレクトリの新しい子ディレクトリを使用します。Mantis はすべての試行を保持します。Real-Gateway、chat-outbox-*、chat-attachment-read-lifecycle の各スイートには個別の所有者がいます。リプレイ安全なキャプチャを主張する前に、それぞれの保持動作を確認してください。

対象を絞ったテストの実行

現在の package.json のスクリプトと テストポリシーを使用します。ワークツリーの対象を絞ったブラウザーテストを実行するには：

node scripts/run-vitest.mjs run --config test/vitest/vitest.ui-e2e.config.ts --configLoader runner ui/src/e2e/chat-flow.messaging.e2e.test.ts