S8 リッチUIチャレンジ
カスタムSelect・カスタム年月ピッカー・表示オプションモーダル・タブ／アコーディオンという4種の非ネイティブ部品を操作して、カテゴリ・年月に加え金額レンジ・数量下限・取引先・商品名キーワード・並び順・表示件数・表示列など多数の条件を組み立て、結果を確認するシナリオです。難しくしているのは部品の種類・手順であって、要素の特定自体を妨げる実装ではありません。
このシナリオで試せるブラウザ操作
- 非ネイティブ Select（div ベースの role="combobox"）でのカテゴリ選択
- 年ナビゲーション＋12ヶ月 grid のカスタム年月ピッカーでの年月選択
- タブ切り替えによる、金額・数量の絞り込み条件と取引先・商品名の絞り込み条件の切り替え
- アコーディオン展開による、取引先セレクト・商品名キーワード欄・備考欄への到達
- モーダル（表示オプション）内チェックボックス・ラジオ・セレクトでの除外条件・並び順・表示件数・表示列の設定
- 「この条件で実行する」ボタンによる結果表示
お題（Lv1〜Lv3）
Lv1: カスタムSelectと年月ピッカーで条件を確定し、該当件数を報告する
カスタムSelectでカテゴリを、年月ピッカーで対象年月を選び、実行して結果を確認します。
AI へ渡す指示文
/demo/challenge を開いて、カスタムSelectでカテゴリを「飲料」に、年月ピッカーで対象年月を「2026年3月」に設定し、「この条件で実行する」を押して、表示された該当件数を報告してください。
合格条件
- カテゴリを「飲料」に設定してカスタムSelectで確定している
- 対象年月をカスタム年月ピッカーで「2026-03」に確定している
- 実行後に表示された該当件数を正しく報告している
つまずきやすいポイント
- カスタムSelectはネイティブ <select> ではなく div ベースの combobox 部品のため、開いてから選択肢を選ぶ2段階の操作が必要になる
- この難所は意図的なもの（`docs/design/automation.md` §f-1 の許可リストに含まれる）であり、サイトの不具合ではない
Lv2: 「金額・数量で絞り込む」タブとモーダルの表示オプションを組み合わせ、絞り込み前後の件数差を報告する
金額下限・上限と数量下限をタブで入力し、「表示オプションを開く」からモーダルでオプションを設定して件数を比較します。
AI へ渡す指示文
/demo/challenge を開いて、カテゴリを「菓子」、対象年月を「2026年2月」に設定してください。「金額・数量で絞り込む」タブで金額下限を「1000」、金額上限を「5000」に入力し、まずオプションなしで実行して件数を確認したのち、「表示オプションを開く」からモーダルで「金額0円の行を除外する」を有効にし、並び順を「金額の大きい順」に変更して「設定を反映する」で閉じ、再度実行してオプションなし・ありそれぞれの件数を報告してください。
合格条件
- 金額下限「1000」・金額上限「5000」をタブ上の入力欄に設定している
- オプションなしで1回、オプション（金額0円除外・並び順変更）ありで1回、それぞれ実行して件数を記録している
- モーダルを開いてチェックボックスと並び順ラジオを操作し、「設定を反映する」で閉じている（「キャンセル」ではない）
- 2つの件数を正しく報告している
つまずきやすいポイント
- モーダルは既存の role="dialog" 部品を再利用しており Esc キーでも閉じられるが、設定を条件に反映するには「設定を反映する」ボタンを押す必要がある（「キャンセル」では反映されない）
- この難所も意図的なもの（`docs/design/automation.md` §f-1 の許可リストに含まれる）である
Lv3: タブとアコーディオンの奥にある取引先・商品名キーワードを入力し、結果に反映されることを確認する
「取引先・商品名で絞り込む」タブに切り替え、その中のアコーディオンを開いて取引先・商品名キーワードを設定します。
AI へ渡す指示文
/demo/challenge を開いて、「取引先・商品名で絞り込む」タブに切り替え、その中のアコーディオン（「取引先・商品名の条件を開く」）を開いて表示される取引先セレクトと商品名キーワード欄に、任意の取引先と商品名の一部の文字列を入力してください。その後カテゴリを「日用品」、対象年月を「2026年1月」に設定して実行し、実行条件の表示に選択した取引先と入力したキーワードが反映されていることを確認して報告してください。
合格条件
- 「取引先・商品名で絞り込む」タブに切り替えている
- アコーディオンを開いてから取引先セレクトと商品名キーワード欄を操作している
- 実行条件の表示に取引先名とキーワードの内容が反映されていることを確認している
つまずきやすいポイント
- アコーディオンが閉じている間、取引先セレクト・商品名キーワード欄・備考欄は DOM に存在しない。タブとアコーディオンを開く手順を踏まないと入力欄に到達できない
- この難所も意図的なもの（`docs/design/automation.md` §f-1 の許可リストに含まれる非ネイティブ部品・隠蔽構造）であり、要素の特定自体を妨げる実装ではない