2021年3月12日 / 最終更新日時 : 2021年3月16日 user ツール連携

Ranorex + BrowserStack 連携の検証

今回は、RanorexとBrowserStackの連携によるモバイルテストの検証について紹介します。

BrowserStackは、デスクトップおよびモバイルにおけるWebテストのプラットフォームを提供するクラウドテストサービスです。本サービスを使用することで、複数プラットフォームにおけるテストや、古いバージョンのWebブラザーやOSの組み合わせによる特殊な環境でのテストなどを実施したい場合に簡単にそれらの環境を使用することができます。

BrowserStackで提供されているAutomateプロダクトでは、Seleniumサーバーが利用可能です。Ranorexでは、Selenium WebDriver連携に対応していることから、Automateプロダクトを使用することで、RanorexとBrowserStack連携によるWebアプリケーションのモバイルテストがおこなえるかを検証しました。

※今回の検証から外していますが、BrowserStackでは、iOS、Android以外に、Windows 環境も用意されています。

※本検証では、Ranorex v9.3.2を使用しています。

※本検証は、BrowserStackとの連携によるテスト実行において、動作を保証するものではありません。また、本検証に関するサポートへの問い合わせは受付けておりませんので、予めご了承いただけます様、お願いいたします。

1. BrowserStack：ユーザー登録/セットアップ

1. BrowserStackの公式サイト（https://www.browserstack.com/）にアクセスします。

2. FREE TRAIALをクリックし、アカウント登録をおこないます。
※本検証では、フリートライアル版を使用しました。

3. はじめて使用した場合、 BrowserStackにサインインすると以下のページが表示され、選択したプラットフォームおよびプロダクトでの使用方法の説明ページが表示されます。
これらページでは何もせずにスキップします。

4. Automateをクリックします。

5. はじめて利用する場合は、下図のページ（Selenium連携によるテスト方法の説明ページ）が表示されるため、Let’s get started! をクリックします。
2回目のテスト以降は、本ページは表示されずにダッシュボードが表示されます。

6. 右ペインから、C#を選択します

7. 左ペインの Capabilities にて、テスト実行環境（OS、デバイス）を選択します。

8. 右ペインの C#のコードから、以下のコード部分をコピーしてテキストエディタ（メモ帳でも何でも結構です）に張り付けておきます。

