Robot+JUnitによる、Webアプリケーションの自動テスト

Robot+JUnitによる、Webアプリケーションの自動テスト

JavaのRobotクラスを使って、自動テストを行うコンテンツのバージョン3です。

以前は、XMLにテストシナリオを書いて実行するという形式でしたが、(個人的に)「やっぱりJUnitでしょう」ということでということで、作り直しました。

但し、実現のためにかなり複雑な作りとなったので、元々一般的ではないツールでしたが(実際に実行できた人が、どれほどいたのでしょう)、更に難易度が上がってしまいました。

旧版にご用の方は、こちらからどうぞ。

制限事項について

処理方式の詳細(詳細については、少々詳しい解説をご覧ください)は省きますが、JUnitからWebブラウザへのリクエストで、WebSocketを使用しています。

このため、WebSocketをサポートするWebブラウザのみが、テストを実行できる対象となります。

また、使用しているスクリプトで、ECMAScript 2016の機能を使っているので、Internet Explorer 10も対象外です。

このコンテンツが、エラー無く表示できているWebブラウザであれば、問題ないと思います。

まずは、簡単なご紹介

以下のコードが、最低限必要なJUnitのコードとなります(このページで紹介する内容は、ダウンロードとセットアップで公開している提供ファイルに含まれます)。

次頁に遷移するJUnit

6行目で、テスト開始時に、組み込みTomcatで実装したHTTPのゲートウェイサーバを実行しています。

7行目で、Webブラウザでのアクセスを待ちます。

コンソールに、アクセスするURLが表示されるので、そのURLにアクセスします。

13行目では、テスト終了時に、ゲートウェイサーバを終了しています。

ここまでが、初期処理と終了処理となります。

テストのコードに入って、19行目がAPPロード指示です。引数は、JavaScriptのwindow.openと同じです。

ここで指定するURL(テスト対象APPのURL)に指定できるホストのIPアドレスは、ローカルホストやプライベートIPアドレスのみで、インターネット上のグローバルIPアドレスは使用できません。

あくまでもテストツールなので、このような仕様としています。

22行目が、ID指定の要素位置取得・マウス移動(次頁ボタン)・マウスクリックを一括で行うメソッドです。

このテストケースでは、nextpageをidに持つ要素にマウスカーソルを移動し、クリックします。

23行目がページ遷移監視で、このメソッドが返ってきたタイミングで、Webブラウザ上の画面遷移が完了です。

上記テストで使用するHTMLファイルです。

IDがnextpageのボタンをクリックされたら、nextpage.htmlをロードするという、至って単純なHTMLです。

toppage.html

テスト毎のサンプル

テキストの入力を行う

最初にロードするHTMLファイルです。

editpage.html
テキストの入力を行うJUnit

7行目のtypeTextByIdメソッドが、指定のIDの要素をマウスクリックしフォーカスを当てた後、指定のテキストからキーボードのキーコードを取得して、そのキーを押下することでテキストの入力を行います。。

9行目でも同じテキストフィールドに入力をしていますが、入力前にCtrl+Aで入力済みの内容を選択してから再度入力を行うので、必ず指定のテキストが入力されます。

11行目で、typeMultiByteTextByIdを使用してマルチバイト文字の入力を行います。

マルチバイト文字の入力を、キーボードで行うのはIMEとの絡みもあり、確実に実現できないので、JavaScript経由で行います。

新しいWindowを開いて操作する

最初にロードするHTMLファイルです。

newwinpage.html

newwinpage.htmlがオープンしたWindowにロードされるHTMLファイルです。

editclosepage.html
Windowを開いて操作するJUnit

7行目で、newwinpage.htmlのオープンボタンをクリックしています。

8行目のスリープは、Windowがオープンされたことを検知する手立てが無いので入れています。Windowがオープンされる前に9行目のopenWindowが呼ばれてしまうと、その中で__NEW_WIN__という名前のWindowをオープンしてしまいます。

マシンの性能やWebブラウザの能力によっては、サンプルの数値では足りない可能性もあります。空白のタブが表示されてしまう場合は、500(ミリ秒)程度に変更してください。

10行目や12行目のスリープは、テストの実行が慌ただしくなりすぎないようにするためで、必須ではありません。

9行目のopenWindowで、処理対象が名前が__NEW_WIN__のWindow(editclosepage.html)に変更されます。

11行目のテキスト入力は、editclosepage.htmlに対して実行されます。

13行目でeditclosepage.htmlのクローズボタンをクリックし、14行目でWindowのクローズを待ちます。

