クロスブラウザー テスト

クロスブラウザー テストは、複数のブラウザー間で、ひとつのテストを実行することを意味します。これにより、多くの時間を節約し、メンテナンス作業を減らすことができますが、いくつかの課題があります。この章では、クロスブラウザー テストの例を、順を追って説明します。

テスト シナリオ

Ranorex Studio を使用して、Microsoft Internet Explorer, Google Chrome, Mozilla Firefox の 3 種類のブラウザーでテストを実行します。これらすべてのブラウザーで動作する、1 つのテストを作成します。

クロスブラウザーの例を示すために、フリーの Dropbox アカウントを使用します。Dropbox は、Dropbox, Inc. および Dropbox International Unlimited Company の商標です。これらの利用規約およびプライバシー ポリシーが適用されます。Ranorex GmbH および Ranorex, Inc. は、Dropbox, Inc. といかなる提携もおこなっておりません。

テストは、以下の 4 ステップでおこないます。

Start

ブラウザーを起動し、www.dropbox.com へ移動します。
Sign in をクリックし、サインイン ページに移動します。

Sign-in

E-mail アドレスとパスワードを入力します。
Remember me オプションのチェックを外します。
Sign in をクリックします。

Check account

ここで、正しいアカウントにログインしているかを確認します。さまざまな方法がありますが、この例では、アカウントの画像をクリックして表示されるアカウント名を確認します。

アカウントの画像をクリックし、アカウント メニューを開きます。
表示されているアカウント名が、作成したアカウントの名前と同じであるかを確認します。(この例では、John Public)

Sign out

アカウントの画像をクリックし、アカウント メニューを開きます。(開かれていない場合)
Sign out をクリックします。

新しい Web テストの作成

⇢ Web テストの作成 で説明したように、まずは新しい Web テストを作成しますが、以下の点に注意してください。

• ソリューションに分かりやすい名前を付けます。(例: CrossBrowserTest)
• URL には、www.dropbox.com を指定します。
• ウィザードでは、ブラウザーを 1 つしか選択できません。ここでは Firefox を選択してください。あとで他のブラウザー用にテストを拡張します。
• レコーディングの設定では、ブラウザーをホワイトリストに追加 を選択してください。
• 完了をクリックします。新しいソリューションが表示されます。

レコーディングの前に

最初に、単一のブラウザーで Web テストをレコーディングします。その後、複数のブラウザーで動作するように修正をおこないます。

レコーディングを開始する前に、以下の準備をおこなう必要があります。(ウィザードで、ブラウザーを自動で起動 オプションを指定している場合には、この手順はスキップできます)

Firefox を起動します。
www.dropbox.com に移動します。

テストのレコーディング

レコーディング モジュール Recording1 を開いて、RECORD をクリックします。

Sign in をクリックします。
E-mail アドレスとパスワードを入力します。
Remember me のチェックを外します。
Sign in をクリックします。
ページのロードが完了するのを待ち、アカウントの画像をクリックします。

バリデーション

正しいアカウントにログインしているかを確認するための ⇢ バリデーション を追加します。今回は、John Public というアカウント名であることを確認します。

Recorder コントロールパネルで Validate をクリックします。

アカウント メニューのアカウント名にマウス オーバーします。現在選択中の要素が紫色の枠で囲われます。クリックして要素を選択します。

開かれたウィンドウで、正しい要素が選択されていることを確認します。誤った要素の場合には、正しい要素を選択し、次へ をクリックします。
アカウント名の Exists および InnerText 属性が選択されていることを確認し、OK をクリックします。

レコーディングの完了

バリデーションの設定が完了すると、Ranorex Studio はレコーディングを再開します。

アカウント メニューで、Sign out をクリックします。
Recorder コントロールパネルで Stop をクリックし、レコーディングを完了します。

結果

レコーディングが停止されると、Ranorex Studio に戻り、レコーディングの結果が表示されます。最初のバージョンのクロスブラウザー テストを確認してみましょう。

