GitHub Copilot(AI) と Playwright MCPを使ってE2E(エンドツーエンド)の自動テスト作成を快適にするお話です。
Playwrightとは
Microsoftが開発したブラウザ自動化ツールでE2E(エンドツーエンド)の自動テストなどに用いられます。
Playwright MCP(Model Context Protocol) はブラウザを直接操作できるようにするプロトコルになります。
Playwright MCPの利用準備
※Visual Studio Code + GitHub Copilot でPlaywright MCPを使う手順になります。
- Visual Studio Code のショートカット Ctrl + Shift + P でコマンドパレットを表示する
- settings.jsonファイルを開く
- mcp > server > playwright項目に以下を設定する
"mcp": {
"servers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
- Playwrightの上部に表示される「Start」をクリックする
- GitHub CopilotをAgentモードにする
AI + Playwright MCPを使ったE2E自動テスト作成のイメージ
基本的なステップとしては以下の3つ
- テストを作成する画面をブラウザで開く（Playwright MCP）
- 開いた画面の操作可能な要素を抽出する
スナップショット（画面を構成するTree情報）を取得する（Playwright MCP）
スナップショットを元にPageオブジェクトのクラス（操作部品を定義したクラス）を生成する（AI） - 生成したPageクラスを使ってテストを作成する（AI）
この流れを図にすると以下のようなイメージです。
この手順である程度のテストが作れてしまいます。
AIのここに感動
日付の範囲を選択するようなUIがあり、GitHub Copilotに日付範囲を選択する関数の作成を指示します。
[GitHub Copilotへの指示]
日付範囲を指定する関数を作成してください
引数はstart: 2025/5/20 end: 2025/6/10 のようにstartとendを指定できるモノにしてください
すると以下のように、開始日を指定 → 終了日を指定する処理をサクッと作成します。
引数に渡された年月が表示されている年月と異なれば、ちゃんと移動もしてくれるように実装されています。
※AIが生成するものなので、利用者が生成されたコードの良し悪しの判断が必要です。
/**
* 日付範囲を指定する
* @param {string} start 開始日（例: '2025/5/20'）
* @param {string} end 終了日（例: '2025/6/10'）
*/
async selectDateRange(start: string, end: string): Promise<void> {
// 開始日・終了日をDate型に変換
const [startY, startM, startD] = start.split('/').map(Number);
const [endY, endM, endD] = end.split('/').map(Number);
// 開始日を選択
await this._selectDateInDialog(startY, startM, startD);
// 終了日を選択
await this._selectDateInDialog(endY, endM, endD);
}
/**
* 日付範囲ダイアログで指定した日付を選択する
* @param {number} year 年
* @param {number} month 月
* @param {number} day 日
*/
private async _selectDateInDialog(year: number, month: number, day: number): Promise<void> {
// 月のラベルが一致するまで前/次ボタンで移動
let currentLabel = await this.dateRangeMonthLabel.textContent();
while (!currentLabel?.includes(`${year}年${month}月`)) {
// 年月が進みすぎていたら前月、足りなければ次月
const [labelYear, labelMonth] =
currentLabel
?.match(/(\d{4})年(\d{1,2})月/)
?.slice(1, 3)
.map(Number) || [];
if (labelYear > year || (labelYear === year && labelMonth > month)) {
await this.dateRangePrevMonthButton.click();
} else {
await this.dateRangeNextMonthButton.click();
}
currentLabel = await this.dateRangeMonthLabel.textContent();
}
// 指定日をクリック
await this.dateRangeDayOptions
.filter({ hasText: String(day) })
.first()
.click();
}
最後に
今回GitHub Copilot + Playwright MCPを使ってみて、E2E自動テスト作成の効率が大幅に向上する未来が見えました。
今後は操作する部品の抽出や、細かな操作処理の作成はある程度AIに任せられそうなので、快適な自動テストライフを送れるのではないかと期待しています。
