🎭
Playwright MCPとQAエージェントによるGitHub Copilot活用

takoeno
2025/12/21に公開
VS Code
Playwright
Model Context Protocol
GitHub Copilot
Agent
tech
 はじめにこの記事は、MEKIKI X AIハッカソンもぐもぐ勉強会 Advent Calendar 2025の21日目です。

今回は、ちょっと高度なGitHub Copilotの使い方をご紹介します！
GitHub Copilotを使い始めると、まずはインライン補完やCopilotチャットでの質問、コード説明といった基本機能から試される方が多いと思います。これだけでも十分便利ですが「GitHub Copilotが外部ツールと連携するとどんな使い方ができるのか」「カスタムエージェントを定義すると振る舞いはどう変わるのか」といった点は実際に触れてみないとなかなかイメージしにくいところです。
そこで、GitHub CopilotがMCP連携とカスタムエージェント機能を通じて、外部ツールとどのように連携し、チャットの振る舞いをどう変えられるのかについて、実際に試してみた内容をご説明します。
題材として、今回はPlaywrightMCPというブラウザ自動操作用のMCPサーバーとQA向けカスタムエージェントという二つの例を取り上げます。
※Playwrightや、テスト自動化そのもののノウハウの深掘りではなく、「GitHub Copilotから外部ツールを呼ぶとこう動く」「エージェントの定義を変えると応答がこう変わる」という挙動の確認に焦点を置いています。
なおPlaywright自体の概要は、既に当社テックブログに詳しい記事がありますので本稿では詳細説明を割愛しそちらを参照していただく前提とします。

https://zenn.dev/nttdata_tech/articles/c7dc65b3977e9a

 GitHub Copilotのエージェント機能とMCP概要最初に、本記事で前提とする二つの機能を簡単に整理します。
1つ目は、Visual Studio Code(以降、VSCodeと記載)上のGitHub Copilot ChatのAgent Modeです。VSCodeのCopilot ChatにはAsk/Edit/Agent/Planといったチャットモードが用意されており、このうちAgent Modeでは、チャットを通じて複数ファイルの編集やターミナル操作などを自律的に進めてもらうことができます。さらにリポジトリ配下の.github/agentsフォルダなどに配置した.agent.mdファイルで、エージェントの役割や守るべきルール、使用してよいツールなどを定義できるカスタムエージェント機能も提供されています。これにより、例えばテスト専用/レビュー専用といったエージェントをプロジェクトごとに用意することができます。

2つ目が、MCP(ModelContextProtocol)です。MCPは、大規模言語モデルと外部ツールやデータソースをつなぐためのプロトコルです。GitHub Copilotは、このMCPに対応したサーバーを「ツール」として利用できるようになっており、ブラウザ自動操作や社内システムへの問い合わせ、データベース参照などを拡張的に呼び出せます。本記事では、MCPの仕様そのものには踏み込まず「Copilotから外部ツールを安全に呼び出すための共通の約束事」として扱うにとどめます。

 今回使用するTodoアプリブラウザ操作の対象として、今回はPlaywright公式デモのTodoMVCアプリを利用します。
画面中央の入力欄に、タスク名を入力してEnterキーを押すと、タスクが追加されチェックボックスで完了状態にできます。画面下部のAll/Active/Completedボタンを切り替えると、全件/未完了のみ/完了のみといった形で表示内容が変わります。非常にシンプルですが、テストの題材としてよく利用されるアプリです。

 Playwright MCPの設定最初のステップはGitHub CopilotからPlaywright MCPをツールとして利用できるようにすることです。

今回は、VSCodeを前提としているため、こちらのPlaywright MCPのGitHubリポジトリから、「Click the button to install」を押下してください。
VSCodeを再読み込みし、Copilot Chatを開くと、ツール一覧にplaywrightが表示されれば設定は完了です。
MCPサーバーの登録方法には、他にもユーザープロファイル側で共通設定として追加する方法や、設定画面からGUIで登録する方法などがありますが、本記事ではその他の導入方法は割愛します。

 Playwright MCPによるTodoアプリ操作MCP設定が整ったら、次はPlaywright MCPでブラウザ操作を体験します。ここでは通常のCopilotエージェントを選び、Playwright MCPをツールとして呼び出します。

 ブラウザ操作を指示するCopilot Chatで次のようなプロンプトを送ります。
