🤖

Playwright Test Agentsの使い方（VS Code）

に公開
Playwright
tech

Playwright Test Agentsの概要と使い方のメモ
※AIエージェントはVS Codeを利用

公式ドキュメント

https://playwright.dev/docs/test-agents

何ができる？

３つのモードでAIに指示を出せる

  1. テスト計画を作る(Planner)
  2. テスト計画を元にplaywrightテストコードを作成する(Generator)
  3. playwrightテストコードがパスするように修正する(Healer)

導入

  • Playwright1.56以上
  • VS Code1.105以上
  • 事前にPlaywrightテストエージェントの定義をプロジェクトに追加しておく
    • npx playwright init-agents --loop=vscodeで追加できる
      ※ Playwrightがアップデートされるたびに再生成する必要がある
    • コマンド実行後に各モードのAIプロンプト、mcp設定、seed.specが作成される
      • 🎭 planner.chatmode.md
      • 🎭 generator.chatmode.md
      • 🎭 healer.chatmode.md
      • mcp.json
      • seed.spec.ts

seed.spec

  • テストが開始される前の初期状態を設定するファイル
  • グローバルセットアップ等のテストに必要な初期化処理をこのファイルに記載することで事前処理を実行した状態でテストコードが生成される。
  • 事前処理が必要なければ特に設定しなくても良い。
  • テスト計画(Planner)作成時に読み込ませる。

使い方

  1. vscodeでAIチャットウィンドウを開く
  2. 使いたいモードに切り替えてプロンプトを入力する

テスト計画を作る(Planner)

  1. モードをplannerに切り替える
  2. seed.spec.tsを設定しコンテキスト追加で読み込ませる
  3. 「○○のテストを作成してください」等のプロンプトを入力
    ※合わせて製品要求ドキュメント等があれば入力するか読み込ませる

テスト計画を元にplaywrightテストコードを作成する(Generator)

  1. モードをgeneratorに切り替える
  2. Plannerで作成した.mdファイルをコンテキスト追加で読み込ませる
  3. Plannerで作成した.mdファイルの中を確認し作成して欲しいテストをプロンプト入力する
    （例）（「### 1. ユーザー登録機能のテストを作成してください」

playwrightテストコードがパスするように修正する(Healer)

  1. モードをhealerに切り替える
  2. 修正したいspec.tsをコンテキスト追加で読み込ませる
  3. 「このテストを修正して」等のプロンプト入力する

Discussion