日本語AIアサーションを使ってcanvas要素のテスト自動化に挑戦してみた
こんにちは。MagicPod カスタマーサクセスのIshiiです。
MagicPodでは10月21日にAIアサーションをリリースしました！
AIアサーションは、自然言語（日本語・英語）で「どのような結果を期待するか」をテストケース中に記述するだけで、生成AIが画面やテキストの内容を理解し、必要なチェックを自動的に行う機能です。
例えば、「テキストが文字化けしていないことを確認」のような指示だけで、AIで必要なチェックを実施できます。
詳しくはプレスリリースをご確認いただけますと幸いです。
プレスリリース：AIテスト自動化のMagicPod、生成AIによるテスト結果確認機能『AIアサーション』をリリース
MagicPod CSチームでは早速、AIアサーションを使ってどのようなテストを作成できるかを検証しています。
色々なユースケースがあるのですが、その中でも特にUIツリー上に要素として存在しないため今まで確認できなかった事項が確認できる点に感動しました！
例えば、アニメーションやグラフなどを描画する際に用いるcanvas要素の中の要素はUIツリー上に存在しないため、テスト自動化が難しかったのですが、AIアサーションで確認できるようになりました。
本ブログではどのようにcanvas要素の確認をAIアサーションで行ってみたかを紹介します。
目次
canvas要素とは
canvas要素は、HTML5で導入されたグラフィックスを描画するための要素です。JavaScriptを使って、図形、画像、アニメーション、グラフなどを動的に描画できます。
canvas要素は開発者としてはとても便利なのですが、テストする立場からすると悩ましい存在です。
以下のようにUIツリー上にはcanvas要素内の要素が存在しません。
そのため、「折れ線グラフが表示されているか」「各マーカーの上に書かれた数字が合っているか」といった検証は自動化が困難でした。
AIアサーションでcanvas要素内のグラフを検証してみた
AIアサーションの使用方法
使い方はとても簡単です。
まずは普段のテストケース作成時と同様にステップを追加します。
AIアサーションのコマンド名は「AIで確認」です。
次に「何を確認したいか」をステップの入力欄に記入します。
ここではこのような文を記入してみました。
1月から6月までの折れ線グラフが表示され、全ての月の売上の数字がマーカーの上に表示されていること
ちなみにテスト対象のグラフはこのような月間売上推移の表です。
いざAIアサーションを実行
実行した結果、無事パスしました🎉
実行した際にログに記録された分析結果は以下の通りです。
Assertion passed: 画像を分析した結果、以下の要件が満たされていることを確認しました：
1. **折れ線グラフの表示**: 「月間売上推移」というタイトルの下に、青色の折れ線グラフが表示されています。
2. **1月から6月までのデータ**: X軸に「1月」「2月」「3月」「4月」「5月」「6月」と6つの月が表示されており、すべての月のデータが含まれています。
3. **全ての月の売上数字がマーカーの上に表示**: 各月のマーカー（円形のポイント）の上に、以下の売上数字が表示されています：
- 1月: 65
- 2月: 59
- 3月: 80
- 4月: 81
- 5月: 56
- 6月: 95
4. **マーカーの位置**: すべてのデータポイントに円形のマーカーが配置されており、その上に対応する数値が青色で表示されています。
したがって、ユーザーが指定した「1月から6月までの折れ線グラフが表示され、全ての月の売上の数字がマーカーの上に表示されていること」という条件は完全に満たされています。
上記のように詳細な分析結果がログに残ります。各月の数字も確認してくれていて、AIすごいな...！となりました。
ソフトウェアテストにてAIを用いるときの一番の懸念は「AIによる検証結果を信用して良いのか」という点だと思います。MagicPodのAIアサーションではこのようにチェック成功・失敗の判定を行ったAIの思考過程をログで確認できるため、信頼性も担保できます。
想定と異なる際に失敗するか
AIを用いた機能であるため、「想定と異なる場合にFailになるか」という確認をテスト作成段階で行っておくと良いと思います。
ここでは折れ線が途切れてしまっているグラフに対して、先ほどと同じ確認を行ってみます。
無事(?)、失敗しました。実行した際にログに記録された分析結果は以下の通りです。
4,5,6月のマーカーの上に数字が表示されていないため要件を満たしていないと判断してくれています。
AssertionError: ユーザーの要件は「1月から6月までの折れ線グラフが表示され、全ての月の売上の数字がマーカーの上に表示されていること」です。
画像を分析すると：
1. **折れ線グラフの存在**: 確認できます。タイトル「月間売上推移」の下に青い折れ線グラフが表示されています。
2. **月の範囲**: X軸に「1月」「2月」「3月」「4月」「5月」「6月」と6つの月が表示されています。
3. **マーカーと数字の表示状況**:
- 1月：マーカー（円形）が表示され、数字「65」がマーカーの上に表示されている
- 2月：マーカーが表示され、数字「59」がマーカーの上に表示されている
- 3月：マーカーが表示され、数字「80」がマーカーの上に表示されている
- 4月：マーカーが表示されているが、数字が表示されていない
- 5月：マーカーが表示されているが、数字が表示されていない
- 6月：マーカーが表示されているが、数字が表示されていない
4. **結論**: 全ての月の売上の数字がマーカーの上に表示されていません。1月から3月までは数字が表示されていますが、4月、5月、6月のマーカーの上には売上の数字が表示されていません。
したがって、ユーザーの要件を満たしていません。
失敗した場合は通常の確認コマンドでの失敗と同じように、テスト結果の画面で失敗時のエラーメッセージが表示されます。
（裏話）Take1ではうまくいかず
実は上記検証の前に「1月から6月までの折れ線グラフが表示されていること」という文で検証を行っていました。
折れ線が途切れている際に失敗するか、を確認したところ以下のログとともに成功してしまいました。。
Assertion passed: 画像を分析した結果、以下の要素が確認できます：
1. **グラフのタイプ**: 折れ線グラフが表示されており、青色の線で複数のデータポイントが接続されています。
2. **月間データの表示**: X軸に以下の月が表示されています：
- 1月（1月）
- 2月（2月）
- 3月（3月）
- 4月（4月）
- 5月（5月）
- 6月（6月）
3. **データポイント**: グラフには3つのデータポイントが表示されており、各ポイントに値が記載されています：
- 1月：65
- 2月：59
- 3月：80
4. **グラフのタイトル**: 「月間売上推移」というタイトルが表示されており、月間の売上データを示しています。
5. **軸の設定**: Y軸は0から100までのスケールで、X軸には1月から6月までの月が表示されています。
ユーザーの要件「1月から6月までの折れ線グラフが表示されていること」に対して、画像には1月から6月までの全ての月がX軸に表示され、折れ線グラフの形式で月間売上推移が表現されているため、要件を満たしています。
4,5,6月のマーカー（データポイント）が欠けていることは検知できていたものの、すべての月がX軸に表示されていることから「1月から6月までの折れ線グラフが表示されている」とAIは判断してしまったようです。
そこで売上の数字がマーカーの上に表示されているという具体的な検証項目をプラスすることで安定するようになりました。
- Before: 1月から6月までの折れ線グラフが表示されている
- After: 1月から6月までの折れ線グラフが表示され、全ての月の売上の数字がマーカーの上に表示されていること
安定性・信頼性を高めるために、なるべく具体的で明確な文を書くべしという学びになりました！
Tips: 変数も使えます
確認コマンドの文章内では変数を用いることができます。
例えば1月〜6月の固定ではなく、5ヶ月前の月〜今月で確認できます！
今まではグラフが動的に変わる場合、確認コマンドだけでなく画像差分チェックでの確認も難しかったため、ユーザー様に目視確認をお願いしており心苦しい思いをしていました...。
これからはAIアサーションを使えば、動的な要素の確認についても自動化が実現できそうです✨
最後に
AIアサーションの登場により、今回ご紹介したcanvas要素のように今まで諦めていた部分についても自動化が可能となりました🎉
他にもcanvas要素のように今まで確認が難しかった動画再生に関するテストや、「特定のカテゴリの商品が表示されていること」など意味文脈の理解が必要なテストもAIアサーションで実現することができます。
MagicPodの導入を検討されていらっしゃる方については、「AIアサーションを試してみたい」というお問い合わせも大歓迎です。無料トライアル期間中でもAIアサーションをお試しいただけます。
もしMagicPodが気になった方は、ぜひお気軽にご連絡ください！
https://magicpod.com/consulting/
モバイルアプリ・ブラウザ（ウェブアプリ）テストの両方に対応したAIテスト自動化プラットフォーム「MagicPod」のご紹介資料です。
今すぐ無料でご覧いただけますので、ぜひご活用ください！
＼ MagicPodのの紹介資料を今すぐ入手 ／
資料を無料でダウンロードする
