ブラウザ操作を録画して、AIにPlaywrightテストを書いてもらう

概要

こんにちは、booostのバックエンドエンジニアのma_meです。

今回はこちらの記事から着想を得て、個人開発で AI、DevTools Recorder、playwright-cli の３ツールを組み合わせてe2eテストを書いてみたところ、作成とメンテナンスが楽になる手応えを感じましたので、その方法を紹介します。
https://dev.classmethod.jp/articles/automate-manual-creation-chrome-devtools-recorder-ai/

全体の流れ

① ブラウザで操作を録画（Chrome DevTools Recorder）
    ↓
② 録画JSONをCodexないしClaude Codeに渡す
    ↓
③ AIがJSONを読み取り、Playwrightテストコードに変換
    ↓
④ 必要に応じてplaywright-cliで画面のスナップショットを取り、セレクタを補正させる
    ↓
⑤ テストファイルが完成

では実際にやっていきましょう。

Step 1: ブラウザ操作を録画する

Chrome DevToolsの「Recorder」パネルを開き、テストしたい操作を普通に行います。
Recorderの利用方法については冒頭で紹介に挙げた記事の、こちらの項を参考にしてください。
https://dev.classmethod.jp/articles/automate-manual-creation-chrome-devtools-recorder-ai/#%25E6%2593%258D%25E4%25BD%259C%25E3%2581%25AE%25E8%25A8%2598%25E9%258C%25B2

1. DevTools → Recorder → 新しいレコーディングを開始
2. ブラウザ上で操作する（ページ遷移、フォーム入力、ボタンクリックなど）
3. 録画を停止し、JSONとしてエクスポート

エクスポートされるJSONはこのような構造になっています：

{
    "title": "Recording 2026/3/29 at 12:38:32",
    "steps": [
        { "type": "navigate", "url": "<https://example.com/contact/>" },
        { "type": "click", "selectors": [["aria/姓"], ["form input"]] },
        { "type": "change", "value": "山田", "selectors": [["aria/姓"]] }
    ]
}

各ステップには aria/ セレクタ、CSSセレクタ、XPathなど複数のセレクタが記録され、AIにとっての正確な情報源になります。

Step 2: Claude Codeに渡して変換する

録画JSONをプロジェクトに置き、AIにJSON情報を渡します。

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

このワークフローのメリット

1. JSONを貼り付けるだけで簡単

テストを書くのに必要な作業工程が３ステップで纏まります。

1. ブラウザで操作を録画
2. 操作を記録したJSONをエクスポート
3. CodexやClaude CodeなどのAIに渡す

セレクタを調べたり、Playwrightの書き方を調べたりする必要が無く、
人による多少の画面操作の違いがあれど、AIが吸収してくれます。

2. AIが正確な情報を読み取ってくれる

録画JSONには、ariaセレクタ・CSSセレクタ・XPath・座標情報など、ブラウザが記録した正確な情報が入っているので、人間が目で見てセレクタを書くよりも正確な情報です。そこからさらにAIが最適なセレクタを選んでくれます。
またariaセレクタがない要素など、拾いにくい要素については、playwright-cliでスナップショットを取り、実際のUI構造から判断させることもできます。この過程を入れることで、より実データに基づいた変換が行われるようになります。

3. 要素が変わったときもAI任せで更新しやすい

e2eテストあるあるの、UIが変更されてテストが壊れるケースへの対応です。
従来なら該当箇所を特定してセレクタを手動で修正する必要がありました。
要素が変わったくらいの小さな変更なら、失敗した結果をAIに伝えて修正してもらえます。
大きな変更ならレコーディングを取り直して、AIに渡して差分を見てもらうことで修正できるはずです。

まとめ

個人で試した限りでは、テストを書くのが面倒から、録画して渡すだけにかなり近づけました。
現在この方法を社内のプロジェクトにも展開しているところです。チームで運用してみて得られた知見があれば、また共有したいと思います。