検索画面用のテスト仕様書の サンプル構成 を作ります。
ここでは ヘッダー検索窓＋検索結果表示＋ページ遷移・ソート・エラーハンドリング を想定しています。
検索画面テスト仕様書（サンプル）
1. 基本情報
| 項目 | 内容 |
|---|---|
| 画面名 | ヘッダー検索画面 |
| URL | /search |
| 対象機能 | 検索窓によるデータ検索、結果表示、並び替え |
| 前提条件 | ユーザーがログイン済みであること（必要なら） |
2. 検索機能テスト
| No | テスト項目 | 入力値 | 期待結果 | 備考 |
|---|---|---|---|---|
| 1 | 空検索 | 空文字 | モーダルで「検索語を入力してください」を表示 | モーダルの閉じるボタンで閉じられること |
| 2 | 単語検索 | “apple” | 検索結果が表示される | 新着順でソートされること |
| 3 | 複数単語検索 | “apple banana” | 検索結果が表示される | OR検索やAND検索の仕様に応じる |
| 4 | 存在しない単語 | “xxxx” | 「該当なし」または空表示 | エラーメッセージが正しく表示される |
| 5 | URLパラメータ反映 | 検索語 “apple” | /search?query=apple に変わる | 画面リロード後も検索語が保持される |
3. ソート／並び替えテスト
| No | テスト項目 | 操作 | 期待結果 | 備考 |
|---|---|---|---|---|
| 6 | 初期表示順 | 検索結果表示 | 新着順で表示 | IDや日付で降順 |
| 7 | ヘッダクリック | 1列目クリック | 昇順／降順が切り替わる | 並び替え矢印が更新される |
| 8 | ソート無効列 | 特定列クリック | 並び替えできない | orderable: false の列 |
4. ページングテスト
| No | テスト項目 | 操作 | 期待結果 | 備考 |
|---|---|---|---|---|
| 9 | 1ページ目表示 | 検索実行 | 最大表示件数分表示 | DataTables デフォルト件数 |
| 10 | 次ページクリック | ページ送り操作 | 2ページ目の結果表示 | ページ番号表示が正しい |
5. エラーハンドリング
| No | テスト項目 | 条件 | 期待結果 | 備考 |
|---|---|---|---|---|
| 11 | ネットワークエラー | fetch 失敗 | 「検索エラーが発生しました(ネットワークエラー)」を表示 | results div 内 |
| 12 | サーバー500 | API 500 | エラーメッセージ表示（サバーエラー） | alert またはモーダルでも可 |
fetch失敗（ネットワークエラーなど）
- 通信自体ができない場合
- 自動的に
.catch()に入る（try/catch なら catch ブロック）
サーバーエラー（500など）
- fetch自体は成功として扱われる
response.okがfalseになる
6. その他
| No | テスト項目 | 操作 | 期待結果 | 備考 |
|---|---|---|---|---|
| 13 | 複数回検索 | 連続で異なる語を検索 | 検索結果が更新される | URL も更新される |
| 14 | 入力補完 | 文字入力中 | サジェスト表示（あれば） | 遅延処理あり |
| 15 | モバイル表示 | スマホサイズ | レイアウト崩れなし | トーストやモーダルも確認 |
💡 ポイント
- 検索語の有無、存在／未存在データ、URL パラメータ、ページング、ソート、エラー処理、モーダル表示などを漏れなくチェック
- 必要に応じて キーボード操作（Enter）での検索 や 連打テスト も追加