RanorexでWebアプリケーションをテストする際にチェックしてほしいポイント

今回は、RanorexでWebアプリケーションに対してテストを実施する方に向け、Ranorex を使う際につまづきがちなポイントとその対応方法をご紹介します。
Webアプリケーションをテスト対象としている方は、ぜひ本記事でご紹介しているポイントをご確認ください。

はじめに

Ranorexで対応しているブラウザーの種類は、以下となります。

  • Internet Explorer
  • Google Chrome
  • Microsoft Edge (Chromium)
  • Microsoft Edge (Legacy)
  • Mozilla Firefox

Ranorex によるWebアプリケーションへのテストについては、 Webアプリのテスト をご参照ください。

事前準備

Webアプリケーションをテストする際の事前準備におけるポイントは、以下となります。

1. アドオン(Ranorex Automation)の追加

RanorexでWebアプリケーションの自動化をする場合、ブラウザーにアドオンが追加されている必要があります。

Google Chrome/Microsoft Edge(Chromium)/Mozilla Firefox ブラウザー

Google Chrome/Microsoft Edge(Chromium)/Mozilla Firefox ブラウザーに対しては、Ranorex インストルメントウィザード 機能を使用し、アドオンをインストールする必要があります。
ブラウザーに対してアドオンを追加することで、Ranorex はWebブラウザー上のオブジェクトを認識できるようになります。

アドオンの追加手順は、以下となります。

  1. 使用するブラウザーにて以下のURLにアクセスすると、拡張機能一覧が確認できます。Ranorex Automationが有効化されていることをご確認ください。
    ・Chrome の場合:chrome://extensions/
    ・Microsoft Edge 場合:edge://extensions/
    ・Firefox の場合:about:addons
    追加されていない場合は、手順2からの内容にしたがって、 Ranorex Automationの追加を実施してください。
  2. ブラウザーが起動している場合は、終了します。
  3. Ranorex Studioを起動し、 ヘッダーメニューの ツールインストルメントウィザード をクリックします。
  4. ブラウザーのインストルメント を選択し、次へ をクリックします。
  5. アドオンを追加したいブラウザーのトグルボタンをONにして、 次へ をクリックします。
    →Ranorex Automationの追加処理が行われます。
  6. ブラウザーを再起動して、Ranorex Automationが追加されていることをご確認ください。

Internet Explorer ブラウザー

Internet Explorer ブラウザーへのアドオンは、Ranorex 本体(Ranorex Studio)をインストールした際に追加されます。
※デフォルトの設定のままRanorex 本体をインストールした場合には、Internet Explorer にはアドオンが追加されています。
Ranorex 本体をインストール後、後からInternet Explorer ブラウザーへのアドオンを追加したい場合、以下の手順を実施します。

  1. 対象のマシンにて、Ranorex インストールモジュールを起動します。
  2. Ranorex Studio セットアップの画面から 変更 をクリックします。
  3. Ranorex Internet Explorer Add-on にチェックを入れ、次へ を押します。
Ranorex Studio セットアップ画面

上記手順を実施の上、Internet Explorer ブラウザーにて、アドオンがインストールされていることをご確認ください。

2. Chromeプロセスの確認

対象マシンにGoogle ChromeブラウザーとChromium Edge ブラウザーがインストールされている場合にご確認ください。

Ranorexでは、ChromeプロセスとChromiumプロセスを同時に起動している場合、先に起動していたプロセス上のDOM要素のみがRanorexに認識され、後から起動したブラウザーのDOM要素は認識できない状況となります。
Chrome / Chromium Edgeのどちらかのブラウザーでテストの作成や実行をする際は、もう片方のプロセスは終了してください。

上記に関連して、ChromeおよびChromium Edgeの各ブラウザーにて、バックグラウンドアプリの処理を続行するオプションが有効化されている場合は、Google Chrome/Chromium Edgeの各ブラウザーを閉じた後もバックグラウンドでプロセスが残る設定となります。
そのため、以下の手順にて、各ブラウザーのバックグラウンドアプリの処理を続行するオプションを無効とします。

  1. ChromeおよびChromium Edgeブラウザーで下記のURLを開きます。
    ・Chrome URL:chrome://settings/system
    ・Edge URL:edge://settings/system
  2. ChromeおよびChromium Edgeブラウザーにて、以下の設定を 無効化 してください。
    ・Chrome:Google Chromeを閉じた際にバックグラウンドアプリの処理を続行する
    ・Chromium Edge:Microsoft Edgeが終了してもバックグラウンドの拡張機能およびアプリの実行を続行する
  3. ChromeおよびChromium Edgeブラウザーを閉じます。
  4. テスト対象となるブラウザーのみを起動し、テストの作成や実行をおこないます。