caps.SetCapability("browserName", "android"); 
caps.SetCapability("device", "Google Google Pixel 3"); 
caps.SetCapability("realMobile", "true"); 
caps.SetCapability("os_version", "9.0"); 
caps.SetCapability("browserstack.user", USERNAME); 
caps.SetCapability("browserstack.key", AUTOMATE_KEY); 
caps.SetCapability("name", “xxxxx First Test");

USERNAMEと、 AUTOMATE_KEYが変数として設定されているため、上位のコード部分から各変数に定義されている実際の値を設定するようにします。

string USERNAME = “xxxxx"; 
string AUTOMATE_KEY = “yyyyy"

以下のように修正したコードをテキストエディタに張り付けておきます。

caps.SetCapability("browserName", "android"); 
caps.SetCapability("device", "Google Google Pixel 3"); 
caps.SetCapability("realMobile", "true"); 
caps.SetCapability("os_version", "9.0"); 
caps.SetCapability("browserstack.user", “xxxxx”); 
caps.SetCapability("browserstack.key", “yyyyy”); 
caps.SetCapability("name", “xxxxx  First Test");

9. Integrating your changes をクリックします。

10. Running your test をクリックします。

11. 以下の画面が表示されたら、一度、このページをそのままにして、次のステップ（2. Ranorex Studio：テストの作成）の作業に移ります。

2. Ranorex Studio：テストの作成

BrowserStackでは、Seleniumサーバーで接続したデバイスの画面をローカル環境から操作することができないため、テストのレコーディングをおこなうことができません。以下の方法にてテストを作成する必要があります。

Google Chromeブラウザのデベロッパーツールを使用する

ブラウザーのメニューから その他ツール -> デベロッパーツール を選択することで、デベロッパーツールを使用することができます。デベロッパーツールでは、設定したデバイス情報の環境に合わせてWebアプリケーションを表示することができます。

モバイル端末（実機）を使用する

テスト作成用にデバイス端末を用意し、テストの作成をおこないます。
テスト実行においてBrowserStackを使用し、複数プラットフォームにて検証をおこないます。

3. Ranorex Studio：エンドポイントの設定/テスト実行

1. Ranorex Studio を起動し、対象のRanorex ソリューションを開きます。

2. エンドポイントの表示 メニューをクリックして、エンドポイントを開きます。

3. 表示されたエンドポイントにて、エンドポイントの追加 をクリックします。

4. 以下のようにエンドポイントの設定をおこないます。
　・エンドポイントタイプの選択：WebDriver
　・エンドポイント名：任意
　・アドレス：https://hub-cloud.browserstack.com/wd/hub

5. 接続のテストをクリックしてBrowserStackのSeleniumサーバーに接続できることを確認後、エンドポイントの追加 をクリックします。Seleniumサーバーに正常に接続できるとConnected のメッセージが表示されます。

6. エンドポイントの追加をクリックし、エンドポイントに設定内容を追加します。

7. エンドポイントが正常に追加されました のメッセージが表示されることを確認後、セットアップの完了 をクリックします

設定したエンドポイントが追加されます。

8. 追加したエンドポイントのメニューから 詳細の表示 を選択します。

9. Endpoint configurations の Add new configuration をクリックします。

10. Seleniumサーバーにアクセスするためのコンフィギュレーションを以下のように設定します。
　・name：任意
　・Capabilities JSON：”BrowserStack：ユーザー登録からセットアップまで“の手順8でテキストエディタに張り付けておいたコードをJSON形式にしたものを記述

元のコード：

caps.SetCapability("browserName", "android"); 
caps.SetCapability("device", "Google Google Pixel 3"); 
caps.SetCapability("realMobile", "true"); 
caps.SetCapability("os_version", "9.0"); 
caps.SetCapability("browserstack.user", “xxxxx”); 
caps.SetCapability("browserstack.key", “yyyyy”); 
caps.SetCapability("name", “xxxxx  First Test");

JSON形式に置き換えたコード：

{
 "browserName": "android",
 "device": "Google Pixel 3",
 "realMobile": "true",
 "os_version": "9.0",
 "browserstack.user": “xxxxx",
 "browserstack.key": “yyyyy",
 "name": “xxxxx First Test",
}

※”BrowserStack：ユーザー登録からセットアップまで“の手順8でAndroidの選択時に生成されるコードにおいて、device の値（デバイス名）をそのまま利用してもRanorexでは動作しません。たとえば、 Google Pixel 3を選択した場合、生成されるコードには、 Google Google Pixel 3 と定義されます。Ranorexで設定する際の正しい表記は、Google Pixel 3 です。（Samsung のデバイスなども、 Samsung Samsung～ となります）（2021年3月10日現在）
デバイス名に誤りがあった場合、Ranorexのテスト実行結果として Could not find device: {設定デバイス名} のエラーがレポートされます。

11. 保存をクリックします。

12. Active configuration にて、手順10の作業で name に設定したコンフィギュレーション名を選択します。

13. 戻るクリックして、エンドポイントの一覧画面に移行します。

14. 追加したエンドポイントのメニューから オートメーションルートに設定 を選択します。

15. Ranorex Studioにてテストを実行します。

16. テストを実行後、BrowserStackのサイトにて See your test on Dashboard をクリックしてダッシュボードを開きます。

補足：

Ranorexのエンドポイントにて、新たにコンフィギュレーションを追加したい場合、BrowserStackのWebサイトにおいて、Get help にある、References -> Selenium Capabilities を選択して表示される画面にてコンフィギュレーションを設定情報を確認することができます。

※テストコンフィギュレーションで指定する個々のオプションの説明も掲載されています。

4. Ranorex/BrowerStack：テスト結果の確認

BrowserStackのダッシュボードにて、テスト結果を確認できます。

ダッシュボードの左ペインにて、実行されたテストが表示されます。確認したいテストをクリックすることで、テスト実行結果を確認することができます。

ダッシュボードでは、テスト結果として、テスト実行時の動画や実行ログ、スクリーンショット、テスト実行環境などの情報を参照できます。また、動画はmp4形式で出力もできます。

まとめ

Ranorex + BrowserStack連携によるモバイルテストの検証結果から、以下のメリット/デメリットがあることが分かりました。

メリット：

テスト環境を利用（レンタル）する際に、OSやWebブラウザー情報などの設定が不要のため、自動化に向いている。
Ranorex（エンドポイント）との相性が良い
レポート機能として動画あるため、テスト失敗時に実際にどのような操作がおこなわれたかが確認しやすい。

デメリット：

海外にあるサーバーに接続するためか、テスト実行時におけるリクエスト/レスポンスが重い。
テスト作成では使用できないため、他の方法を検討する必要がある。
英語版のみの提供（サポートも英語のみと思われる）。

モバイルテストのテストでは、iOS/Androidでテストをおこなうためのモバイル端末（メーカー、OSバージョン）の導入コストや、最近、増えつつあるリモートワークにおけるテスト環境を運用をする難しさを考えたときに、BrowserStackのようなサービスを利用することで、これらの課題に対する１つの解決策になるかと思います。