株式会社GENZが運営する技術ブログです。

  1. テスト自動化
  2. 24 view

Playwright Agents入門:AIがテスト設計・生成・修正をサポートする時代へ

テスト自動化をコーディングで行う際によく使われるツールのひとつに「Playwright」があります。
Webブラウザを操作して、UIテストを自動実行できるこのフレームワークは、安定性とマルチブラウザ対応の両立で多くの現場に採用されています。

そして最近、新たにリリースされたのが 「Playwright Agents」。
AIを活用してテストの設計・生成・修正を支援する機能で、従来よりも効率的な自動化を実現できる可能性があります。

本記事では、Playwright Agentsとは何か、Playwrightとの違い、環境構築の手順、そして実際の使用例までを入門向けにわかりやすく紹介します。

1. Playwright とは何か?

まずはベースとして、Playwright(プレイライト)が何かを整理しておきましょう。
Playwright は、元々ブラウザの操作を自動化・テストするためのフレームワークで、複数のブラウザ(Chromium / Firefox / WebKit)を横断して同じ API で操作できるのが特徴です。

例えば「ページを開く」「ボタンをクリックする」「テキストを入力する」「結果を確認する」といった一連の操作を、自動化できます。

テストエンジニアとして特に嬉しいのは、「不安定な(flaky)テストを減らすように設計されている」という点です。
Playwright は auto-wait 機構(要素が操作可能になるまで自動待機)を持ち、テスト失敗の原因となる ちょっと待つべきだった というタイミングのズレを減らすよう作られています。

Playwrightについては以下の記事もご覧ください。
【テスト自動化】VScodeでPlaywrightを使って、自動でE2Eテストを行う~前編~
ゼロから始める!Appium + Python環境構築ガイド(Windows対応)
ゼロから始める!PlaywrightでのAndroidテスト環境構築ガイド(Mac編)

2. Playwright Agents とは?

最近、Playwright に「Agents(エージェント)」という機能が加わりました。
これは自動化スクリプトをただ書くだけから一歩進んで、「テストプランを立てる」「スクリプト化する」「壊れたら直す」という流れをAIエージェントが補助してくれるというものです。

具体的には、以下の3つのエージェントが用意されています。

Planner(プランナー):どんなテストシナリオが必要かテストプランをMarkdown形式で出力します。
Generator(ジェネレータ):プランを元にテストコードファイル .spec.ts を生成します。
Healer(ヒーラー):テスト実行時に失敗したり、フレークしやすかったりするテストを自動的に修正・対応するよう支援します。

この仕組みにより、テスト自動化の初期構築やメンテナンスにかかる工数を削減できる可能性があります。
「テストがポンポン壊れる…」「更新のたびにテスト直すのがしんどい…」という悩みを持つテストエンジニアには、有力な選択肢となります。

3. 環境構築

それでは、ここからは実際に使ってみるためのセットアップをざっくり紹介します。

3.1 Playwrightをインストール

% npx -y create-playwright@latest
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
? Do you want to use TypeScript or JavaScript?		# お好きな方を
? Where to put your end-to-end tests?			# そのままでOK
? Add a GitHub Actions workflow?				# そのままでOK
? Install Playwright browsers (can be ..長いので省略)	# そのままでOK

インストール処理が走り、以下が表示されたらPlaywrightのインストールは完了です。

Happy hacking! 🎭

Playwrightのバージョン確認(Playwright Agentsは1.56以上が必要です)を行います。

% npx playwright --version
Version 1.56.1

3.2 Playwright Agentsの定義を導入

Playwrightをインストールした場所でそのまま以下のコマンドを実行します。
すると以下のファイルが作られます。

% 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

ここで生成される「seed.spec.ts」は、Agentsがテストコードを生成する際のテンプレートとなるファイルです。
基本的に自分で編集する必要はありません。

以上でPlaywright Agentsのセットアップは完了です。

4. 実際の使用

使用するにはVScodeのチャットの入力欄で「Agent」を選び「planner」「generator」「healer」のどれかを選択します。
Playwright Agents を使用する1

VScodeにチャットウィンドウが表示されていない場合は、VScode上部の検索の右のチャットアイコンをクリックします。
Playwright Agents を使用する2

Playwright Agentsのセットアップを行いgenerator.chatmode.mdなどのファイルが作られているにも関わらず、チャット入力欄にplannerなどが表示されていない場合は、VScodeでGitHubログインをしているか確認してみてください。
確認はVScode左下の人型アイコンから確認できます。
Playwright Agents を使用する3

それでもダメな場合は、VScodeを再起動してみてください。

4.1 Planner

