AIを使ってテストを楽にする

zi （株式会社ナレッジワーク フロントエンドエンジニア）
https://x.com/iz_dot

2025/10/30開催「AIをどこまで組み込ませるか - 要件定義からテストまで拡張する開発プロセス」での登壇資料です。
https://developer-productivity-engineering.connpass.com/event/370510/

Transcript

1. AIを使ってテストを楽にする 2025/10/30 (Thu.) @zi
2. © Knowledge Work Inc. @ zi 2 自己紹介 ジイ 株式会社ナレッジワーク Webフロントエンジニア TypeScriptで、Webフロントエンドを こそこそと書いてます。
3. © Knowledge Work Inc. 今日話すこと 3 先日書いたブログ。思いの外、反響をいただけた。
4. © Knowledge Work Inc. 今日話すこと 4 紆余曲折と知見
5. © Knowledge Work Inc. Agenda 目次 • モチベーション • たどり着くまでの試行錯誤 • 得られた知見 5
6. © Knowledge Work Inc. Agenda 目次 • モチベーション • たどり着くまでの試行錯誤 • 得られた知見 6
7. © Knowledge Work Inc. E2Eテストとは 7 ユーザーの利用環境とほとんど同じ状態で操作をするテスト
8. © Knowledge Work Inc. QAも強みを出しやすい 8 QAエンジニアもシナリオ設計で参加しやすいが ... QA
9. © Knowledge Work Inc. • HTML構造の理解 • Playwrightの理解 • 時間がかかる E2Eテスト実装のハードル 9
10. © Knowledge Work Inc. E2Eテスト実装のハードル：プロダクトの HTML構造を知る必要がある 10 プロダクトの HTML構造を調べられないといけない button？ link？
11. © Knowledge Work Inc. E2Eテスト実装のハードル： Playwrightの書き方を知らないといけない 11 多少のJavaScriptの知識とPlaywrightの書き方を知らないといけない
12. © Knowledge Work Inc. E2Eテスト実装のハードル：実装 → エラー → 修正の流れに時間がかかる 12 実行に時間がかかる ... とあるひとつのテストファイルをながしたときの結果。約 2 分かかっている
13. © Knowledge Work Inc. E2Eテスト実装のハードル：実装 → エラー → 修正の流れに時間がかかる 13 実行に時間がかかる ... とあるひとつのテストファイルをながしたときの結果。約 2 分かかっている AIでなんとかなりませんか！？　
14. © Knowledge Work Inc. Agenda 目次 • モチベーション • たどり着くまでの試行錯誤 • 得られた知見 14
15. © Knowledge Work Inc. はじめにやったこと 15 シナリオを自然言語で渡して、実装してもらう ユーザーがログインできる 1. ID入力 2. パスワード入力 3. ログイン押下 ホームが表示されてればOK このテスト書いて 承知しました。
16. © Knowledge Work Inc. はじめにやったこと 16 だめでした ... ユーザーがログインできる 1. ID入力 2. パスワード入力 3. ログイン押下 ホームが表示されてればOK このテスト書いて 承知しました。
17. © Knowledge Work Inc. はじめにやったこと 17 通るところもあるが、通らないところがほとんど 一般的なユーザーログインフローは こうだから、 ここにログインボタンがあるはず！
18. © Knowledge Work Inc. Playwright MCPとの出会い 18 3月末に登場。 AIがブラウザ操作できる
19. © Knowledge Work Inc. Playwright MCPとの出会い 19 AIが実際のブラウザの表示を読みに行ける！
20. © Knowledge Work Inc. Playwright MCPとの出会い 20 Page Object Modelの生成を真っ先に試し、効率化の第一歩に！
21. © Knowledge Work Inc. テストケースを書いてもらう挑戦 21 AIにPlaywright MCPを使って、テストケース分の操作をしてもらって あとからテストコードに落とす ユーザー名を変更のボタ ンを押して、出現する inputに対して「 hoge」と入 力して...
22. © Knowledge Work Inc. テストケースを書いてもらう挑戦 22 あまりうまくいかなかった ... ユーザー名を変更のボタ ンを押して、出現する inputに対して「 hoge」と入 力して...
23. © Knowledge Work Inc. • E2Eの実行時と開発時の差異が大きい • コンテキストが大きくなりすぎる • AIに逐次指示出しするので楽じゃない テストケースを書いてもらう挑戦 23
24. © Knowledge Work Inc. テストケースを書いてもらう挑戦の失敗 24 うまくいかなかったが、丸投げレベルじゃないと 結局みんな使わないだろうという所感は得た
25. © Knowledge Work Inc. とある日のこと ... 25 Playwright reportの中に ある trace view は本当に 便利だなぁ ...
26. © Knowledge Work Inc. とある日のこと ... 26 ん？ これって、 Webブラウザだから、 Playwright MCPも読める ...！？
27. © Knowledge Work Inc. Traceに関する補足： 27 エラーの詳細情報 テストステップの情報 テストしたページの HTML情報 欲しかった情報がすべて載っている ...
28. © Knowledge Work Inc. 今までのエラーとの違い 28 CLI上でのエラーでは解決策をちゃんと絞り込めない
29. © Knowledge Work Inc. Traceを使える強み 29 人間がテスト実行をやらなければいけなくて、コストが高かった POM作成 テストケース実装 テスト実行 今まで...
30. © Knowledge Work Inc. Traceを使える強み 30 feedback loopが完成した！ Trace外の情報が必要にならない限りは自身で解決できる POM作成 テストケース実装 テスト実行 & エラー確認 Traceを使うと...
31. © Knowledge Work Inc. Traceを使える強み 31 また初回のテストケース実装は 7~8割程度の正確性でも、 テスト実行時のエラー修正でなんとかなる POM作成 テストケース実装 テスト実行 & エラー確認 Traceを使うと...
32. © Knowledge Work Inc. 今日話したこと 32 こうしてブログの内容の楽に書く方法が生まれました
33. © Knowledge Work Inc. Agenda 目次 • モチベーション • たどり着くまでの試行錯誤 • 得られた知見 33
34. © Knowledge Work Inc. コンテキストは命 34 Playwright MCPによるコンテキストの提供がなければ無理だった
35. © Knowledge Work Inc. 一気にすべてをやらせようとするとうまくいかない 責務を分けて、役割ごとに任せる ワークフローを意識する 35 POM作成 テストケース実装 テスト実行 当初思い描いていた方法 今回の結論 POM作成 テストケース実装 テスト実行
36. © Knowledge Work Inc. 今後やりたいこと 36 • プロダクトに関する知識をもっと与えたい • E2Eのシナリオを AIに書いてもらいたい • テスト周りのことを通貫でやってもらいたい
37. © Knowledge Work Inc. 宣伝 37 弊社QAエンジニアが Playwright MCPでテスト実行してたりするので、 ぜひブログ読んでみてください