GitHub Copilot Coding Agent の Update として次の 2 つのアナウンスがありました。
- 2025/07/02: Copilot coding agent now has its own web browser
- 2025/07/03: Agents page for GitHub Copilot coding agent
この中で、Copilot coding agent now has its own web browser として、Coding Agent でデフォルトで Playwright を使用することができるようになったというアップデートがありましたので、試してみました。
標準で Playwright MCP Server が追加された状態となる
冒頭に紹介した Update の内容に Agents page for GitHub Copilot coding agent がありますが、Copilot のページ (Chat with Copilot) に「Agents」が追加され、このページからも Coding Agent に対してタスクの実行を依頼することができるようになりました。(リポジトリを横断して Coding Agent のタスクを確認することができますので、確認画面としても使用することができます)
この画面を使用して、Playwright を使用して次のような作業の依頼をしてみます。
Welcome ページを日本語で作成してください。
作成後、Playwright を使用して、ページへのアクセスを確認し、表示されたページのスクリーンショットを共有してください。
Coding Agent には MCP Server を追加 することができますが、今回のアナウンスであったように標準で Playwright MCP server が追加された状態となりました。
以下は Coding Agent のカスタマイズをしていない状態でタスクを実行した際のログとなるのですが、ログからも、Playwright MCP Server がデフォルトでが有効になっていることが確認できます。
上述のプロンプトの実行が完了すると PR に次のようなスクリーンショットが取得された形でコメントが行われます。
日本語が表示された状態のスクリーンショットを取得させる
初期状態の Coding Agent の実行環境では、日本語のフォントが入っていませんので、Playwright でスクリーンショットが取得されても文字化けした状態となっています。
プロンプトで次のような指示をすることで、タスク内で日本語フォントのインストールを行うように誘導することができます。
期待した表示になっておらず、画面キャプチャは文字化けしています。
Playwright を実行している環境に日本語フォントがインストールされていないことが原因と考えられます。
HTML に日本語フォントを指定するだけでなく、Playwright を実行している環境に HTML に指定した日本語フォントをインストールして再度画面キャプチャを取得してください。
上記のプロンプトであれば、タスク内で次のようなコマンドが実行されるように誘導できていました。
apt-get update && sudo apt-get install -y fonts-noto-cjk fonts-ipafont fonts-ipaexfont fonts-takao fonts-vlgothic
確実にフォントのインストールが行われるようにするには、Customizing the development environment for Copilot coding agent の方法で、「.github/workflows/copilot-setup-steps.yml」を使用して、Copilot の実行環境のカスタマイズをするのが良いかと思います。
name: "Copilot Setup Steps"
on:
workflow_dispatch:
push:
paths:
- .github/workflows/copilot-setup-steps.yml
pull_request:
paths:
- .github/workflows/copilot-setup-steps.yml
jobs:
copilot-setup-steps:
runs-on: ubuntu-latest
permissions:
contents: read
steps:
- name: Install Japanese Font
run: |
sudo apt-get update && sudo apt-get install -y fonts-noto-cjk
このようなファイルを「.github/workflows/copilot-setup-steps.yml」に設定しておくと、タスクが実行された際にフォントのインストールが行われます。
この設定をしている状態で、先ほどと同一のプロンプトで新しいタスクを実行したところ、今回は文字化けせずに正常に日本語を表示させることができました。(新しいタスクとして Welcome ページの作成から実行しているので、ページのレイアウトは先ほどとは変わっています)
今回は作成したページの確認で Playwright を使用しましたが、様々なユースケースでブラウザへのアクセスと結果の取得の指示を入れることができるのではないでしょうか。