🧪

Playwright Agentsを使ったテスト計画・コード・自動修復のサイクル検証

に公開
Playwright
Model Context Protocol
テスト自動化
tech

はじめに

Playwright公式が、テストの計画・実装・修正を行うエージェントを提供し始めたようなので試してみる。
https://playwright.dev/docs/test-agents

Playwright Agentsを使ってみる

環境

  • Windows11上のWSL2 (Ubuntu)

事前準備

Playwrightインストール

npm init playwright@latest

https://playwright.dev/docs/intro

手順

1. Playwright Agentをインストール

npx playwright init-agents --loop=vscode

コマンドを実行したディレクトリに、いくつかファイルが生成されている

Need to install the following packages:
playwright@1.56.1
Ok to proceed? (y) y

Writing file: .github/chatmodes/🎭 generator.chatmode.md
Writing file: .github/chatmodes/🎭 healer.chatmode.md
Writing file: .github/chatmodes/ 🎭 planner.chatmode.md
Writing file: .vscode/mcp.json
Writing file: seed.spec.ts

2. VSCode Insidersを起動

CopilotのChatペインに、エージェントが増えている。
chat-pain

3. エージェントにテスト計画してもらう

ローカルに適当なアプリを立ち上げた上で、plannerエージェントに以下を指示。
planner-instruct

仕様書を生成してくれた。
planner-gen1-1
planner-gen1-2

同じコンテキストで、テスト計画書作成もお願いしてみる。
test-plan-instruct
test-plan

4. テストの実装

generatorエージェントにテスト計画に沿ったテスト実装を指示。
test-gen-instruct

テストコードをもりもり作成していく。

// spec: docs/webapp-test-plan.md
// seed: tests/seed.spec.ts
// Scenario: 5.5 サインアップ（正常系）
import { test, expect } from '@playwright/test';

test.describe('シナリオ 5.5 サインアップ（正常系）', () => {
  test('5.5 サインアップ（正常系）', async ({ page }) => {
    // 1. /register を開く
    await page.goto('http://localhost:4200/register');

    // 2. Username/Email/Password を有効値で入力
    const username = `e2e_signup_${Date.now()}`;
    const email = `${username}@example.com`;
    await page.getByRole('textbox', { name: 'Username' }).fill(username);
    await page.getByRole('textbox', { name: 'Email' }).fill(email);
    await page.getByRole('textbox', { name: 'Password' }).fill('Passw0rd!');

    // 3. Sign up をクリック
    await page.getByRole('button', { name: 'Sign up' }).click();

    // 期待結果: Home に遷移、ヘッダがログイン状態に変化
    await expect(page.getByRole('link', { name: 'New Article' })).toBeVisible();
    await expect(page.getByRole('link', { name: 'Settings' })).toBeVisible();
    await expect(page.getByRole('link', { name: username })).toBeVisible();

    // 期待結果: LocalStorage に JWT 保存
    const token = await page.evaluate(() => window.localStorage.getItem('jwtToken'));
    expect(token, 'jwtToken should be set in localStorage').toBeTruthy();
  });
});

images/playwright-test-poc/fail-result

  • たくさん失敗している

テストの修正

ヒーラーエージェントに修正をお願いしてみる。
healer-agent

  • 何回かやりとりしたらすべてPassedになった
    all-passes

おわりに

  • 雑に使ったけど、結構使いやすかった
  • テスト自動化のとっかかりとしては良いかも
  • MCP活用してもっと開発効率上げていきたい。
  • テストケースとして価値があるのか、実装は妥当かなどチェックはいる
    • それ自体もプロンプトにいれるべき

補足：Playwright Agentsの実装調査

GitHubで編集を提案

Discussion