動画トリミング機能の要件定義をUIテストへ落とす

本稿は公開ページに見える操作から作る要件・テスト例です。内部コード、変換方式、性能値は扱いません。

動画トリミングでは「再生できる」だけでは不十分です。利用者が残す範囲を理解し、やり直しでき、書き出し前に確認できることを要件として分解します。

対象状態

公開 Video Trimmer は、ファイルを選び、範囲のハンドルを調整し、ブラウザで書き出す流れを説明しています。設計時は、選択済みファイル、開始点、終了点、書き出し状態を別々に扱います。

受け入れ条件

観点	条件	確認方法
境界	開始点は0、終了点は尺の末尾を許容	最小・最大値を操作
整合性	開始点が終了点を超えない	両ハンドルを近づける
可逆性	誤操作後に範囲を戻せる	値を変更して再確認
通知	書き出し中と失敗時が区別できる	状態表示を確認
アクセシビリティ	キーボードで範囲を把握できる	フォーカスと値を確認

Playwrightの擬似例

// セレクタは実ページで未検証の例
test('range remains ordered', async ({ page }) => {
  await page.goto('/trim');
  await page.getByLabel('Start time').fill('2000');
  await page.getByLabel('End time').fill('1000');
  await expect(page.getByText('Start must precede end')).toBeVisible();
});

手動試験を残す理由

ローカル処理や非アップロードという説明は、UIだけでは立証できません。実際のネットワーク、対象ブラウザ、入力形式、長尺ファイルで確認します。字幕、音声、著作権、公開先の要件も別のレビュー項目です。

まとめ

トリミングの品質は、短い出力ではなく、範囲選択の意味が失われないことにあります。

Tags: 要件定義, テスト, フロントエンド, QA, UI