公式を読めば分かるが、端的に自動生成するパターンを紹介する。

https://playwright.dev/docs/codegen

VScodeから生成する

公式のVSCode拡張を入れていれば、VSCodeに追加されるPlaywrightタブからRecord newを押すとcodegenを実行した場合と同様の画面が表示される。

https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright

コマンドから生成する

npx playwright codegen [page-url]

デバック画面から生成する

デバックモードなどで起動した際に表示されるRecordボタンを押せば、操作が自動的にスクリプトとして記録される。

テストの続きを生成する

後からテストの内容を変更したくなったり、続きを書きたくなった場合は、page.pause()を入れることで、生成するための画面を表示することができる。

await page.pause();