はじめに
社内ワークショップで得た知識と生成AIを活用し、Playwright MCPを用いてテスト実行からCSV出力まで行いました。
※私は開発・自動化ともに未経験のため、本記事の内容は生成AIのサポートを前提に進めています。不十分な点があるかと思いますが、同じような初学者の方の参考になれば幸いです。
※検証には、GENZ社員の方が作成された学習用サイトとテストシナリオを使用させていただきました。
Step1. 環境構築
以下のインストールを済ませておきます。
- Node.js
- VSCode
- VSCodeの拡張機能（以下）
- Playwright Test for VSCode
- Claude Code
- GitHub Copilot Chat
Step2. プロジェクトのセットアップ
- フォルダ準備：任意の場所にフォルダを作成し、VSCodeで開きます。
- Playwrightの初期化：ターミナルで
`npm init playwright@latest`を実行。- 表示される質問はすべてEnter（デフォルト）で進めます。
- 最後に
`Happy hacking! 🎭`と出れば成功。
- Playwright MCPのインストール：ターミナルで
`npm install -g @playwright/mcp`を実行。`changed 3 packages...`などが出れば成功。
Step3. 疎通確認
- Agentモードの確認：VS Codeのチャット欄（Copilot Chatなど）のモードを「Agent」にする。
- 動作テスト：
`npx playwright open example.com`などを実行するようチャットで指示し、ブラウザが起動することを確認。
Step4. セキュリティ設定（.env作成）
機密情報が外部に漏れないよう .env ファイルを作ります。
- Step2で準備したプロジェクト直下に`.env`ファイルを作成。
- 中身にURLやログイン情報を入力して保存。
Step5. Geminiによるシナリオの構造化（POM）
コードが書けないので、生成AI（Gemini）を利用して既存のテストケースをプログラム用の構造に変換します。
機密情報はダミー名称・変数に置き換えて依頼します。添付ファイルの中身も同様です。
💡 依頼のポイント
- Page Object Model (POM)：ページごとに操作を分離する設計を採用。
- 環境変数：`process.env` を通じて `.env` から情報を読み込む構成を指示。
- 成果物の定義：
- `implementation_plan.md`：実装手順とコードの骨組み。
- `test_scenario.csv`：テスト手順、結果、エビデンス名を管理する台帳。
Step6. Playwright MCPへの実行指示と結果確認
準備：Step5で出力された `implementation_plan.md` の内容を、プロジェクトフォルダ内に `docs/implementation_plan.md` として保存しておきます。
実行：Step5で出力された実行指示文をチャット欄に貼り付け、以下のフローで処理を進めます。
- ファイル作成：指示文に基づき、AIが各 `.ts` ファイルやCSVを自動生成。
- テスト実行：AIが `test_scenario.csv` を読み込み、順次ブラウザを操作。
- エラー修正：実行中にTypeScriptのエラー（赤字）が出た場合は、その内容をチャットに貼り付けてAIに再修正を依頼。
- 結果の反映：テスト完了後、AIが `test_scenario.csv` の「実行結果」列に合否（OK/NG）を書き込み、「スクリーンショット名」列に保存した画像ファイル名を自動で追記。
- エビデンス確認：`evidence/` フォルダ内に保存されたPNGファイルと、CSVの内容が一致していることを確認。
＜テスト実行結果：更新されたCSV＞
振り返り
AIに頼り切りの部分は多いですが、仕組みを理解することで活用の幅が広がると感じています。今後は、Playwright独自の仕様やTypeScriptについての学習をさらに進めていきたいです。
＜関連記事＞
【入門】Playwrightインストール完全ガイド｜Windows/Macの導入手順と動作確認まとめ
Playwright Agents入門｜AIがテスト設計・自動生成・修正まで行う最新テスト自動化
Playwrightまとめ｜入門・活用完全ガイド｜基本からAI活用・モバイルテストまで