Playwright MCPを使って https://demo.playwright.dev/todomvc/ を開いてください。
次の操作を順番に行ってください。

1."taskA" "taskB" "taskC"という3つのTodoを登録する。
2.1件目のTodoを完了にする。
3."Active"フィルタを押して表示されるTodoの内容を確認する。
4."Completed"フィルタを押して表示されるTodoの内容を確認する。

実際にブラウザを操作した結果を、日本語で手順付きで要約してください。
Playwrightのコードを提案するのではなく、Playwright MCPで操作してください。
正しく設定できていれば、GitHub CopilotはPlaywright MCPを呼び出して、実際にブラウザを起動し、指定した順序で操作を行います。
ここで重要なのは、まだPlaywrightのAPI等を１行も書いていないという点です。「ブラウザで何をしたいか」を自然言語で伝えるだけで、操作と結果の記録まで行ってくれるため、テスト観点のラフな確認や動作メモの作成に向いています。

 スクリーンショット取得を指示する同じ要領で画面のスクリーンショット取得も指示できます。
PlaywrightMCPを使ってhttps://demo.playwright.dev/todomvc/を開き初期状態の画面をscreenshot-before.pngという名前で保存してください。
その後Todoを2件追加し1件だけ完了にした状態でscreenshot-after.pngという名前で保存してください。
テキストでの説明に加えて、状態ごとの画面キャプチャも残しておくことで、「どの状態の画面を指して議論しているのか」を後から確認しやすくなります。手作業で同じことを行う場合は、入力やクリックのたびに、メモやスクリーンショットを取る必要がありますが、Playwright MCPを使うとチャット一往復で、同じ情報を取得できる点が大きな利点です。

 QA向けカスタムエージェントの利用Playwright MCP単体での操作感をつかんだら、次はGitHub Copilotのカスタムエージェント機能を使ってQA向けのエージェントを定義し、そのエージェントからPlaywright MCPを利用してみます。

 要件サンプルの作成今回は、次のような簡易的な要件メモをdocs/story-add-todo.mdとして用意します。
# story-add-todo

## 概要

ユーザーはTodoリスト画面で新しいTodoを追加し完了にしフィルタで表示を切り替えたい。

## 受け入れ条件

- 新しいTodoをテキスト入力してEnterを押すとリストに追加される。
- チェックボックスをクリックするとTodoを完了状態にできる。
- "All" "Active" "Completed"フィルタで表示が切り替わる。
- ページリロード後もTodoが保持されている。
ここでは、対象とする機能を1つに絞り「何ができればよいか」を短くまとめています。

 カスタムエージェントの定義VSCodeのワークスペース直下に.github/agentsフォルダを作成しその中にqa-tester.agent.mdを配置します。内容の一例は次のとおりです。