アクション テーブルには、11 個のアクションがあります。(レコーディングの状況により、アクションの数は多少異なる場合があります）
リポジトリには、2 つのフォルダーで構成された、8 個のリポジトリ アイテムがあります。

クロスブラウザー対応に向けたテストの最適化

テストをクロスブラウザー対応にする前に、テストを最適化する必要があります。

キー シーケンスの結合

Ranorex Studio は、キー シーケンスを分割する場合があります。これはたとえば、キー入力が遅かったりする場合に発生します。キー シーケンスの内容を分かりやすくするため、キー シーケンスを結合する必要があります。

結合したい Key sequence アクションを複数選択し、右クリック メニューを開きます。
選択中のキーボード項目をマージ をクリックします。

キー シーケンス コンテンツの最適化

特殊文字を入力した場合など、キー シーケンスのコンテンツが複雑になっている場合があります。このような場合には、アクション テーブルで手動で修正してください。

以下の例では、余分なキー押下の内容を、@ で置き換えています。

最適化前
最適化後

動的な識別子の検索と置換

多くのアプリケーションには、いわゆる動的な UI 要素が含まれています。これらの要素は、例えば Web ページをリロードした時など、特定のイベントが発生するたびに変化します。多くの場合、自動テスト ツールで、これらの動的な UI 要素を確実に識別することは困難です。これは、静的な UI 要素に対しては堅牢な識別子 (要素の ID など) が、動的な UI 要素の場合には、常に変化するためです。そのため、動的な UI 要素に対しては、他の識別子を使用する必要があります。

Web 要素の場合、Ranorex Studio は、UI 要素が動的であることを識別するためのアルゴリズムを使用します。これにより、動的な識別子は無視され、代わりに、より堅牢な静的な識別子が使用されます。したがって通常は、ユーザーがリポジトリ アイテムから動的な識別子を見つけ出して編集する必要はありません。しかしながら、動的な識別子を検出できず、手動で修正する必要がある場合があります。

動的な識別子は、RanoreXPath 上では通常、任意の接頭辞と、要素がロードされるたびに変更される長い文字列の組み合わせで表示されます。

今回の例では、以下のように修正しています。

空のテキスト フィールド

自動化テストでは、テキスト フィールドに何らかのデータが入力される前に、それが空であることを確認するのをおすすめします。

図にある 4 つのアクションは、リポジトリ アイテム LongEmail によって表されるテキスト フィールドに、メールアドレスを入力するアクションです。

テキスト フィールドのクリック
Ctrl+A による、フィールド内のすべてのテキストの選択
Delete によるテキストの削除
E-mail アドレスの入力

テキスト フィールドが既に空の場合には、アクション 2 および 3 は特に意味を持ちませんが、テストは問題なく継続されます。他の方法としては、これら 4 つのアクションの代わりに Set value アクションを使用して、値を入力することも、フィールドを空にすることもできます。

テストの構造化

テストを構造化することを常に意識してください。アクションをさまざまなレコーディング モジュールで配置し、テスト スイートを使用して構造化します。

この例では、レコーディングされたアクションを、以下のようなモジュールおよびテスト スイート構造にしています。

Setup 領域には、ブラウザーを起動して URL を開くためのモジュールがあります。
サインイン ページに移動し、Dropbox にサインインし、アカウントをチェックして、ログアウトするための 4 つのレコーディング モジュールがあります。
Teardown 領域には、ブラウザーを閉じるためのモジュールがあります。

クロスブラウザーへの対応

テストの最適化が完了したので、クロスブラウザー対応を実装する準備ができました。

クロスブラウザー テストの実装には、データ駆動型テストと変数を使用します。

ブラウザーの種類を変数として宣言

最初のステップとして、OpenBrowser.rxrec モジュールにある、ブラウザーを固定で指定している箇所を、変数で置き換える必要があります。この変数は、テスト実行中に各種ブラウザーを値として受け取ります。

Browser プロパティのドロップダウン メニューを開き、As new variable… をクリックします。
変数の名前を入力 (例: selectBrowser) し、OK をクリックします。

ブラウザーの種類が変数化されます。

ブラウザーを指定するデータソースの作成

次のステップとして、変数にブラウザーの種類を引き渡すデータソースを作成します。

テスト スイート ビューでテスト ケースを選択し右クリック メニューを開きます。
データ ソース… をクリックします。

新規 > Simple data table をクリックし、データソースに名前 (例: BrowserList) を付けます。
Add column… および Add row… で、以下のようなデータを作成します。
OK をクリックします。

データと変数のバインディング

テスト スイート ビューでテスト ケースを選択し、右クリック メニューを開きます。
データ バインディング… をクリックします。

変数のバインド > Module variable のドロップダウンから、変数 OpenBrowser.selectBrowser を選択し、データソースの Browser カラムとでバインドします。
OK をクリックします。

クロスブラウザー テストの実行

最終的なクロスブラウザー テストは、テスト スイートでは以下のようになります。

Setup/Teardown 領域と各モジュールを含むテスト ケースを持つテスト スイート構造
3 行のデータがある BrowserList データソースを含むテスト ケース
データソースにバインドされているひとつの変数を含む OpenBrowser モジュール

結果

テスト実行後のレポートは以下のようになります。

3 つのテスト ケースが正常に完了しています。
テスト ケースが、データソースの各行に対して 1 回ずつ、つまり、各ブラウザーごとに 1 回、計 3 回実行されています。したがって、 3 つのテスト ケースが成功しています。

OpenBrowser モジュールの詳細で、変数に渡されている値を確認できます。

サンプル ソリューションのダウンロード

以下からサンプル ソリューションをダウンロードできます。

インストール:

任意のフォルダーに解凍します。
Ranorex Studio を起動し、ソリューション ファイル CrossBrowserTest.rxsln を開きます。