リスト5 図2の表示(HTML)
クリックとカーソルで色が変わる
リスト6 リスト5に対するCSS設定
図2 マウスの動きを再現するテスト
図2の表示を行うHTMLとCSSをリスト5、リスト6に示す。テストされるボタンなどは、onclickやonmouseoverによって前述した処理が実行されるようになっている。CSSでは、色を変化させる領域の背景を無効にしている。
マウスの動きを再現するテストケースの例をリスト7に示す。クリックはUserAction.click()、マウスカーソルをかざすのはUserAction.mouseover()というように、メソッド名が動作に対応しているのを確認していただきたい。他にも、ダブルクリックはdblclick、マウスの移動はmousemoveなどのメソッドがある。
リスト7 マウスの動きを再現するテストケース(例)
JavaScriptアプリケーションのテストは、アドインを使わない場合は実際に人間が操作しなければならないこともあったが、今回紹介した一連のクラスを用いれば、テストケースをユーザーの操作を再現しながら自動的に実行してくれるので、有効に活用して作業効率の改善を図っていただきたい。
次回は、テストで用いたログ出力コンポーネントについて、より詳しく紹介したい。イベント処理とも連動させてみよう。