---
name: qa-tester
description: Webアプリのテストを担当するQA専用エージェントです。要件単位でテスト設計から、Playwright実装結果サマリまでを相談しながら進めます。
tools:
  - read
  - edit
  - search
  - playwright/*
---

あなたはWebアプリケーションのQAエンジニアです。
対象システムは Todoアプリ(https://demo.playwright.dev/todomvc/)です。

## 役割

- 1つの要件ごとにテスト観点の整理から テスト実装改善提案までを担当します。
- いきなりコードを書くのではなく、必ず次の3ステップで進めてください。 1)計画 2)実装と実行 3)結果の整理と改善提案

## 3 ステップの作業フロー

1. 計画

- まず、readやsearchツールで、仕様や既存コード既存テストを確認してください。
- どの要件をどの観点でテストするかを日本語で整理します。
- テストケース案を箇条書きで提案し、「この方針で実装してよいか」をユーザーに必ず確認してください。

2. 実装と実行

- ユーザーがOKしたテストケースだけ、Playwright MCPと@playwright/testを使って実装します。
- テストコードはtests/配下のファイルにまとめてください。
- 必要に応じて、Playwright MCPでブラウザを操作し、挙動を確認してからテストを書いてください。

3. 結果の整理と改善提案
- テスト実行結果から、各テストのPASS/FAILを整理してください。 
- 失敗テストの原因候補や、追加したほうがよいテスト観点があれば、箇条書きで「改善策」として提案してください。

## 応答スタイル

可能な範囲で次の4項目を含めて返答してください。

1. 理解したことユーザーの指示の理解。
2. 行ったこと/行うこと、このターンでしたこと/これから行うこと。
3. 操作したファイル、読み取った・編集したファイルと要約。
4. 次のステップと質問、次のアクションと確認したいこと。
このファイルを保存するとCopilot Chatのエージェント選択欄にqa-testerが現れます。以降はこのエージェントを選んだ状態でチャットを行うことでテスト専用の振る舞いをさせることができます。

 カスタムエージェントとの会話の進め方qa-testerを選択した状態で次のように依頼します。
story-add-todoという要件をテスト対象にします。
まず、計画ステップとしてdocs/story-add-todo.mdを読んで、テスト方針とテストケース案(正常系と異常系)を日本語で提案してください。
まだコードは書かないでください。
qa-testerは、受け入れ条件を読み取り、「新規追加の正常系」「空文字入力時の扱い」「フィルタ切り替え時の表示確認」などの観点ごとにテストケース案を整理し「この方針でPlaywrightテストを実装してよいか」を確認してきます。
方針に問題がなければ次のように実装を依頼します。
今提案してくれたテスト方針とテストケース案で進めて問題ありません。
実装と実行ステップに進んでください。
テストコードはtests/story-add-todo.spec.tsに実装してください。
必要に応じてPlaywright MCPでTodoMVCの挙動を確認してからテストを書いてください。
ここでもqa-testerは、どのテストがどのテストケースに対応しているかを、文章で説明してからコードを提示する傾向があります。テストコードだけでなく、「何を意図したテストなのか」がチャットログに残るため、後からレビューやふりかえりを行いやすくなります。

 通常のAgentとの振る舞い比較同じ要件に対して、通常のCopilotのAgentと、qa-testerのAgentの両方にテスト実装を依頼してみると、振る舞いの違いが見えてきます。
1つ目のパターンとして通常のCopilotエージェントを選択しdocs/story-add-todo.mdをコンテキストに含めたうえで次のように依頼します。
docs/story-add-todo.mdを読んでこの要件に対するE2Eテストの方針とPlaywrightのテストコード例をまとめて提案してください。
多くの場合、通常のCopilotは簡単なテスト方針の説明とともに、Playwrightのテストコードをすぐに提示してくれます。コードサンプルを早く得たいときには非常に便利ですが、異常系や境界値といった観点はプロンプトで明示しない限り、十分には掘り下げられないことがよくあります。
2つ目のパターンとしてエージェントをqa-testerに切り替え次のように依頼します。
story-add-todoという要件をテスト対象にします。
計画ステップから始めてください。
qa-testerは役割として、「まず計画から入りテストケース案を整理する」よう定義されているため、

最初にテスト観点の一覧やシナリオごとの手順案を丁寧に返してきます。テストコード自体は、人間が方針に同意した後で、改めて依頼したときに生成されることが多くなります。
どちらが優れているという話ではなく、「同じCopilotでもエージェント定義とプロンプトの設計次第で力の入れどころが変わる」と考えています。

 おわりに本記事では、Playwright MCPとQA向けカスタムエージェントを通じて「Copilotが外部ツールと連携するときの姿」と「エージェント定義によって振る舞いがどう変わるか」を紹介しました。
ポイントをまとめると次の三つです。
Playwright MCPを利用すると、ブラウザ操作やスクリーンショット取得を自然言語だけで指示でき、テスト観点の共有や動作確認メモの作成を効率化できる。
QA向けカスタムエージェントを定義すると「計画→実装→振り返り」というような振る舞いを定義した上での進め方をCopilotに促せる。
同じ要件でも、通常のCopilotとカスタムエージェントでは応答の傾向が変わり、プロジェクトに合わせて「どこに時間をかけるか」を調整できる。
すでにCopilotの基本機能を一通り試された方は、今回の内容をきっかけに、MCP連携やカスタムエージェントといった周辺機能にも少しずつ触れてみていただければと思います。
NTT DATA TECH
NTT DATA公式アカウントです。技術を愛するNTT DATAの技術者が、気軽に楽しく発信していきます。当社のサービスなどについてのお問い合わせは、お問い合わせフォーム nttdata.com/jp/ja/contact-us/ へお願いします。
設定によりコメント欄が無効化されています