E2E テストは「Chrome DevTools Recorder で録画 → JSON を AI に渡して Playwright 化」で書く

画面操作を DevTools の Recorder で録画し、JSON でエクスポートしてそのまま Claude Code／Codex に渡す。JSON には aria・CSS・XPath の複数セレクタが入っているので、動画や目視より正確に Playwright テストへ変換できる。拾いにくい要素は playwright-cli のスナップショットで補正させる。

どんな場面で使う？

E2E テストを書きたいが、セレクタ調べと Playwright の書き方調べが面倒
UI 変更でテストが壊れたとき、直すのを AI に任せたい

手順

DevTools → Recorder → 新しいレコーディング → 普通に操作 → 停止 → JSON でエクスポート

json

{ "title": "Recording …", "steps": [
    { "type": "navigate", "url": "https://example.com/contact/" },
    { "type": "click",  "selectors": [["aria/姓"], ["form input"]] },
    { "type": "change", "value": "山田", "selectors": [["aria/姓"]] } ] }

JSON をプロジェクトに置き、こう頼む

@ブラウザ操作の記録.json
Recorderで録画したブラウザ操作のJSONです。この情報をもとにPlaywrightのテストを書いてください。
セレクタの基本はariaセレクタをベースにしてください。
playwright-cliで対象画面のスナップショットを撮り、セレクタを補正してください。

壊れたとき: 小さな変更なら失敗結果を渡して直させる。大きな変更なら録り直した JSON を渡して差分から直させる

注意点

新規作成だけなら Playwright 標準の codegen でもほぼ足りる。この方法の利点は「○秒待つ」などの細かい条件をプロンプトで足しやすいことと、録り直しを保守に使えること
aria セレクタに寄せるよう明示しないと、壊れやすい CSS セレクタが選ばれやすい
関連: Copilot CLI から「ログイン済みの職場ブラウザ」を操作する（Playwright Chrome Extension）、Slidev のスライドを Playwright MCP で見ながら Claude Code に改良させる

出典

いいね: @kokushing · 2026-04-14 （Zenn「ブラウザ操作を録画して、AIにPlaywrightテストを書いてもらう」 zenn.dev ）
追記（2026-11-03）: @azu_re 2026-01-28 — playwright-mcp v0.0.58 で playwright-cli コマンドが追加され、コマンドで Playwright を操作できるようになった @azu_re · 2026-01-28