Playwright mcpで実行させる自動テストシナリオの生成
playwright mcpにより生成AI経由でブラウザを自動操作できるが、Claudeなどとチャットでやりとりしてmcp経由で都度自動操作を行う場合、セッションを立ち上げるたびにClaudeが生成する操作内容や自動テストシナリオの記述方法にばらつきが出る。
また、テストシナリオ作成時に同時に行いたい操作が決まっているのに毎回それを指示するのは手間である。例えば、操作に失敗したらページのDOMをスキャンして成功するように修正を行わせたり、シナリオ実行後の状態から連続した追加シナリオを作成させたいなどである。
このため、自動テスト操作内容を統一のフォーマット（JSON形式）で決めておいて、テストシナリオ作成時に追加で行う操作については自動で実行するようにし、テストシナリオ作成指示については日本語の簡潔な指示を行うことで自動で生成されるようコマンド化した。以下がツールのリポジトリである。
このツールでは、作成済みのシナリオ管理や、自動操作で一度訪れたページをURLをキーにしてキャッシュする機能も備えており、シナリオの再実行や、実際にページを訪れなくてもキャッシュからシナリオを作成することができる。
実行方法
実行の流れ
以下のようにnpm startで対話シェルが起動する。各コマンドの実行後に実行ログや提案内容が出る。
npm start
-対話シェルが起動-
# urlをplaywrightで開いて「login」というシナリオを実行。
# ブラウザが起動し、自動操作の様子を確認
mcp>run login http://localhost:8000
# ページ内のDOMをスキャンして、ユーザーを新規作成するための操作を
# 自動で生成し、実行
mcp>auto "ユーザーの新規作成ボタンを押して"
mcp>auto "ユーザー名「user」、パスワード「pass」でユーザーを作成して"
# 起動後に実行された自動操作内容のセッションログを確認
mcp>history
# セッションログからシナリオを保存
mcp>save-scenario newuser
# セッションログをクリア
mcp>history clear
# ログイン後のページ(パスが/)のDOMキャッシュからシナリオを提案、生成
mcp>gen /
コマンド一覧
実行可能なコマンドは以下。
- auto "" [url]
- AIエージェントモード。DOMを見てClaudeで操作シナリオを生成し、そのまま実行する。
- run [url]
- シナリオ実行
- cache list
- DOMキャッシュ一覧
- cache show
- DOMキャッシュ内容表示
- cache frames
- DOMキャッシュ内の iframe 一覧を表示
- gen [--run]
- DOMからシナリオ生成
- ask ""
- Claudeに質問
- ask-dom ""
- DOMを元にClaudeへ質問
- improve
- シナリオ改善
- scenarios
- シナリオ一覧
- history
- 実行済みステップ一覧
- history clear
- セッション履歴をクリア
- history delete
- indexで指定されたhistoryを削除
- save-scenario
- セッション履歴からシナリオ生成
- merge-scenario
- opsidb.jsonへシナリオをマージ
- help
- ヘルプ表示
- quit
- 終了