Playwright MCP サーバーを使ってテストを自動生成する (2025-10)

プロジェクト準備

とりあえず Playwright を試すためのプロジェクトを作成

code:init-project

npm init playwright@latest playwright-test-agents-sandbox

npx

create-playwright playwright-test-agents-sandbox

Getting started with writing end-to-end tests with Playwright:

Initializing project in 'playwright-test-agents-sandbox'

√ Do you want to use TypeScript or JavaScript? · TypeScript

√ Where to put your end-to-end tests? · tests

√ Add a GitHub Actions workflow? (Y/n) · true

√ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true

code:init-agents

npx playwright init-agents --loop=vscode

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: tests\seed.spec.ts

まずは planner agent を使ってテストを作成

https://gyazo.com/0b89f6abff32fd561ebf0fb30ea0efc4

次に、上記で作成された Markdown をコンテキストに、generator agent でテストを生成

https://gyazo.com/3452c7db80723075d6657a5a6644b182

うまく動かないテストがある場合、healer agent で修正

https://gyazo.com/86587b994dc09275fa2268b940f6b338

便利！

参考文献