概要
https://qiita.com/ntaka329/items/fdeee736f9af06640647
詳細内容
## ブラウザポチポチ確認作業を自動化！Playwright codegen + LLMでE2Eテスト自動生成 #生成AI
https://qiita.com/ntaka329/items/fdeee736f9af06640647
Playwrightのcodegen機能で記録したブラウザ操作をGitHub Copilotで最適化し、手動のセキュリティ確認作業を実用的なE2Eテストコードへと変換する手法を解説する。
**Content Type**: 📖 Tutorial & Guide
**Language**: ja
**Scores**: Signal:4/5 | Depth:3/5 | Unique:3/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 80/100 | **Annex Potential**: 75/100 | **Overall**: 76/100
**Topics**: [[Playwright, E2Eテスト, GitHub Copilot, テスト自動化, GitLab]]
手動でのブラウザ操作による設定確認作業を、Playwrightのコード生成機能（codegen）とLLM（GitHub Copilot Agent）を組み合わせて自動化する具体的なワークフローを提示している。エンジニアが直面する「ガイドラインに基づいた繰り返しの目視確認」という退屈でミスが起きやすい作業を、いかに現実的な工数で自動テストへ移行させるかに焦点を当てている。
記事では、GitLabのセキュリティガイドライン準拠チェックを題材に、2つのステップで自動化を実現している。まず、Playwright codegenを用いてブラウザ上での手動操作を記録し、テストコードのプロトタイプを自動生成する。次に、生成されたコードに含まれる冗長な操作（不要なクリックなど）の削除や、アサーション（期待される状態の判定）の追加をGitHub Copilotに行わせる。特に、複数の設定項目を一度に検証する際、1箇所の失敗でテストを中断させない「soft assertion (`expect.soft`)」の導入など、実用性を高めるためのLLMへのプロンプト指示が具体的に示されている。
著者は、この手法が特に威力を発揮するのは「確認手順と確認観点が既に言語化されている」ケースであると主張している。ゼロからテストコードを書く心理的・時間的ハードルを、codegenによる「叩き台の生成」とLLMによる「リファクタリング」の組み合わせで大幅に下げられる点が最大のメリットだ。一方で、codegenが生成するセレクタの脆弱性やアサーションの精度については、依然として人間による調整が必要であるという現実的な制約も併記している。
ウェブアプリケーションエンジニアにとって、リグレッションテストや複数環境での動作確認など、同一手順を繰り返す手作業を「既存のドキュメント」から「動くテスト」へと迅速に変換できる本手法は、開発サイクルの高速化と品質向上に直結する極めて実践的な知見である。