★★☆ 中級想定ステップ数: 約6ステップ
S6 非同期レポート生成
カテゴリ・対象年月を選んでレポートを生成し、約3秒・進捗3段階(1/3→2/3→3/3)の非同期処理を正しく待ってから結果を確認するシナリオです。固定秒数の待機ではなく、状態表示(data-state / aria-busy)を用いた完了判定の検証に向いています。
このシナリオで試せるブラウザ操作
- ネイティブ <select> によるカテゴリ・対象年月の選択
- ボタン押下による非同期処理(レポート生成)の実行
- 進捗表示・data-state による処理完了の判定
- disabled 状態が解除されるのを待ってからのボタン操作
- ファイルダウンロード(CSV)の実行と内容の検証
お題(Lv1〜Lv3)
Lv1: レポートを生成し、完了後に表示された合計値を報告する
条件を選んでレポートを生成し、生成完了を待って合計値を確認します。
AI へ渡す指示文
/demo/report を開いて、カテゴリを「飲料」、対象年月を「2026年3月」に設定してレポートを生成し、生成が完了してから表示される合計値を報告してください。
合格条件
- カテゴリに「飲料」、年月に「2026-03」を選択してレポート生成を実行している
- 生成完了(進捗が3/3になり結果が表示される状態)を待ってから合計値を読み取っている
- 合計値を正しく報告している
つまずきやすいポイント
- 生成には約3秒かかり、進捗が1/3→2/3→3/3と段階的に進む。固定秒数だけ待つのではなく、結果の状態表示で完了を判定する必要がある
- 生成完了前に結果領域を読もうとすると、合計値がまだ表示されていない
Lv2: 生成完了を待ってからCSVをダウンロードし、ファイル名を報告する
レポート生成完了後にCSVをダウンロードし、ファイル名を確認します。
AI へ渡す指示文
/demo/report を開いて、カテゴリを「菓子」、対象年月を「2026年2月」に設定してレポートを生成し、生成が完了してからCSVをダウンロードして、ダウンロードされたファイルのファイル名を報告してください。
合格条件
- カテゴリ「菓子」・年月「2026-02」でレポート生成を実行している
- 生成完了後にCSVダウンロードボタンを押している
- ダウンロードされたファイル名が report_snack_202602.csv 形式になっている
つまずきやすいポイント
- CSVダウンロードボタンは生成完了までは押せない状態(disabled)になっており、完了前に押そうとしても操作できない
- 生成中に条件を変更すると、直前の生成結果が無効になる場合がある
Lv3: カテゴリを変えて3回レポートを生成し、最も合計が大きいカテゴリを報告する
カテゴリを変えながら生成を3回行い、合計値を比較します。
AI へ渡す指示文
/demo/report を開いて、対象年月を「2026年1月」に固定したまま、カテゴリを「飲料」「日用品」「文具」の順に変えてそれぞれレポートを生成し、生成完了を待って各回の合計値を確認したうえで、最も合計値が大きいカテゴリを報告してください。
合格条件
- 3つのカテゴリそれぞれについて、生成完了を待ってから合計値を記録している
- 3回分の合計値を正しく比較している
- 最終的に合計値が最大のカテゴリを正しく特定している
つまずきやすいポイント
- 毎回の生成完了を待たずに次のカテゴリへ切り替えると、古い合計値を記録してしまう
- カテゴリは「すべて」を選べないため、4種のカテゴリから個別に選ぶ必要がある