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

概要 こんにちは、booostのバックエンドエンジニアのma_meです。 今回はこちらの記事から着想を得て、個人開発で AI、DevTools Recorder、playwright-cli の３ツールを組み合わせてe2eテストを書いてみたところ、作成とメンテナンスが楽になる手応えを感じましたので、その方法を紹介します。 全体の流れ ① ブラウザで操作を録画（Chrome DevTools Recorder） ↓ ② 録画JSONをCodexないしClaude Codeに渡す ↓ ③ AIがJSONを読み取り、Playwrightテストコードに変換 ↓ ④ 必要に応じてplaywright-cliで画面のスナップショットを取り、セレクタを補正させる ↓ ⑤ テストファイルが完成 では実際にやっていきましょう。 Step 1: ブラウザ操作を録画する Chrome DevToolsの「Rec

[aiueokabe]

Playwrightにレコード機能あるけど、それじゃダメなのかな。 https://playwright.dev/docs/codegen もちろんDOM構造に依存した壊れやすいロケータを生成することもあるから、そこは注意しないといけないですが

[masudaa]

Playwright公式で画面操作からテストコード生成する機能あったよなと思ったらちゃんとあった。これもAIから提案されたのかな。

[takuver4]

DevTools に Recorder 機能があったのか。知らなかった。

[atsushieno]

Playwrightを使っていた頃は「直したらPlaywrightで実際に動作確認して」って言えばやってたし、それをスクリプトに残せって言うだけの話では。それ以上読むべき話が書いてあるなら読むけど。

[dkanikama]

録画？

[misshiki]

DevTools Recorderで操作を録画し、JSONをClaude CodeやCodexに渡してPlaywrightテスト化する方法。playwright-cliでスナップショット補正も可能で、作成も保守も楽になると紹介。

[lbtmplz]

人間みたいに文字から検索して操作してほしいといつも思う

[toaruR]

そんな機能あったっけ？→使った形跡があった(ノ∀`)

[xanaduuu]

これは良い

[masalib]

テスト対象Objectにidを設定していないとデータによって動かないことがある。

[work996]

個人開発で得た知見を会社のブログに載せてるのか。会社の宣伝の為に搾取されてない？って最初思ったけど、本人の個人アカウントに紐づいてるし、自身の記事を広めるのに会社を利用してwin-winとも言えるのかな？

[hogetax]

あーこれやったことないわw目から鱗だった。なんでやらなかったんだろう...あとタイトルの「録画」って「画」じゃない気がする