zzzkan.me

VSCodeだけでGitHub Copilotによるブラウザ操作自動化が完結するようになってる

Agentic browser tools

VSCode v1.110から実験的な機能としてAgentic browser toolsが追加されました。

workbench.browser.enableChatToolsを有効にすると、Browser Toolsとして以下が使えるようになります。

  • clickElement
  • dragElement
  • handleDialog
  • hoverElement
  • navigatePage
  • openBrowserPage
  • readPage
  • runPlaywrightCode
  • screenshotPage
  • typeInPage

Playwright MCPとかplaywright-cliとかインストールすることなく、VSCodeだけでGitHub Copilotによるブラウザ操作自動化がはじめられます。PRをパッと見るとPlaywrightを組み込んでいるみたいです。runPlaywrightCodeを使えばPlaywrightのコードも直接実行させることもできるようです。

試してみる

Build and test web apps with browser agent tools

に手順が書いてるのでこれを見てください。

たとえば、スクリーンショットも撮れるので、エージェントにある実装を開始させる前にUIのスクリーンショットを撮らせておいて、実装完了後にもう一度スクリーンショットを撮らせて、実装前と実装後のUIの違いを確認する（いわゆるVRT: Visual Regression Testing）みたいなこともできそうです。

以下実際にページ内容を変更してVRTしてもらったときの差分スクリーンショット：

ページ変更後の差分画像

すごい。

ただ、画像比較は組み込みツールだけではできなさそう？でした。上記画像はSystem.Drawingで差分画像を作成したみたいです、GPT-4.5 miniさんが。もしかしたら、画像比較のSkillとかを仕込んでおいてもいいのかもしれないですね。

VSCodeの組み込みBrowserは今後も強化されていきそう

v1.112で組み込みブラウザでのデバッグが追加されていたりしていて、組み込みブラウザの機能強化が進められているみたいです。エージェントに実装させた後、ブラウザレベルのテストも簡単に自動実行させられるようになっていきそうですね。