Plannerに対して作って欲しいテストを伝えるとテストプランを作成してくれます。
テストプランは、テストの概要、成功基準、テストケースなどの内容をMarkdown形式のファイルで出力してくれます。
「tests」フォルダに「xxxx_test_plan.md」のファイル名で出力されます。

例えば「https://genz.jp/の基本操作のテストプランを書いて。」とPlannerに依頼したところ「genz_jp_test_plan.md」をtestsフォルダの中に作ってくれました。

英語で出力されることもありますが、日本語で書き直してもらうよう頼めば日本語にしてくれます。

4.2 Generator

GeneratorはPlannerが作ってくれたテストプランを元に、Playwrightのコードを書いてくれます
テストプランのテストケースを一括で書いてもらうこともできますし、指定したテストケースだけ書いてもらうこともできます。

Plannerに作ってもらったテストプランの中に「グローバルナビゲーションの検証」というテストケースがあったので「グローバルナビゲーションの検証のテストを書いて。」とGeneratorに依頼したところ「genz-gloval-navigation.spec.ts」をtestsフォルダの中に作ってくれました。

4.3 Healer

Generatorに書いてもらったPlaywrightコードを実行してもテストが失敗する場合があります。
Playwright側のコードでのテスト失敗の場合はHealerに依頼することでコードを修正してくれます。

ただ、この自動修正も完璧ではなく、いくらHealerに依頼してもテスト実行失敗から抜け出せない場合があるので、その際はGenerator依頼からやり直す方がいいかもしれません。

5. メリット・注意点

5.1 メリット

  • テストプランから実装までAIが作ってくれるので、Playwrightに詳しくなくてもテスト自動化がしやすい
  • 失敗するテストの修正や壊れたテストの修正のメンテナンスコストが低減できる可能性がある
  • 一旦AIに書いてもらって、そのコードから勉強するといった活用もできる

5.2 注意点

  • AIの作成したテストプランやコードはあくまでも起点で完璧ではない可能性があるのでレビューはしっかり行いましょう
  • プロジェクト構成や命名規則、テストデータ管理などが整備できていないと、AIを導入しても期待通りの効果が出ない場合があります
  • いきなり広い、大きなテストをすべて自動化しようとしても上手くいかなかったり、大きな工数がかかることがあるので、AIを活用したテスト自動化もミニマムに進めましょう

また、今回はPlannerGeneratorHealerと流れで自動テストの導入例を示しましたが、すべてAgentsに任せるのではなく、人の作業の補助として使うのも有効です。
例えば、テストプランはPlanner任せではなく、人の手でMarkdown方式で記述する。
すでに手動テストのテストケースなどがある場合など、それをGeneratorが読みやすい形のMarkdownに変更してGeneratorにコードを書いてもらう。
もしくは人が書いた過去のPlaywrightのコードをHealerにメンテしてもらうなど。

まとめ

Playwright Agents は、テストエンジニアが手作業で行っていたテスト設計やシナリオ作成を AI がサポートしてくれる新しい仕組みです。
Planner が計画し、Generator がテストを生成し、Healer が修正を提案する。この一連の流れを体験することで、テスト自動化の新しい可能性を感じられるはずです。

「テストを作る」から「テストを導く」へ
Playwright Agents は、これからのテストエンジニアにとって心強い味方になるでしょう。

<過去の記事>
テスト自動化には夢がある。でも「仕事で使えるレベル」にするのは難しい理由
Windowsで始めるsqlite3超入門 ~QAエンジニア向けSQL学習ガイド~
テスト自動化にも使える!ADBの基本コマンドとテスト作業での活用テクニック
ゼロから始める!PlaywrightでのAndroidテスト環境構築ガイド(Mac編)
ゼロから始める!Appium + Python環境構築ガイド(Windows対応)

 
GENZの自動化ソリューション「G-SAT」
本記事ではPlaywright Agentsをご紹介させていただきましたが、テスト自動化の内製化には時間とコストがかかります。これらの課題を解決し、より信頼性の高いソフトウェア品質を実現するために、株式会社GENZの自動化ソリューション「G-SAT」をご活用ください。

テスト自動化の最近記事

  1. Playwright Agents入門:AIがテスト設計・生成・修正をサポートする時代へ

  2. テスト自動化には夢がある。でも「仕事で使えるレベル」にするのは難しい理由

  3. テスト自動化にも使える!ADBの基本コマンドとテスト作業での活用テクニック

  4. Appium Inspectorを使ってみよう

  5. ゼロから始める!PlaywrightでのAndroidテスト環境構築ガイド(Mac編)

関連記事