前提

recorderは2022年1月に登場予定のGoogle Chrome 97から利用可能になるそうです。
Google Chrome 96では利用できません。
試したい場合はdev版やbeta版をDLしましょう。

recorderで何ができるの？

などになります。
詳細はこちらをご確認ください。

ChromeDevToolsで紹介されているデモの内容と少しかぶるのですが、
せっかくなら自社プロダクトで何か試してみたいよねってことで食べチョクで商品を購入する操作を記録して再現させてみました。

ChromeDevToolsを開きrecorderを選択します。

recorderが開いたら Start new recording で操作の記録ができます。

今回操作した流れはこんな感じになります。

最後に停止ボタンを押すと記録が完了します。
非常に簡単ですね。

それでは記録の再現をしていきましょう。
Replayを押すと。。。

なんということでしょうか。
全く同じ商品を簡単に買うことに成功しました。

少しの操作で全く同じ商品を購入することが可能というわけです。
かなり汎用的に活用できる予感がしますね。

ぽちぽちしているだけで記録できるので非常に簡単でした。
エンジニアはもちろん非エンジニアにも使って欲しい機能です。
単純な操作を記録しておけば簡単にライフハックできそうですね。

まずテストに活用できそうだと妄想しました。
例えばテスト時に出たバグの再現を記録して開発者に共有するとかです。
あとはもしこの記録の再現をブラウザの外から動かせれば、簡易的なE2Eテストとしても活用できそうな予感がします。

他のシーンだとルーティン化している作業に活用できそうです。
出勤連絡とか多分どこの会社でもあると思うのですが、そういう操作を記録しておけば多少の負荷軽減になりそうですね。
さらに毎朝コーヒーをUberEatsで頼んでるならボタン一つでコーヒーの注文をすることも可能になるわけです。

そして記事を書いた時点では使えなかったのですがアップロードもできるようになりそうなので、
記録した操作の共有ができればさらに夢は広がる気がします。

といった感じでChromeDevToolsの新機能、recorderに興味を持っていただいた方はぜひ試してみてください。

そんな食べチョクではエンジニアを大募集しています。
recorderに興味を持ったけど食べチョクにも興味持っていただけたらまずはカジュアルに話しましょう。