E2Eテスト自動化プラットフォームにおけるAIの活用

2024/7/24 生成AIはどうテストを変えるのか (AI Test Lab vol.1)
https://shiftevolve.connpass.com/event/322911/
MagicPod CEO 伊藤 望 氏

Transcript

1. E2Eテスト自動化プラットフォーム におけるAIの活用 SHIFT EVOLVE
2. 自動テストツール歴：15年目 Seleniumコミュニティ主催 Selenium実践入門執筆（共著） About me 伊藤 望 Ito Nozomi 株式会社MagicPod CEO Selenium実践入門 自動化による継続的なブラウザテスト 技術評論社
3. Web & モバイルアプリのE2Eテスト自動化SaaS 柔軟性とメンテナンス性が強み ノーコードで簡単にテスト作成
4. MagicPodのAI機能 1. 人間に読みやすい画面要素名 2. 自動修復 3. 生成AI
5. MagicPodのAI機能 1. 人間に読みやすい画面要素名 2. 自動修復 3. 生成AI
6. AIによって計算された画面要素名 人間向けテキスト ・AIが計算 ・テスト実行には使わない Selenium/Appium ロケータ ・UIツリーから計算 ・テスト実行に利用
7. 要素名計算に使われている情報 UIツリーの情報: 属性、テキスト、タグ名など 要素間の位置関係
8. 要素名計算に使われている情報 OCR (光学文字認識) ディープラーニングエンジンによる物体認識
9. MagicPodのAI機能 1. 人間に読みやすい画面要素名 2. 自動修復 3. 生成AI
10. 自動修復とは? アプリケーションの画面構成が変わってテストが失敗した場合に、 AIがテスト側を適切に修正してテストを継続。
11. 「register」をタップ テストスクリプト システム内部情報が変わった！ テスト実行すると どうなるか? 自動修復の例 name=register name=registerButton
12. 自動修復の例 AIエンジンがスクリプトを変更したためテストは成功 ユーザーは最終的に変更内容を受け入れるかを選択できる
13. MagicPodのAI機能 1. 人間に読みやすい画面要素名 2. 自動修復 3. 生成AI
14. 生成AI活用の3つのアイデア ① テストケースの要約 ② 変更コメントの生成 ③ (ランダムIDの検出)
15. ①テストケースの要約 モチベーション: 既存テストケースを理解するのは新しいメンバーには大変 人間が書いた要約を常に最新に保つのは大変 AIでテストケースの要約を生成
16. ①テストケースの要約 実験 人間が読めるテキスト テストスクリプト 要約 MagicPod public API 生成AI https://hotel.testplanisphere.dev/ja/signup.htmlに遷移 // ログインしている場合は一度ログアウトする UI要素「ログアウト」ボタンが存在する場合 「ログアウト」ボタンをクリック https://hotel.testplanisphere.dev/ja/signup.htmlに遷移 条件分岐終わり // ユニークなEメールアドレスを使用して登録する 変数UNIQUE_KEYに現在時刻を元に生成したユニークな値を保 存 「メールアドレス」入力エリアにtest- user${UNIQUE_KEY}@example.comとテキスト入力 「パスワード」入力エリアに${PASSWORD}とテキスト入力 「パスワード(確認)」入力エリアに${PASSWORD}とテキスト入 力 「氏名」入力エリアにTest userとテキスト入力 「一般会員」選択ボタンをクリック 「住所」入力エリアに東京都とテキスト入力 「電話番号」入力エリアに00011122233とテキスト入力 「性別」選択ボックスで男性をプルダウン選択 「生年月日」入力エリアに2020-01-01とテキスト入力 「登録」ボタンをクリック ホテルのサインアップページにアクセスし、既にログインして いる場合はログアウトを行う。ユニークなメールアドレスと情 報を入力して登録し、登録した情報が正しく表示されるか確認 する。最後にログアウトし、再びログインして正常にログイン できることを確認する。
17. ①テストケースの要約 テストスクリプト
18. ①テストケースの要約 人間が読めるテキスト https://hotel.testplanisphere.dev/ja/signup.htmlに遷移 // ログインしている場合は一度ログアウトする UI要素「ログアウト」ボタンが存在する場合 「ログアウト」ボタンをクリック https://hotel.testplanisphere.dev/ja/signup.htmlに遷移 条件分岐終わり // ユニークなEメールアドレスを使用して登録する 変数UNIQUE_KEYに現在時刻を元に生成したユニークな値を保存 「メールアドレス」入力エリアにtest-user${UNIQUE_KEY}@example.comとテキスト入力 「パスワード」入力エリアに${PASSWORD}とテキスト入力 「パスワード(確認)」入力エリアに${PASSWORD}とテキスト入力 「氏名」入力エリアにTest userとテキスト入力 「一般会員」選択ボタンをクリック 「住所」入力エリアに東京都とテキスト入力 「電話番号」入力エリアに00011122233とテキスト入力 「性別」選択ボックスで男性をプルダウン選択 「生年月日」入力エリアに2020-01-01とテキスト入力 「登録」ボタンをクリック // 前ページで設定した値が正しく表示されるか確認する UI要素Emailの値がtest-user${UNIQUE_KEY}@example.comと一致するか確認 UI要素氏名についての値がTest userと一致するか確認 UI要素会員ランクについての値が一般会員と一致するか確認 UI要素住所についての値が東京都と一致するか確認 UI要素電話番号についての値が00011122233と一致するか確認 UI要素性別についての値が男性と一致するか確認 UI要素生年月日についての値が2020年1月1日と一致するか確認 UI要素お知らせの値が受け取らないと一致するか確認 // ユーザーの作成とログインが成功したことを確認する 「ログアウト」ボタンをクリック ログインをクリック 「メールアドレス」入力エリアにtest-user${UNIQUE_KEY}@example.comとテキスト入力 「パスワード」入力エリアに${PASSWORD}とテキスト入力 「ログイン」ボタンをクリック
19. ①テストケースの要約 生成AIに渡すプロンプト 以下のブラウザテストのユーザーフローを短く(300文字以内) 日本語で要約してください。 [テキスト形式のテストスクリプトの全文 ]
20. ①テストケースの要約 生成されたテストケースの要約 ホテルのサインアップページにアクセスし、既にログインしている 場合はログアウトを行う。ユニークなメールアドレスと情報を入力 して登録し、登録した情報が正しく表示されるか確認する。最後に ログアウトし、再びログインして正常にログインできることを確認 する。
21. ②変更コメントの生成 AIで変更コメントを生成 モチベーション: テストの変更が自動保存された場合に、 「自動保存」よりも分かりやすい 変更コメントで保存したい
22. ②変更コメントの生成 実験 人間が読めるテキスト (変更前) スクリプト (変更前) 変更コメント 生成AI スクリプト (変更後) 人間が読めるテキスト (変更前) スクリプトの変更により、 「氏名」 を"MagicPod user"、"住所"を"東京 都中央区日本橋箱崎町"、"電話番 号"を"01071220338"に変更しまし た。 https://hotel.testplanisphere.dev/ja/signup.htmlに遷移 // ログインしている場合は一度ログアウトする UI要素「ログアウト」ボタンが存在する場合 「ログアウト」ボタンをクリック https://hotel.testplanisphere.dev/ja/signup.htmlに遷移 条件分岐終わり // ユニークなEメールアドレスを使用して登録する 変数UNIQUE_KEYに現在時刻を元に生成したユニークな値を保存 「メールアドレス」入力エリアにtest-user${UNIQUE_KEY}@example.comとテキスト入力 「パスワード」入力エリアに${PASSWORD}とテキスト入力 「パスワード(確認)」入力エリアに${PASSWORD}とテキスト入力 「氏名」入力エリアにTest userとテキスト入力 「一般会員」選択ボタンをクリック 「住所」入力エリアに東京都とテキスト入力 「電話番号」入力エリアに00011122233とテキスト入力 「性別」選択ボックスで男性をプルダウン選択 「生年月日」入力エリアに2020-01-01とテキスト入力 「登録」ボタンをクリック // 前ページで設定した値が正しく表示されるか確認する UI要素Emailの値がtest-user${UNIQUE_KEY}@example.comと一致するか確認 UI要素氏名についての値がTest userと一致するか確認 UI要素会員ランクについての値が一般会員と一致するか確認 UI要素住所についての値が東京都と一致するか確認 UI要素電話番号についての値が00011122233と一致するか確認 UI要素性別についての値が男性と一致するか確認 UI要素生年月日についての値が2020年1月1日と一致するか確認 UI要素お知らせの値が受け取らないと一致するか確認 // ユーザーの作成とログインが成功したことを確認する 「ログアウト」ボタンをクリック ログインをクリック 「メールアドレス」入力エリアにtest-user${UNIQUE_KEY}@example.comとテキスト入力 「パスワード」入力エリアに${PASSWORD}とテキスト入力 「ログイン」ボタンをクリック https://hotel.testplanisphere.dev/ja/signup.htmlに遷移 // ログインしている場合は一度ログアウトする UI要素「ログアウト」ボタンが存在する場合 「ログアウト」ボタンをクリック https://hotel.testplanisphere.dev/ja/signup.htmlに遷移 条件分岐終わり // ユニークなEメールアドレスを使用して登録する 変数UNIQUE_KEYに現在時刻を元に生成したユニークな値を保存 「メールアドレス」入力エリアにtest-user${UNIQUE_KEY}@example.comとテキスト入力 「パスワード」入力エリアに${PASSWORD}とテキスト入力 「パスワード(確認)」入力エリアに${PASSWORD}とテキスト入力 「氏名」入力エリアにMagicPod userとテキスト入力 「一般会員」選択ボタンをクリック 「住所」入力エリアに東京都中央区日本橋箱崎町とテキスト入力 「電話番号」入力エリアに01071220338とテキスト入力 「性別」選択ボックスで男性をプルダウン選択 「生年月日」入力エリアに2020-01-01とテキスト入力 「登録」ボタンをクリック // 前ページで設定した値が正しく表示されるか確認する UI要素Emailの値がtest-user${UNIQUE_KEY}@example.comと一致するか確認 UI要素氏名についての値がMagicPod userと一致するか確認 UI要素会員ランクについての値が一般会員と一致するか確認 UI要素住所についての値が東京都中央区日本橋箱崎町と一致するか確認 UI要素電話番号についての値が01071220338と一致するか確認 UI要素性別についての値が男性と一致するか確認 UI要素生年月日についての値が2020年1月1日と一致するか確認 UI要素お知らせの値が受け取らないと一致するか確認 // ユーザーの作成とログインが成功したことを確認する 「ログアウト」ボタンをクリック ログインをクリック 「メールアドレス」入力エリアにtest-user${UNIQUE_KEY}@example.comとテキスト入力 「パスワード」入力エリアに${PASSWORD}とテキスト入力 「ログイン」ボタンをクリック
23. ②変更コメントの生成 変更詳細
24. ②変更コメントの生成 生成AIに渡すプロンプト 以下はブラウザテストのスクリプトの変更前と変更後の内容です。 変更前 ---------------- [テキスト形式のテストスクリプト（変更前）の全文] ---------------- 変更後 ---------------- [テキスト形式のテストスクリプト（変更後）の全文] ---------------- この変更の短い変更コメントを日本語で作ってください。
25. ②変更コメントの生成 生成された変更コメント
26. モチベーション: ランダムIDは動的に変わる、分かりにくい、変更に弱いなど問題点が多 いのでできるだけ使いたくない しかしランダムIDかどうかの判定は容易ではない ③ランダムIDの検出 ランダムIDを避けたロケーター
27. 3bb5fe17-285c-4aa7-828f-f54816ed1bdf user001 prefix_2bd5ff24-185c-4ab7-128f-f54616ededda second_section magicPod mantine-zbve6blpq test_combo gtm-noscript m-large 23_aKvs-b8bW2Vg3fwHozO 13LGdX8RMStbBE9w-t0gZ1 css-r6dqg1 prefix_3bb5fe17-285c-4aa7-828f-f54816ed1bdf code-snippet related-container data-v-0c1f62df privateStripeFrame456 aras-toolbar container hs-analytics aras-header aras-es-toolbar-input o3ofqfx9qfqo sc-ilJxFg bkOQwZ gh-header-actions mt-0 mb-3 mb-md-2 ml-1 flex-md-order-1 flex-shrink-0 d-flex flex-items-center gap-1 ③ランダムIDの検出 実験 全てのid & class HTML 生成AI 3bb5fe17-285c-4aa7-828f-f54816ed1bdf prefix_2bd5ff24-185c-4ab7-128f-f54616ededda mantine-zbve6blpq 23_aKvs-b8bW2Vg3fwHozO 13LGdX8RMStbBE9w-t0gZ1 css-r6dqg1 prefix_3bb5fe17-285c-4aa7-828f-f54816ed1bdf data-v-0c1f62df o3ofqfx9qfqo sc-ilJxFg bkOQwZ ランダムなid & class ロケーター 計算ロジック
28. ③ランダムIDの検出 生成AIのプロンプト 以下は、HTMLのid属性を改行で区切ったリストです。 この中で、ランダムに生成されたテキストを含むものはどれでしょう か？ 「ランダムに生成される」とは、人間が決定したものではなく、シス テムによって生成され、変更されやすいという意味です。 結果は改行で区切られたリストとして返してください。 なお、数列、接頭辞、接尾辞は「ランダムに生成された」テキストと はみなしません。 [改行で区切られたid/ classのリスト]
29. ③ランダムIDの検出 結果 生成AIは多くのランダムIDを検出でき、検出されたものはほぼ正しくランダム IDだった しかし検出漏れが頻繁に発生した さらに、30個のIDを検出するのに6秒かかる MagicPodに組み込むのは今の所難しそう
30. 生成AI活用の3つのアイデア ① テストケースの要約 ② 変更コメントの生成 ③ (ランダムIDの検出)
31. Thank you!