はじめに
GMOコネクトの永田です。
E2Eテストの自動化、進めていますか？
「テストコード実装に工数がかかる」
「既存のテスト仕様書を活用できないか」
こんな悩みをお持ちの方に朗報です。今回はPlaywright MCPを使って、自然言語で書かれたテスト仕様書から、AIにブラウザ操作とテストコード生成を任せる方法を実践してみました。
前回記事でPlaywright Codegenの活用を紹介しましたが、今回はさらに一歩進んで「ブラウザ操作すら不要」なアプローチに挑戦します。
最初にまとめ
- Playwright MCPを使えば、自然言語のテスト仕様書からAIがブラウザ操作＆テストコード生成
- ブラウザ操作も不要、既存のテスト仕様書をそのまま活用可能
- リグレッション試験など繰り返し実施する試験の自動化に最適
Playwright MCPとは
自然言語でLLMに依頼した時、LLMがブラウザを操作するときのツール（MCP Server）です。
こちらの記事が分かりやすかったです。
Playwright MCPの導入
上記公式ページに導入手順が書いてありますが、要点のみメモしておきます。（VSCode利用）
(1) Playwright MCPのインストール
Node.jsで @playwright/mcp を導入するだけです。
$ node -v
v24.13.0
$ npm install -g @playwright/mcp@latest
(2) VSCodeにPlaywright MCPの設定を追加
プロジェクト直下の .vscode/mcp.json に以下を追記してください。
{
"servers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
],
"type": "stdio"
}
},
"inputs": []
}
(3) Playwright MCPの起動
VSCodeで見ると Start というボタンが上記JSONで表示されますので、これをクリックするだけです。
状態が Running になれば準備完了です！
試したE2E試験の観点
前回と同じく、GitLabのセキュリティ設定が正しいか？を、確認してもらいます。
-
gitlab_hardening.md抜粋
| 項目 | 概要 | 確認手順 | 確認観点 | 重要と判断した理由 |
|---|---|---|---|---|
| 2. ユーザー登録の制限 | 誰でもアカウントを作成できる状態を防ぎ、メール確認やドメイン制限を厳格化する。 |
Admin > Settings > General > Sign-up restrictions に移動する。 |
・Sign-up enabled のチェックが外されているか（招待制にする場合）。・ Email confirmation settings が Hard に設定されているか。・ Allowed domains for sign-ups に組織のドメインのみが指定されているか。 |
Self-Managed版がインターネットからアクセス可能な場合、登録制限がないと第三者が自由にアカウントを作成し、内部情報へアクセスを試みるリスクがあるため、侵入経路を塞ぐ上で最も効果的な設定の一つです。 |
Playwright MCPでの自動操作を試してみた
上記の試験観点に沿って確認するようGitHub Copilot Agent（Claude Sonnet 4.5）に依頼します。（パスワードはマスクしてあります）
gitlab_hardening.mdの「2. ユーザー登録の制限」の通りにGitLabが設定済みかを、確認して欲しい。
- playwright mcpを利用
- ログインURL: http://localhost:9010/
- アカウント情報
- ID: root
- Password: ********
PlaywrightをAgentが操作してログインを開始していますね😊
Allowで許可するとAgentがどんどんとブラウザを操作していきます。
最終的に、設定ページが表示されました。
そしてAgentが「確認観点」に沿ったチェック結果を報告してくれました！
今回は3つともNGの状態にしていたので、期待通り操作してくれていそうです。
試験の確認手順と確認観点がちゃんと整理されていれば（しつこいけど とても重要 ）、Playwright MCPを利用しての自動確認が容易に実現できるのが確認できました😊
一度の確認のみならここまでで良いのですが、実際にはリグレッション試験や複数環境などで、何度も実施することになると思います。
せっかくAgentがPlaywrightで操作してくれたので、それをそのままPlaywrightのテストシナリオに出来るととても楽ですよね！ ということで試します。
Playwright MCPの操作結果をもとに、Agentでテストシナリオ生成
上記と同じAgent Sessionで、追加で依頼してみます。
上記の操作結果を元に「2. ユーザー登録の制限」のチェックを
playwrightのテストシナリオ（TypeScript）として実装して欲しい。
実装にあたり不明点や確認事項があれば、実装前に確認すること。
実装にあたりいくつか質問してくれます。（利用するモデルによって、挙動は変わります）
適切に回答します。
1. 新規でPlaywrightプロジェクトを作成。ファイル名・ディレクトリ名はお勧めのもので良い
2. A.現状が要件通りか確認
3. Allowed domains: はgmo-connect.jpとし、それ以外は記載内容であっている
4. ひとまずハードコード
5. 一通り作成
6. スクリーンショットは取得。テストレポートも生成。CI/CD対応は不要
できました！😊
Playwrightテストシナリオの動作検証
実際にテストシナリオを動かして試してみます。
（なお、実務ではちゃんとソースコードレビューしてください）
Agentに依頼します。
作成したplaywrightテストシナリオを実行してください。
実行した結果Locatorが誤っていた、とのことでAgentが修正してくれています。
期待通り動作が完了しました！
Agentがサマリーでまとめてくれていて見やすいですね。
Playwrightのレポートも期待通り3つエラーとなっています。
Playwrightの機能で実行時のスクリーンショットと、操作時の動画が記録できますので、期待通りに動作しなかった場合、これを見て原因の切り分けがしやすいです。
最後に、GitLabの設定をOKとなる設定に変更して、再度試してみます。
gitlabの設定を更新したので、再度playwrightで「2. ユーザー登録の制限」を確認
期待通り、3つともOKになっていますね！
所感
今回のように、確認手順・確認観点を日本語や英語などの自然言語で記載しているケースは多いかと思います。
例えば、以下のようなケースが想定されます。
- 総合試験のシナリオ試験（E2E）
- 総合試験のリグレッション試験（E2E部分）
- チェックリスト、ガイドライン
特にリグレッション試験の場合、AsIsの正解状態がありますので、比較的容易に今回のようなテストコード生成の自動化が出来そうだと感じました。
「テストコード実装」と言われると工数かかりそうで面倒だな、となりますが、「既存のテスト仕様書」をもとに大部分を生成してもらえる（レビューは必要）、となるとどうでしょうか？
リリースのたびに実施しているリグレッション項目から、E2E試験の自動化をしてみようかな？と、思いませんか？😊
まとめ
- Playwright MCPを使えば、自然言語のテスト仕様書からAIがブラウザ操作＆テストコード生成
- ブラウザ操作も不要、既存のテスト仕様書をそのまま活用可能
- リグレッション試験など繰り返し実施する試験の自動化に最適
最後に、GMOコネクトではサービス開発支援や技術支援をはじめ、幅広い支援を行っておりますので、何かありましたらお気軽にお問合せください。