https://techblog.spiderplus.co.jp/entry/2025/04/17/123000

今日もまた、モニターを食い入るように見つめ、気の遠くなるような手作業の波が押し寄せる。

はじめまして、takahashiです。

プロダクトのE2Eテスト（ユーザー視点でシステム全体を最初から最後まで全て操作するテスト）って大変ですよね。

何十、何百ものテストケースを一つ一つクリックしていく作業は最終的なプロダクトのクオリティを決定付ける最後のピースであり非常に大事なタスクです。

さて、世間はAIを利用した開発が一気に進んでおりますが、弊社も例外なく「GitHub Copilot」「Cursor」「CLINE」「Devin」などを取り入れています。

そんな中どうやら巷ではMCP（Model Context Protocol）という仕組みが隆盛であり、AIが様々な外部ツールやデータを操作するものらしいです。

特に最近Microsoftからオープンソースで提供された「Playwright MCP」に至っては非常にセンセーショナルで、生成AIに自然言語で指示を出すとブラウザを意のままに操り、アプリケーションを隅々まで理解して、最適なテストケースを自動で生成する事ができるというE2Eテストの救世主とも言える存在です。

github.com

大変なE2Eテストの一助になるべく、今回はCLINEを使用してPlaywright MCPを導入するまでの流れを簡単にご紹介したいと思います。

※CLINEとはVSCode上で動作するAIエージェントです

※今回はCLINEの導入方法は割愛させて頂きます（参考）

テストケース例：

会員制サイトのログイン画面にてログインが成功して次の画面に遷移できること
ログイン後に管理メニューのタブをクリックした後にマニュアルのリンクから別ウィンドウでマニュアル画面が表示できること

CLINEがPlaywrightの環境構築からやってくれますので、併せてテストケース1を実施するべく、まずはVSCodeでCLINEを立ち上げて下記の指示を出します。

Playwright用のE2Eテストを作成してください
PlaywrightのMCPを使って、URLに指定した環境にアクセスして要素を解析してください
解析した要素からE2Eテストを作成してください

# テスト内容
下記URLのログイン画面を表示し、ID/PASSを使ったログインをしてトップページが表示できることの確認

URL: {サイトのURL}
ユーザーID: {あとでテストコードを手動で直すので適当な値}
パスワード: {あとでテストコードを手動で直すので適当な値}

するとCLINEが手順を示して自動で環境作成やテストコードを作成してくれますので、あとはタスクが終わるまで他の作業でもしながら待ちましょう。

テストコードを作成する過程でPlaywrightで勝手にブラウザを立ち上げてHTMLの解析を始めて、最後はテストまで実行しますので、驚かずに毅然たる態度で見守ってください。

テストが実行されたらレポートをまとめてブラウザで表示してくれます。

テスト成功例：

テスト失敗例：

HTMLの要素がうまく解析できずテストが完了しない場合はレポート内に表示されるエラーログをテキストコピーして、その箇所についてCLINEにテストコードを修正してもらったり、簡単に対応できる内容であれば自身でテストコードを修正してもいいと思います。

ログインのテストが完了したら、2つめのテストケースでも使えるようにログイン処理部分は切り出しておきます。

login.spec.tsのログイン処理は他のテストでも利用するので汎用的に作ってください

次はテストケース2についてCLINEに指示を出します。

ログイン後のE2Eテストを作成してください。


# テスト内容
画面上部の管理メニューをクリックして管理画面に遷移して、
サイドメニューのマニュアルリンクから別ウィンドウでマニュアル画面が表示されること

アウトプットされたテストコードはこちら

openManual.spec.ts

テスト結果は割愛しますが、何回かCLINEと対話のラリーをして無事テストケース2も成功しました。

感想

UIの作りを自動で検知してテストコードに反映されるのは非常に夢のある技術だと思いましたが、正直まだまだ一発で完璧なテストコードを書いてくれることはありませんでした。
使用しているモデルがclaude-3.5-sonnetという事もあったかもしれませんが、モデルが更に進化したり色んなMCPが出現する事により、AIがE2Eテストを完全自動で実施できる日はそう遠くないかもしれません。

最後に、スパイダープラスでは仲間を募集中です。
スパイダープラスにちょっと興味が出てきたなという方がいらっしゃったらお気軽にご連絡ください。最後までご覧くださり、ありがとうございます。