15行目で、再び処理対象を名前が__WEB_TEST__のWindow(newwinpage.html)に変更します。

それ以降は、Windowのオープンとクローズを繰り返します。

画面のキャプチャを撮る

キャプチャを撮るJUnit

7行目と13行目でキャプチャを取得しています。screenCaptureの第一引数はWindowの情報で、第ニ引数がキャプチャのファイル名です。

キャプチャの範囲はWindow全体ですが、Webブラウザによってはタイトルバーが含まれないものもあります。

キャプチャは、PNG形式の画像ファイルで、ファイル名は日付時刻+ファイル名(例えば「2019.01.01_00-00-00.000_[ファイル名].png」)となります。

ファイルを出力するディレクトリは、[ホームディレクトリ] +「システムプロパティのcom.yscjp.webtools.robot.capture.save.dirnameに指定したディレクトリ」となります。

システムプロパティに何も設定されていない場合は、[ホームディレクトリ] + captureとなります。

画面に表示されている内容をチェックする

最初にロードするHTMLファイルです。

inputinfo.html
表示内容をチェックするJUnit

7行目で、表示中の要素から属性を取得しています。

全てのinput要素から、それぞれname・type・value・checked・readOnlyという名前の属性を取得します。

属性名は、HTMLの名前ではなく、DOMの名前であることに注意してください。Oが大文字のreadOnlyを指定しないと、正しく取得できません。

マウスによるドラッグ

実は、ここまでは、JavaのRobotクラスを使わなくても実現可能だったのです。

現に実現しているテストツールはいくつもあります(そしてもっと使いやすいです、多分)。

しかし、実際にイベントを発生させないと実現できないテストもあります。

マウスのドラッグもその一つです。それをやりたくて、このツールを作ったようなものです。

要素を掴んでドラッグする

要素を移動するJUnit

やることは簡単で、指定の要素の中心にマウスカーソルを移動し、マウスの左ボタンをプレス(ダウン)して指定の位置に移動します。その後、左ボタンをリリース(アップ)します。

JavaのRobotクラスは、システム(OSやウィンドウマネージャ)のマウスイベントを実際に発生させるので、マウスのボタンをプレスした後に、必ずリリースしなければなりません。

これを怠ると、システムによってはマウスボタンを押したままの状態になってしまいます。

この状態を避けるために、マウスをプレスした時点で、10秒以上リリースされなければ、ボタンをリリースするという処理を行っています。

あまり長時間マウスボタンを押しっぱなしのテストは、行えないので注意してください。

10行目でシステムプロパティにセットしているのは、マウスカーソルの移動を遅くする指定です。見た目だけの問題なので、設定が必須なわけではありません。

当ツールでは、マウスカーソルの移動を、数ピクセルずつに分割して行い、数ピクセル移動した時点で一定の時間ウェイトします。このウェイト時間をミリ秒で指定します。デフォルトでは、2ミリ秒となっています。

12行目が、現在のカーソルの位置から、指定のピクセル数移動させる指示です。x方向(右方向)に160ピクセル、y方向(下方向)に120ピクセル移動せます。

要素をリサイズする

要素をリサイズするJUnit

リサイズは、移動と異なり、マウスカーソルを要素の中央ではなく、周辺のリサイズ可能な範囲に移動させる必要があります。

テストで使用しているスクリプトは、要素の周辺4ピクセルを範囲としています。

7行目で、要素の右下から左へ3ピクセル上へ3ピクセルの位置へ、マウスカーソルを移動させています。

第2引数のSEは方向の指定で、下記のような仕様となっています。

       NW   NNW   N   NNE   NE
        +----+----+----+----+
        |                   |
     WNW+                   +ENE
        |         C         |
       W+         +         +E
        |                   |
     WSW+                   +ESE
        |                   |
        +----+----+----+----+
       SW   SSW   S   SSE   SE
 

NはNorthで北、NWはNorthWestで北西、NNWはNorthNorthWestで、北北西を表します。

ちなみに、ヒッチコックの『北北西に進路を取れ』は、原題が「North by Northwest」で、北北西どころがそもそも存在しない方位なんですって。

なんとなく近いのは、「Northwest by North」で、日本語では北西微北(北西と北北西の間)。

絵を描く

当然ながら、マウスのドラッグができれば線を引くこともできるので、やってみます。

マウスのダウン位置からアップ位置までに、SVGでラインを引くことのできるコンテンツを用意しました。

線を引くJUnit

勝敗に関しては、余り突っ込まないでください。

頑張れば、ペン画の一つも描けそうです。

ツールが耐えられればですが(汗)