日本語AIアサーションで商品一覧画面を色々とテストしてみた
こんにちは。MagicPod カスタマーサクセスのIshiiです。
MagicPodでは10月21日にAIアサーションをリリースしました！
AIアサーションは、自然言語（日本語・英語）で「どのような結果を期待するか」をテストケース中に記述するだけで、生成AIが画面やテキストの内容を理解し、必要なチェックを自動的に行う機能です。
例えば、「テキストが文字化けしていないことを確認」のような指示だけで、AIで必要なチェックを実施できます。
詳しくはプレスリリースやヘルプページをご確認いただけますと幸いです。
プレスリリース：AIテスト自動化のMagicPod、生成AIによるテスト結果確認機能『AIアサーション』をリリース
ヘルプページ：AIアサーション
前回の記事ではAIアサーションでcanvas要素で描画されたグラフのテストを作成する方法をご紹介しました。
AIアサーションを使ってcanvas要素のテスト自動化に挑戦してみた
本ブログでは、動的な商品一覧ページに対してAIアサーションでどのようにテストできるかの具体例をご紹介します。
目次
AIアサーションで色のテスト
今まで色のテストは、画像差分チェックやUI要素の属性を確認コマンドによる確認を推奨してきました。
しかしながら、既存コマンドでは以下のような課題がありました。
-
画像差分チェック
画面が動的に変わる場合にテストが意図せず失敗してしまう。除外領域を設定することで回避可能だが、画面一つ一つに対して設定するのは大変。 -
「UI要素の属性を確認」コマンド
UIツリー上にカラーコードやクラス名の情報が含まれている場合のみ使用可能。また、カラーコードやクラス名と実際の表示が整合している保証がないため不安が残る。
そこで、AIアサーションで色のテストをしてみましょう。
商品一覧画面の新規追加ボタンは青色、詳細ボタンは緑色であることを確認できるか試してみます。
色のテストが成功しました🎉 下記のようにAIの思考過程も見られるので安心です。
Assertion passed: 画像を分析した結果、以下の観察が得られました：
1. 新規追加ボタンの確認：画面右上に「新規追加」というテキストが表示されたボタンが存在します。このボタンは青色（#007BFF付近の標準的な青）で表示されています。
2. 詳細ボタンの確認：テーブルの右側「詳細」列に3つの「詳細」ボタンが表示されています。これらのボタンはすべて緑色（#28A745付近の標準的な緑）で表示されています。
3. 色の検証：
- 新規追加ボタン：明確な青色で、ユーザーの指定条件を満たしています
- 詳細ボタン（いちご、ぶどう、ばなな行）：すべて緑色で、ユーザーの指定条件を満たしています
4. 結論：画像内のすべてのボタンが指定された色要件を満たしており、新規追加ボタンは青色、詳細ボタンは緑色という条件が完全に満たされています。
念の為、失敗することも確認しておきましょう。
一つの詳細ボタンの色を赤くしてみました。
AIアサーションはこの不具合を検出してくれるでしょうか...？（どきどき）
不具合を検出できました🎉
失敗ログは以下の通りです。2行目が赤色になっていることをしっかり把握してくれています。
ユーザーの指定条件を確認します：「新規追加ボタンは青色、詳細ボタンは緑色であること」
画像の観察：
1. 新規追加ボタン：右上に「新規追加」というボタンが表示されており、このボタンは青色（#0066FF程度の明るい青）です。✓
2. 詳細ボタン：テーブルの「詳細」列に3つのボタンが表示されています。
- 1行目（いちご）：緑色の「詳細」ボタン ✓
- 2行目（ぶどう）：赤色の「詳細」ボタン ✗
- 3行目（ばなな）：緑色の「詳細」ボタン ✓
分析：
新規追加ボタンは正しく青色です。しかし、詳細ボタンについては、2行目（ぶどう）の詳細ボタンが赤色になっており、緑色ではありません。ユーザーの条件では「詳細ボタンは緑色であること」と指定されているため、すべての詳細ボタンが緑色である必要があります。
結論：
新規追加ボタンは青色で正しいですが、詳細ボタンの一部が赤色であるため、指定された条件を完全には満たしていません。
このように、色に関するテストはAIアサーションで行えました。
「カラーコードがxxxの色であること」というレベルの細かい確認は現状難しいかもしれませんが、赤色であるか、という粒度の確認であれば大丈夫そうです！
AIアサーションで言語のテスト
次は言語のテストとして、文字が日本語であるかを確かめてみます。
従来、MagicPodでは言語に関するチェックは難しかったです。（頑張れば正規表現を用いて一部検証できましたが、非現実的でした）
商品一覧ページですべての商品名が日本語であることを確認してみましょう。
Assertion passed: 画像に表示されている商品管理Webページを分析しました。商品一覧テーブルに表示されている商品名は以下の3つです：
1. 「いちご」- ひらがなで日本語
2. 「ぶどう」- ひらがなで日本語
3. 「ばなな」- ひらがなで日本語
すべての商品名がひらがなで表記されており、日本語のみで構成されています。英語やその他の言語は含まれていません。したがって、「すべての商品名が日本語であること」という条件を満たしています。
無事成功しました🎉
では、英語で書かれた商品を追加して失敗するかも確認してみましょう。
「Apple」は日本語ではないため失敗していますね！
例えば多言語対応しているアプリのテストで、ページ内全ての表示が対象言語になっているか確認するときなどに便利そうです。
AIアサーションで金額フィルターのテスト
「金額がXX円からXX円の間の商品を表示する」といった、フィルター検索の機能を備えたアプリが多くあるかと思います。そのような機能のテストにもAIアサーションは活躍します。
商品一覧のすべての商品の価格が100円-1000円の範囲であることを確認してみました。
今回も無事成功です🎉
Assertion passed: 画像に表示されている商品管理Webの商品一覧テーブルを確認しました。表示されているすべての商品の価格を検証します：
1. いちご：500円 ✓ (100円 ≤ 500円 ≤ 1000円)
2. ぶどう：600円 ✓ (100円 ≤ 600円 ≤ 1000円)
3. ばなな：300円 ✓ (100円 ≤ 300円 ≤ 1000円)
4. メロン：1000円 ✓ (100円 ≤ 1000円 ≤ 1000円)
5. トマト：300円 ✓ (100円 ≤ 300円 ≤ 1000円)
全5商品すべての価格が100円以上1000円以下の範囲内に収まっています。最小価格は300円、最大価格は1000円であり、指定された範囲を満たしています。
それでは範囲外となる、1200円のマンゴーを追加するとどうなるでしょうか...？
マンゴーは1000円を超えているため、想定通りテストが失敗しました。
AIアサーションを使えば、境界値テストのようなことも出来そうですね！
AIアサーションでリスト表示のテスト
「リストの全ての行にXXが表示されていることを簡単にテストしたい」とユーザー様からご要望いただくことが多くあります。これも色のテスト同様、各種確認コマンドや画像差分チェックで頑張れば出来たものの、実装工数が課題となるテスト項目です。
そこでAIアサーションを使って、すべての商品行で詳細ボタンが表示されていることをテストしてみました。
Assertion passed: 画像を分析して、すべての商品行で詳細ボタンが表示されているかを確認しました。
【観察内容】
1. 商品一覧テーブルには3つの商品行が表示されています：
- 1行目：いちご（価格500、在庫数20）
- 2行目：ぶどう（価格600、在庫数20）
- 3行目：ばなな（価格300、在庫数20）
2. 各商品行の「詳細」列を確認すると：
- いちご行：緑色の「詳細」ボタンが表示されている
- ぶどう行：緑色の「詳細」ボタンが表示されている
- ばなな行：緑色の「詳細」ボタンが表示されている
【評価】
表示されているすべての商品行（3行）に対して、それぞれ詳細ボタンが表示されています。ボタンは緑色で統一されており、各行の「詳細」列に正しく配置されています。
【結論】
ユーザーの要件「すべての商品行で詳細ボタンが表示されていること」は満たされています。
無事通りましたね！では恒例の、失敗するかチェックを行なっていきましょう。
詳細ボタンが一個表示されていない画面で同じテストを流してみます。
ぶどう行に詳細ボタンが表示されていないことをしっかりと検知できました🎉
AIアサーションでジャンルのテスト
AIアサーションを使えば、今までのE2Eテストの常識では不可能であった意味や文脈を理解する必要があるテストも行えます。例えば、検索欄に「クリスマス雑貨」と入力して検索した際に、表示されたものが全てクリスマス関連のものであるといったテストです。
ここでは、商品一覧に表示されている商品がすべて果物であることを確認していきます。
Assertion passed: 画像に表示されている商品一覧を確認しました。表示されている商品は以下の3つです：
1. いちご（イチゴ）- 価格500、在庫数20
2. ぶどう（ブドウ）- 価格600、在庫数20
3. ばなな（バナナ）- 価格300、在庫数20
これら3つの商品をそれぞれ検証します：
- いちご：果物です（ベリー類）
- ぶどう：果物です（ブドウ科の果実）
- ばなな：果物です（バナナ科の果実）
商品一覧に表示されているすべての商品が果物であることが確認できました。野菜や他のカテゴリーの商品は含まれていません。したがって、「商品一覧に表示されている商品がすべて果物であること」という条件を満たしています。
果物チェックができました🍓🍇🍌
"野菜や他のカテゴリーの商品は含まれていません"という気の利いた一言もいれてくれていますね...!
それでは、ちょっといじわるをしてみましょう。
一覧表にメロンとトマトを追加しました。トマトは植物学的には「果物」だそうです。AIは果物として扱うのか注目です。
参考: [農林水産省HP] 野菜の区分について教えてください。
テストの結果は...
AIは「トマトは野菜である」と判断したため、全て果物であるか確認するテストは私の想定通りに失敗しました！
植物学ではなく、一般的な食品分類から判断したようです。
ただし、AIモデルによって結果が揺らぐ可能性があるため、私が書いた「商品一覧に表示されている商品がすべて果物であること」という確認文は改善した方が良さそうです。
植物学上の果物であることや農林水産省が定める果物であることなど、果物の定義を明確にすることでより安定したテストができるように思います。
この実験から、確認したい内容は明確かつ具体的に記述する重要性を学ぶことができました！（真面目にまとめてみる。）
最後に
AIアサーションの登場により、意味や文脈の理解が必要なテストなどの今まで困難だったテストの自動化が可能となりました✨
他にも「リストの全ての行にXXが表示されていることを簡単にテストしたい」といったご要望も実現することができます。
AIアサーションの精度については引き続き改善中なので、もし想定通りに上手くいかなかった事例などあればMagicPodサポートに共有いただけると嬉しいです。
MagicPodの導入を検討されていらっしゃる方については、「AIアサーションを試してみたい」というお問い合わせも大歓迎です。無料トライアル期間中でもAIアサーションをお試しいただけます。
もしMagicPodが気になった方は、ぜひお気軽にご連絡ください！
https://magicpod.com/consulting/
モバイルアプリ・ブラウザ（ウェブアプリ）テストの両方に対応したAIテスト自動化プラットフォーム「MagicPod」のご紹介資料です。
今すぐ無料でご覧いただけますので、ぜひご活用ください！
＼ MagicPodのの紹介資料を今すぐ入手 ／
資料を無料でダウンロードする
