★★★ 上級想定ステップ数: 約5ステップ
S9 遅延ロード一覧
一覧下端へのスクロールを検知して20件ずつ追加読み込みを行い、累計100件まで到達するシナリオです。難しくしているのは無限スクロールという手順であり、状態は必ず data-state / aria-busy で機械可読に表現されます。
このシナリオで試せるブラウザ操作
- 下端接近によるスクロール検知（IntersectionObserver）と追加読み込みの繰り返し
- data-state（loading / ready）と aria-busy による読み込み中判定
- 読み込み済み件数・総件数の確認
- 終端到達後の終了メッセージの確認
お題（Lv1〜Lv3）
Lv1: 一覧をスクロールし、初期20件から40件へ増えたことを報告する
一覧の下端までスクロールし、追加読み込みで件数が増えることを確認します。
AI へ渡す指示文
/demo/feed を開いて、一覧の下端までスクロールし、追加読み込みが完了して読み込み済み件数が40件になったことを確認して報告してください。
合格条件
- 一覧の下端までスクロールして追加読み込みを1回発生させている
- 追加読み込み完了後の読み込み済み件数（40件）を正しく報告している
つまずきやすいポイント
- 一覧最下部の番兵要素（監視対象）まで到達しないと追加読み込みが発火しない
- この難所（無限スクロール）は意図的なもの（`docs/design/automation.md` §f-1 の許可リストに含まれる）であり、サイトの不具合ではない
Lv2: 累計100件（終端）まで読み込み切り、終了メッセージを確認する
スクロールと追加読み込みを繰り返し、在庫データ全件（100件）まで到達します。
AI へ渡す指示文
/demo/feed を開いて、一覧の下端までのスクロールを繰り返し、累計100件（在庫データ全件）まで読み込み切ってください。読み込み完了後に表示される「すべて読み込みました」に相当する終了メッセージを確認し、それ以上スクロールしても件数が増えないことを報告してください。
合格条件
- スクロールと追加読み込みを繰り返し、読み込み済み件数を100件まで到達させている
- 終了メッセージが表示されたことを確認している
- 終端到達後にさらにスクロールしても件数が増えないことを確認している
つまずきやすいポイント
- 追加読み込みには演出待ち時間（`FEED_LOAD_DELAY_MS`）がある。固定秒数だけ待つのではなく、`data-state` が "loading" から "ready" に変わったことで完了を判定する必要がある
- 累計100件に到達すると番兵要素が DOM から取り除かれ、それ以上スクロールしても追加読み込みは発生しない
Lv3: 追加読み込み中の状態を検知しながら、100件到達までの読み込み回数を報告する
読み込み中（`data-state="loading"`）を観測しながらスクロールを繰り返します。
AI へ渡す指示文
/demo/feed を開いて、追加読み込みのたびに結果領域の状態が読み込み中になることを確認しながらスクロールを繰り返し、初期表示（20件）から累計100件に到達するまでに何回の追加読み込みが発生したかを報告してください。
合格条件
- 追加読み込み中は結果領域が読み込み中の状態になることを確認している
- 初期表示から100件到達までの追加読み込み回数（4回）を正しく報告している
- 状態表示（`data-state` / `aria-busy`）で完了判定を行っている
つまずきやすいポイント
- 見た目のスピナーだけでなく、結果領域の `data-state`（`loading` / `ready`）と `aria-busy` を見て状態を判定する必要がある
- この難所（遅延ロード・無限スクロール）は意図的なもの（`docs/design/automation.md` §f-1 の許可リストに含まれる）であり、読み込み順序・件数は乱数・現在時刻に依存しない