Webページではマウス操作やキーボード入力が折り混ざるので、どう操作したことによって不具合が出たかという再現するのが難しいことがあります。しかしユーザの操作の中に、解決のヒントがあるはずです。 そこで使ってみたいのがtraquerです。Webページにおける操作を記録、再生できるライブラリです。

traquerの使い方

録画中。左下のアイコンが変わります。

録画した後です。画面下に操作したログがビジュアル化されています。

一つ一つの操作にイベントが記録されています。

再生しているところ。マウスの軌跡が描かれています。

traquerではマウスの動き、クリックイベント、キーボード入力などをすべて記録して残しています。再生時には最初のページに戻った状態で開始する必要があります。また、画面幅などが最初の条件と異なると良くないでしょう。traquerを使ってテストの記録を残すと様々な情報が得られそうです。

traquerはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Admin Dashboard nenadg/traquer: Records and reproduces user’s in-page behavior