Chrome DevToolsのRecorderためしてみた
はじめに
Chrome DevToolsのRecorderをためしてみただけの記事です。
詳細は以下の公式ページを参照ください。
なお、今回は使用したChromeのバージョンはVersion 98.0.4724.0 (Official Build) canary (x86_64)です。
Recording
まずは任意のWebページで開発者ツールを開き、More options > More tools > Recorderの順でRecorderを開きます。
つづいて＋ボタンを押下し、[RECORDING NAME]を入力して[Start a new recording]を押下します。
ブラウザから画面を操作すると次々に操作がRecorderパネルに記録されていきます。
一通り操作が終わったら、[End recording]を押下します。
最後に、プルダウンから作成したRecordingを選択して[Replay]を押下することで、記録した操作がブラウザで実行されます。
Puppeteer
RecordingはPuppeteer Scriptとしてエクスポートすることができます。これにより記録した操作を他者と共有することが可能になります。
エクスポートしたいRecordingを選択した状態で[Export as Pupeteer script]を押下します。
エクスポートしたJavaScriptファイルは以下のようにpuppeteerをインストールしたのちに実行します。
$ npm i puppeteer
$ node [PUPPETEER SCRIPT]
うまく実行できるとブラウザが起動して操作を再生することができます。
PuppeteerのDebugging tipsを参考に、エクスポートしたスクリプトにheadles: falseオプションを追加すると以下のように記録した操作が再生されていることがわかりやすく確認できます。
おわりに
Chrome DevToolsのRecorderは色々便利な使い道がありそうなので今後も探っていきたいと思います。
今回利用したスクリプトは以下のGitHubリポジトリに編集前後の両方置いているので良ければ参照ください。
Discussion