WEB  ページ  UIに関する簡単仕様をAIが作る

手順

1. Web画面を出します。

2.ソースをコピーします。

3.ワードにコピーしたHTMLを貼り付けます。 単純にコピーしたものをアップしようとすると容量オーバーで
読み込んでもらえません。

4.ワードファイルをアップして、読んでいただきます。

5.そこでページのテスト仕様を作成してと依頼すれば、それなりのテスト仕様を出してくれます。

6.それを内容を必要な都度修正をかけていくだけで、結構様になるテスト仕様が出来上がります。

下記に WebページのHTMLを読ませて、仕様化したものを掲載します。

テスト仕様案:商品管理画面

目次

1. 基本UI要素の表示チェック

  • ページタイトル「商品一覧」が表示されていること。
  • 検索フォームの全項目(カテゴリ選択、価格範囲、販売実績範囲、在庫数、商品番号、商品名、商品説明など)が正しく表示されていること。
  • 各入力フォーム(テキストボックス、ラジオボタン、チェックボックス、セレクトボックス)が意図した配置・ラベルで存在すること。
  • 「検索」「クリア」ボタンが存在し、クリックできること。

2. 検索機能テスト

  • 検索条件を指定して「検索」ボタンをクリックした際に、条件に合致した商品が一覧に表示されること。
  • 検索条件クリア後にフォームの入力値が全てリセットされること。
  • 都度、日付入力欄がカレンダー形式で選択可能であること。
  • カテゴリ選択で親カテゴリ選択時に子カテゴリの表示切替えが正しく動作すること。

3. 商品一覧テーブル表示テスト

  • 商品一覧テーブルに商品ID、画像、カテゴリ、得点、販売数、商品番号、商品名、在庫、状態、価格、操作ボタンが表示されること。
  • 商品画像が正しく表示され、リンククリックで編集画面(別タブ)へ遷移すること。
  • 561件(実際の件数に応じて)の商品リストが正しくページングされていること。

4. 複数選択・一括操作の動作確認

  • 「すべて選択」チェックボックスをON/OFFにすると、一覧の各商品チェックボックスが連動してON/OFFになること。
  • 商品を複数選択し、「倉庫へ」「販売中へ」「在庫」「削除」ボタンの各アクションが実行でき、確認ダイアログが表示されること。
  • 各一括操作後に商品状態や在庫が更新され、画面に反映されること。

5. 個別商品操作テスト

  • 各商品の「更新」ボタンをクリックすると、現在入力されている在庫情報で更新処理が行われること。
  • 「コピー」ボタンで該当商品を複製する処理があること。
  • 「削除」ボタン押下後に削除確認ダイアログが表示され、OKで削除・キャンセルで処理が中止されること。

6. ファイルアップロード, ダウンロード機能のチェック

  • 商品CSVファイル選択→登録ボタンでCSVファイルがアップロードできること。アップロード時に確認メッセージが表示されること。
  • 「ダウンロード」ボタンを押すと、現在の検索条件の一覧がCSVファイルとしてダウンロードされること。

7. UIのレスポンス・操作性

  • メニュー操作(jMenu)およびスマホ用メニューの開閉が適切に行えること。
  • テーブルの横スクロールが可能であり、多くの商品項目でも崩れないレイアウトであること。
  • 日付ピッカーが日本語(ja)で正しく表示されること。

8. 入力値のバリデーション

  • 在庫数・価格・販売実績など数値入力に対し、非数値が入力された場合に適切なエラーメッセージ表示があること。
  • 範囲指定が正しく受け渡され、検索条件として機能していること。

9. その他動作確認

  • 戻るボタン機能が履歴カウント機能を用いて正しく挙動していること(履歴がない場合は警告)。
  • ページングが正しく動作し、任意のページへ遷移できること。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次