Chrome DevToolsのRecorderで“最も簡単な自動化”を試そう

こんにちは、SODAでクオリティエンジニアをしているokauchiです。

今回は、最も簡単な自動化というテーマです。ChromeのRecorderタブを利用すれば、Chromeだけで誰にでも自動化を利用ができ、導入コストはゼロと言っても言い過ぎではなさそうです。

自動化の最初の一歩にぴったり

「自動化をやってみたいけど、ツールの準備や設定が大変そう」──そんな声をよく耳にします。確かにE2Eテストツールを導入しようとすると、環境構築やログイン処理の組み込みなど、意外とハードルが高いものです。

でも実は、もっと簡単に自動化を試せる方法があります。ChromeのDeveloper Toolsに用意されている「Recorder」タブを使う方法です。2022年にリリースされていたそうですが、今まで触れる機会がなく存在を知りませんでした。chromeを利用して業務をしている人は多く、すぐに触れるので最初の一歩にぴったりです。

Recorderタブで操作を記録できる

Recorderタブを開くと、ブラウザ上で行った操作をそのまま記録することができます。リンクをクリックしたり、入力欄に文字を打ったりといった一連の動作がシナリオとして保存されます。

面白いのは、この記録を現在のウィンドウ上でそのまま再生できるという点です。E2Eツールのようにログイン処理をスクリプトで書く必要はなく、いま開いているセッションをそのまま利用できます。ログイン済みの状態でテストを進められるので、無駄な設定に悩まされません。

また、Recorderにはexport機能も用意されています。記録したシナリオをコードとして出力できるので、組織内での共有や、より本格的な自動化の入り口として活用することが可能です。「まずは動きを残して、あとから必要に応じて育てていく」というやり方が自然にできます。

共有や応用も

Recorderで作ったシナリオは、そのまま小さな再現テストとしてチームに配ることができます。たとえば「この不具合はどう再現するのか」を簡単に共有したいとき、スクリーンショットや文章よりも、記録した操作の再生を見せる方が圧倒的に伝わりやすいはずです。
また、Runbookのような特定のテストデータや状態を作り出すUI操作もシナリオ化しておくことで画面キャプチャを撮った丁寧なマニュアルを用意する必要も減り、組織の生産性にも寄与しそうです。

まとめ

ChromeのRecorderは、「最も簡単な自動化の入り口」といえる存在です。

• 操作を記録して、そのまま再生できる
• ログイン処理不要で試せる
• exportしてチームに共有できる

E2Eテストツールを導入時、シナリオ作成、メンテナンスにばかり目が向いてしまい、導入をしてから運用を考えるといったケースも発生します。運用の演習としても利用できそうですね！