Github Copilotでブラウザを制御する
Playwright MCPというものが出たようなので、Copilotから使用してみました。
実際の設定方法や、少し使ったところをレビューしました。
設定方法など、すぐ古くなるかもしれません。
前提技術、ツール
- VSCode Insiders
- VSCのInsidersバージョンを使用しました。現時点で、Copilotのエージェントモードを使用するためです。またInsidersバージョンでしかMCPは使えないようです。
- nodejs
- Playwrightを動かすため
- Playwright
- コードでブラウザを制御するライブラリです。
- プロジェクトで使用できるようにしてください。
- Github Copilot
- Github Copilotも必要です。Insidersを使用すると、拡張機能は最初からインストールされています。
- 使用できるように設定等お願いします。
- MCP(Model Context Protocol)
- LLMがAPIとして制御する方式です。今回は、Playwright MCPになります。
- Playwright MCPはサーバ側になります。
- ユーザがCopilotに指示を出し、CopilotがMCPを通じて、Playwright MCPにアクセスし、ブラウザを制御します。
- Playwright MCPが？Playwrightのスクリプトを作成してくれます。
設定方法
-
上記を参考に設定しましたが、ところどころ、違いました。今後も変わるかもしれません。
-
まず、
.vscode\mcp.jsonを以下のように作成しました。
{
"servers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
-
@playwright/mcp@latestのインストール
npm install -D @playwright/mcp@latest
- Playwright MCPサーバの起動は
Startボタンを押してください。起動後Runnningに変更されます。エラーになった場合は、ログを確認してください。
- Copilot Chatの設定ボタンを押し、Playwrightが接続できているか確認する。
実際に動かしてみる
- Copilotをエージェントモードに設定し、下記を入力する。
playwrightで`https://www.yahoo.co.jp/`を開き、天気を確認してください。
-
下記のような結果が出ました。
-
Playwrightのスクリプトを自動で作成してくれました。
-
実行したところエラーになりました。残念
-
作成されたファイルの内容
tests\checkWeather.spec.ts
import { test, expect } from '@playwright/test';
test('Check weather on Yahoo Japan', async ({ page }) => {
// Yahoo! JAPANのトップページを開く
await page.goto('https://www.yahoo.co.jp/');
// 天気情報のセクションを探す
const weatherSection = await page.locator('text=天気');
// 天気情報が存在することを確認
await expect(weatherSection).toBeVisible();
// 天気情報をクリックして詳細を確認
await weatherSection.click();
// 詳細ページで天気情報が表示されていることを確認
const weatherDetails = await page.locator('text=天気予報');
await expect(weatherDetails).toBeVisible();
});
別の結果
結果
- Github Copilotでブラウザを制御することが確認できた。
- @playwright/mcpはPlaywrightコードをLLMから作成できます。
- 可能性を大いに感じる結果になった。
- プロンプトを改良すれば、良いテストも作れそう。
- 今後、テストはマークダウンを使用し、日本語で記述し、テストを生成することができる。
- @playwright/mcpを使用しそのテスト自体も生成AIで作成することもできそう。