What's Recorder ?

これ！

🌟 Introducing the new Recorder panel 🌟

You can now record, replay and measure user interactions with @ChromeDevTools.

See it in action - ordering coffee. ☕️

Learn more about this preview feature (available in Chrome Canary now): https://t.co/TGleZ2wo43 pic.twitter.com/qgQ4vTx6Zf
— Chrome DevTools (@ChromeDevTools) November 3, 2021

seleniumなどのようにブラウザ上での操作を記録、再実行、編集ができ、
Puppeteerスクリプトへのエクスポートもできる。

私

個人的にJavaスキーなのでselenium,selenide推し。
JavaScriptでテストするときはCypressが好き。

Recoderの使い方

Recorderタブを開く

Chromeで開発者ツールを開く（F12 or Ctrl + shift + i）

Recording（記録）

「start new recording」を押す。
RECORDING NAMEを入力して「Start a new recording」を押す。

以下の画面になったら画面操作開始。

clickやkeydownなどの画面操作が記録される。終わったら「End recording」を押す。

Replay（再実行）

Replayで再実行できる。

Measure performance（パフォーマンスの計測）

「Measure performance」を押す。
操作を再実行しながら、同じみのPerformanceタブが開く。

Edit（編集）

記録した操作を編集もできる。

Export

Puppeteerスクリプトへのエクスポートができる。

まとめ

簡単なメモ書きで終わりましたがイメージはつかめるかと。
何よりブラウザに標準搭載された、という事がまず素晴らしい。
頻繁に使っていきたい。

参考

Chrome DevToolsのRecorderを試す - Qiita
Chrome Developers/recorder