6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

画面操作テストをAIにお願いしてみての学び

Last updated at Posted at 2025-12-08

※この記事は「Medley(メドレー) Advent Calendar 2025」9日目の記事です。

はじめに

新しい機能を追加した時に、実際に画面を操作してみるテスト(e2e)を行うことがあるかと思います。
現在開発に携わっているジョブメドレーアカデミー(主に介護業界向けのオンライン動画研修サービス)においては、小さな機能であったとしても丁寧にテスト計画・テスト仕様書を作成して人による画面操作テストを行っています。
このテストに結構時間がかかるので、流行に乗りAIにお願いしてみる試みをしました。

結論から言うと、このアドベントカレンダーを書いている時点では安心して品質担保をお願いできるような状態には至っていません。が、細かく改善を続ければうまく使いこなせそうな気もしています。

本記事では、試してみて良かった工夫ポイントをいくつか共有しますので、同じようなことを試される方の参考になれば幸いです。

目指すところ

AIは社内で使いやすいClaude Codeを使い、下記のような内容のテストケースの一覧を渡すと、

  • 前提条件
  • 操作者
  • 操作内容
  • 期待結果・確認ポイント

それに従ってテストを実行し、下記のような内容のテスト結果を返してくれることを目指しました。

  • テストケースの実行結果(OK/NG)
  • エビデンス
  • NGの場合
    • デバッグに有用な情報(エラー文、スクショ等)
    • 再現手順
  • 自動的に確認不可能な観点がある場合、人が確認すべき申し送り内容

ブラウザ操作にはとりあえず使いやすいPlaywright MCPを使います。

現時点での仕上がり

プロンプト

下記はジョブメドレーアカデミーの新機能のテストケースです。各テストケースをjob-medley-academy-testerを使ってQA2環境で実行してください。
- ログイン情報は(id: xxxx, pass: xxxx)です。
- テストの結果は、フォルダを新たに作成し人が見やすいようHTML形式で格納してください。補足・エビデンスのスクリーンショット等がある場合はHTMLに含めてください。
- 制約上確認ができない観点がある場合、申し送り事項としてテスト結果に記載してください。
- テストケース同士は並列ではなく直列で実行してください。
- 別の操作者のログイン情報が必要な場合、職員を新たに登録しその職員でログインし直してください。
- 時間がかかることを気にせず、必ず全てのケースを実行してください。

// ここから↓はGoogle Spreadsheetsで作成したテストケースをCSV形式にしてコピペしたもの

操作者の条件,研修の条件,,外される職員の条件,,期待結果
権限,status,受講期間,数,受講履歴,
...

アウトプット

テストを行なった上でこのようなhtmlファイルを生成してくれました。htmlのテスト結果を細かく見てみると、想定通り検証できているケースとそうでないケース半々くらいで、記載のPASS/FAILは信用ならない印象でした。

複雑な操作を要するテストケースでうまく検証できていないことが多いようです。

image.png

想定通り検証できているケースのエビデンス例(スクショにはぼかしを入れています)

image.png

Claude Codeの/costの結果

image.png

工夫ポイント

画面操作をしてのテスト実施は、単純そうに見えてかなりの前提知識(ドメイン知識、操作方法、データ同士の依存関係、権限など)が必要です。
限られたコンテキストウィンドウの中にテストの実施に必要な知識だけをうまく入れ込むために、下記のような工夫をしてみました。

前提知識は階層化し、必要な場合にのみ細かい知識を読み込めるようにする

Claude Codeにはスキルという機能があります。知識のまとまりを「スキル」として定義しておくことで、モデルが必要だと判断した時にのみ自動的に知識が読み込まれます。

名称未設定ファイル.drawio.png

この機能を使い、テスト実施に必要な知識を抽象〜具体で階層化した上でモデルに渡してみました。

SKILL.mdのイメージ
image.png

コードでできることはコードで実行してもらう

Playwrightを使った画面操作はトークンの消費量が多く、ちょっとした操作ですぐにコンテキストウィンドウが埋まってしまいます。


※Playwrightのオーバーヘッド
ツールの実行結果が大きい

表示中の画面を確認するだけで14kbのテキスト(アカデミーのトップページの場合)がコンテキストに入る
image.png

ツールの説明も大きい

何もしてないのにToolsの説明を読み込むだけで9.2kトークン
image.png

自分でコードが書けるならMCPはそもそも不要かも

なので、テストケース実行の前提条件を満たすためのデータ作成のような、必ずしもAIが「考えて実行する」必要のないことはコードで実行してもらうようにしています。

スキルが参照するファイルにこのような形で記載しています。
image.png

テストケースごとにsubagentを使うようにする

ここまでの工夫をしていても、ケース数が多いとコンテキストウィンドウが埋まってしまい挙動が不安定になるので、ケースごとに独立したコンテキストウィンドウでテスト実施ができるようsubagentを使ってみました。

subagentもClaude Codeの機能で、所定の場所にプロンプトを記載したmarkdownファイルを置いておくことで、モデルが必要だと判断した時にフレッシュなコンテキストで特定の作業に特化したsubagentを使うようになります。

このような感じで「テスター」のアイデンティティを持ったsubagentを定義しています。
image.png

感想と今後の展望

LLMが台頭してきた当初は「丸投げしたらなんでもこなしてくれるやん!」という期待感がありましたが、実際に業務で使おうと思うと泥臭い作業が必要だなと感じました。

一方、どのような情報・ツールをどのような手段でモデルに渡すと良い結果に繋がるのか、を改善サイクルを回しながら突き詰めればポテンシャルは無限大だなとも思いました。

使い手側が試されている感じがします。

今回の試みについては、引き続き細かい改善を進めていき、安心して品質担保を任せられるようなものに仕上げていきたいと考えています。
当社内ではテスト観点・ケース作成の自動化の試みも別途あるので、その仕組みと連携できればさらに夢が広がります。

採用情報

メドレーでは各職種を募集中です。ご興味があればお気軽にお問い合わせください!
(AI活用も全社的にとても活発です🤖)

※メドレーでは生成AI利用のガイドラインが社内で展開されており、各部門の業務ではそのガイドラインに沿って利用をしています。


10日目の担当はringchangさんです!お楽しみに

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?