テストの作成・実行

Webアプリケーションでのテスト作成や実行におけるポイントは、以下となります。

1. 画面ロードの待機処理

Webアプリケーションでは、ネットワーク接続やアプリケーション内部の処理時間などが起因し、対象のアプリケーション画面が表示されるのに時間を要するケースがあります。
対象のアプリケーション画面が完全に表示されていない状態で次の操作が実施されてしまうと、次の操作は期待通りに実施されず、テストが失敗してしまいます。
このような失敗を避けるために、対象画面のロードを待機した上で、次の操作が実施されるよう設定する必要があります。

Ranorex では、タイミングを待機するために、以下のアクションを用意しています。
・Invoke Action – WaitForDocumentLoaded() アクション
 Web ページのルートエレメント(DOM)に対してのみ指定可能なアクションとなります。対象の Web ページが完全にロードされるまで待機します。
Delay アクション
 指定した時間を待つアクションです。処理を待機したい場所の前に追加し、タイミングを調整します。
Wait For アクション
 任意のオブジェクトの存在/消失状態を待機するアクションです。期待の画面に遷移すると、次のアクションが実行されます。

アクションの追加方法については、 ユーザーガイドの アクションの管理 – 新しいアクションの追加 をご確認ください。
各アクションの内容については、Blog記事の レコーディングモジュールのアクション機能について にて紹介しています。

2. windowコントロールで表示しているダイアログ処理

テスト対象アプリケーション内でwindow.confirm()やwindow.alert()といったwindowコントロールで表示しているダイアログが存在する場合、レコーディングではダイアログ内のオブジェクト情報を取得することができません。
この場合、レコーディング ではなく Ranorex Spy を使用してオブジェクト情報を取得する必要があります。

具体例として、window.alert() を使用しているダイアログへの対応策をご紹介します。
今回は、Ranorex 社が公開している以下のサンプルWebアプリケーションを利用します。
https://www.ranorex.com/web-testing-examples/

上記ページの Open dialog ボタンをクリックすると、window.alert() で実装されているダイアログが表示されます。

レコーディング操作にてダイアログ内のOKボタンを操作しようとしても、OKボタンをオブジェクト認識できず、画面全体が1つのオブジェクトとして認識されてしまいます。
そのため、以下の手順にてRanorex Spyを使用し、OKボタンのオブジェクトを取得します。
※対象のオブジェクト(OKボタン)を画面上に表示した後、以下の手順を実施します。

  1. Ranorex Studio を起動し、対象のソリューションを開きます。
  2. 任意のレコーディングモジュールを開きます。
  3. メニュバーから、Spyの起動 をクリックします。
  4. BROWSER & RESULTS の一覧にてツリー要素を展開し、対象のオブジェクトを選択します。
    ※ダイアログ内の情報は、Form XXXX Google Chrome 要素の配下に存在します。
  5. 対象のオブジェクト(Button ‘OK’)を右クリックし、リポジトリに追加 をクリックします。
Ranorex Spy画面
リポジトリに追加

上記手順により、リポジトリ内に対象のオブジェクト情報が追加されます。

リポジトリ

また、追加したオブジェクトを選択し、アクションテーブルへドラッグアンドドロップすることで、対象オブジェクトに対するアクションを追加することができます。

アクションの追加方法については、ユーザーガイドの リポジトリ アイテムをアクション テーブルにドラッグ アンド ドロップ をご参照ください。
Ranorex Spy については、Blog記事の Ranorex Spy の使用方法 をご参照ください。

まとめ

今回は、Ranorex でWebアプリケーションをテストする際のポイントについてご紹介しました。
テスト対象がWebアプリケーションの場合には、ぜひ本記事でご紹介したポイントを基に、Ranorex の利用に取り組んでみてください。