ブラウザ利用検証デモサイト
★★☆ 中級想定ステップ数: 約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種のカテゴリから個別に選ぶ必要がある