概要
過去に puppetter を使いましたが vscode + copilot がいい感じらしいのでそっちも試してみます
環境
- Windows 11
- VSCode 1.122.1
- microsoft/playwright -mcp 0.075
- node 24.16.0
事前作業
nodejs が必要なのでインストールしましょう
https://nodejs.org/ja/download
インストール
拡張機能の一覧から playwright-mcp をインストールできるのでそこからインストールしましょう
@mcp playwright で検索しインストールしましょう
検索できない場合は settings.json で以下を追加します
{
"chat.mcp.gallery.enabled": true
}
なおこの設定は C:\Users\username\AppData\Roaming\Code\User\mcp.json にあります
{
"servers": {
"microsoft/playwright-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"@playwright/mcp@latest"
],
"gallery": "https://api.mcp.github.com",
"version": "0.0.1-seed"
}
},
"inputs": []
}
起動する
インストールした MCP の設定ページから起動します
「Start Server」で起動できます
起動ログが下部のターミナル画面に表示されるので問題なく表示されることを確認しましょう
自動起動したい場合は settings.json に以下を追加しましょう
{
"chat.mcp.autostart": "newAndOutdated"
}
動作確認
copilot のプロンプトに以下のように入力しましょう
https://hawksnowlog.blogspot.com/ にアクセスしホームページのスクリーンショットを送ってください
これで別途ブラウザが起動しスクリーンショットを保存してくれます
スクリーンショットは png 形式で開いているプロジェクトのルートに保存されます
また .playwright-mcp というディレクトリが作成され処理中のファイルが保存されるので不要であれば .gitignore に追加しておきましょう
プロンプトが雑だと「Sorry, the response matched public code so it was blocked. Please rephrase your prompt.」になるので playwright-mcp が反応してくれそうなワード (例えばスクリーンショットを取得してやここをクリックしてなど) をプロンプトに追加するようにしましょう
最後に
VSCode + copilot + playwright mcp でブラウザを自動操作してみました
設定自体はかなり簡単です
問題はブラウザのプロファイルで完全に新規のプロファイルになるのでセッション情報などがありません
つまりログイン済みのページや認証が必要なページなどはアクセスできません
このあたりも解決方法があれば紹介したいと思います
