3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

github copilot agentで自動ブラウザテストができるようにする(初心者向けVer)

Last updated at Posted at 2025-09-13

他にもいろいろ記事はありますが、setting.json/mcp.jsonを修正する方法かと思います。
現在はGUIで設定が完結するのでその方法を記載しておきます。

事前準備

Playwrightのインストール

https://github.com/microsoft/playwright-mcp
にアクセスする
image.png

ページ中断に「VS Code」という項目があり、押すとこのようなボタンがあるので押す
image.png

Visual Studio Codeを開くを押す
image.png

Installを押します
image.png

Install環境後にStart Serverを押しサーバーを起動します。
(グレーアウトしていればすでにサーバーが起動している状態です。)
image.png

Github Copilot Agentのチャット欄の右下にあるスパナマークを押し
image.png

画面上部に表示された一覧の中にMCP Server: Playwrightが含まれていれば準備完了です。
image.png

テストさせる

「playwrightで」と試験を促せば、ブラウザが立ち上がりWebアプリのテストをしてくれます。2回目からはわざわざ「Playwrightで」と言わずとも勝手に使ってくれますが、初回は使ってくれない傾向があります。
(instructions.md等に実装後の試験をPlaywrightで行う旨をあらかじめうながすのが便利だと思います。)
image.png

3
3
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
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?