ブラウザ利用検証デモサイト
★★☆ 中級想定ステップ数: 約5ステップ

S5 一括操作

在庫一覧から複数の商品を選択し、確認ダイアログを経てまとめて出荷対象にするシナリオです。複数チェックボックスの選択状態の管理と、role="dialog" による確認ダイアログの操作の検証に向いています。

このシナリオで試せるブラウザ操作

  • 行チェックボックスによる複数選択
  • 「すべて選択」チェックボックスと中間状態(indeterminate)の操作
  • role="dialog" の確認ダイアログの表示内容確認と確定操作
  • 選択件数・実行結果の DOM 上での確認
  • ネイティブ <select> によるカテゴリ絞り込み

お題(Lv1〜Lv3)

Lv1: 3件を選んで出荷対象にし、結果を報告する

任意の3件を選択し、確認ダイアログを経て一括操作を実行します。

AI へ渡す指示文

/demo/bulk を開いて、在庫一覧から任意の3件にチェックを入れ、一括操作を実行してください。確認ダイアログが表示されたら内容を確認して実行を確定し、実行結果(成功件数・対象の商品コード)を報告してください。

合格条件

  • 行のチェックボックスで3件を選択している
  • 選択件数の表示が3であることを確認している
  • 確認ダイアログの対象一覧を確認したうえで実行を確定している
  • 実行結果の成功件数と対象商品コードを正しく報告している

つまずきやすいポイント

  • 1件も選ばずに実行を押すと警告が表示されて確認ダイアログが開かない
  • 確認ダイアログはブラウザ標準の confirm() ではなく画面上のダイアログのため、ダイアログ内のボタンを押して確定する必要がある

Lv2: 「すべて選択」から2件だけ外して実行し、対象件数を報告する

全選択したうえで2件だけ選択を解除し、一括操作を実行します。

AI へ渡す指示文

/demo/bulk を開いて、「すべて選択」で全件を選択したあと、任意の2件だけチェックを外して、残りの件数で一括操作を実行してください。実行後の対象件数を報告してください。

合格条件

  • 「すべて選択」で全件を選択している
  • 任意の2件のチェックを外し、選択件数が全件−2になっている
  • 一括操作を実行し、確認ダイアログを経て確定している
  • 実行結果の対象件数が全件−2と一致していることを報告している

つまずきやすいポイント

  • 一部だけ選択を解除した状態では「すべて選択」チェックボックスは選択済み・未選択のどちらでもない中間状態で表示される
  • 確認ダイアログを見落として「実行した」と誤って報告してしまう

Lv3: カテゴリを変えながら3回の一括操作を行い、各回の結果を報告する

カテゴリ絞り込みを変えながら一括操作を3回実行し、結果を記録します。

AI へ渡す指示文

/demo/bulk を開いて、カテゴリを「飲料」「菓子」「日用品」の順に変えながら、それぞれのカテゴリで任意の商品を選んで一括操作を1回ずつ実行してください。3回それぞれの実行結果(対象商品コード)を報告してください。

合格条件

  • 3つのカテゴリそれぞれで絞り込みを行っている
  • 各カテゴリで商品を選択し、確認ダイアログを経て一括操作を実行している
  • 3回分の実行結果を区別して正しく報告している

つまずきやすいポイント

  • 実行結果はページをリロードするまで画面に保持されるため、次のカテゴリに切り替える前に前回の結果を記録し損ねやすい
  • カテゴリを切り替えても選択状態がリセットされない場合があるため、切り替え後に選択件数を確認せずに実行してしまう