今回は、HOTEL PLANISPHEREのWebサイトに対して、UIテストを自動化してみました。
■ HOTEL PLANISPHEREとは？
テスト自動化の学習用の練習サイトとして一般公開されているホテル予約のWebサイトです。ログインアカウントの登録、ログイン、ホテルの予約などのページが用意されています。
対象サイト：https://hotel-example-site.takeyaqa.dev/
※現在（2025/1/17 時点）、英語版と日本語版のページが提供されています。
■ 自動化ツール
UIテストを自動化するためのツールとしてRanorexを使用しました。
Ranorexは、デスクトップ（Windows）、Web、モバイルのアプリに対応した有償ツールです。
製品サイト：https://ranorex.techmatrix.jp/
■ UIテスト自動化
1. テストシナリオ
今回は、以下のシナリオを自動化したいと思います。
１）ログイン
２）宿泊予約：素泊まり
３）宿泊予約：エステ・マッサージプラン
各シナリオのテストケースは以下のようになります。
テストケース
１）ログイン
- 画面操作
① メニュー一覧から"ログイン"をクリック
② "メールアドレス"を入力
③ "パスワード"を入力
④ "ログイン"をクリック - 検証項目
○ ログイン後のマイページで、会員ランクが"プレミアム"であること - テストデータ
○ メールアドレス： ichiro@example.com
○ パスワード： password
2）宿泊予約：素泊まり
- 画面操作
① メニュー一覧から"宿泊予約"をクリック
② "素泊まり"にある"このプランを予約"をクリック
③ "宿泊予約"画面操作
１）"宿泊日"を入力
２）"宿泊数"を入力
３）"人数"を入力
４）"追加プラン"を選択
５）"確認のご連絡"を選択
６）"ご要望・ご連絡事項等ありましたらご記入ください"を入力
７）"予約内容を確認する"をクリック
④ "宿泊予約確認"画面操作
１）"この内容で予約する"をクリック
２）"予約を完了しました"ダイアログにて"閉じる"をクリック - 検証項目
○ ③の操作画面の"宿泊予約"に"素泊まり"と表示されていること
○ ③の操作画面の"氏名"に、"山田一郎"と入力されていること
○ ④の操作画面の"宿泊予約確認"で"合計金額"が正しいこと - テストデータ
○ テストデータ①
‐ "宿泊予約"画面の入力データ
・ 宿泊日：2025/1/25
・ 宿泊数：1
・ 人数：1
・ 追加プラン：朝食バイキング
・ 確認のご連絡：希望しない
‐ "宿泊予約確認"画面
・ 合計金額日：7,875円
○ テストデータ②
‐ "宿泊予約"画面の入力データ
・ 宿泊日：2025/1/24
・ 宿泊数：1
・ 人数：1
・ 追加プラン：朝食バイキング
・ 確認のご連絡：希望しない
‐ "宿泊予約確認"画面
・ 合計金額日：6,500円
3）宿泊予約：エステ・マッサージプラン
- 画面操作
① メニュー一覧から"宿泊予約"をクリック
② "エステ・マッサージプラン"にある"このプランを予約"をクリック
③ "宿泊予約"画面操作
１）"宿泊日"を入力
２）"宿泊数"を入力
３）"人数"を入力
４）"追加プラン"を選択
５）"確認のご連絡"を選択
６）"ご要望・ご連絡事項等ありましたらご記入ください"を入力
７）"予約内容を確認する"をクリック
④ "宿泊予約確認"画面操作
１）"この内容で予約する"をクリック
２）"予約を完了しました"ダイアログにて"閉じる"をクリック - 検証項目
○ ③の操作画面の"宿泊予約"に"素泊まり"と表示されていること
○ ④の操作画面の"宿泊予約確認"で"合計金額"が正しいこと - テストデータ
○ "宿泊予約"画面の入力データ
‐ 宿泊日：2025/1/25
‐ 宿泊数：2
‐ 人数：2
‐ 追加プラン：昼からチェックインプラン
‐ 確認のご連絡：希望しない
○ "宿泊予約確認"画面
‐ 合計金額日：47,000円
2. テストスクリプトの作成
はじめに各テストケースに対するテストスクリプトを作成します。
Ranorexでアプリの画面操作をレコーディングし、テストスクリプトを自動生成します。
すべての画面操作をレコーディングした後、画面ごとにテストスクリプトを分割します。今回のテストでは、以下の６つのテストスクリプトを作成しました。
- OpenBrowser
- CloseBrowser
- トップ画面
- ログイン画面
- 宿泊プラン一覧画面
- 宿泊予約画面
- 宿泊予約確認画面
※OpenBrowserは、Webブラウザーを起動し、テスト対象サイトにアクセスするための事前処理のテストスクリプトになり、CloseBrowserは、Webブラウザーを閉じるための後処理のテストスクリプトになります。Ranorexでは、これらのテストスクリプトを自動生成してくれます。
※「宿泊予約：素泊まり」のテストケースは、テストデータが２つあるため、データ駆動型テストを使用しました。
※「宿泊予約：素泊まり」と、「宿泊予約：エステ・マッサージプラン」は、宿泊予約と宿泊予約確認画面の操作やオブジェクト情報（XPath）が同じであるため、同一のテストスクリプトを使用しました。
3. テスト実行
テストスクリプトを使用して、作成したテストケースが以下になります。
Ranorexでは、テストスイートにテストケースを設定します。
今回は、画面単位でテストスクリプトを作成しましたが、画面数が多いアプリの場合には機能単位などで作成するなど、アプリやテスト内容に合わせて作成するのが良いかと思います。
※テストはテストスイート単位で実行され、テストの成功・失敗は、テストケース単位でレポートされます。
4.テスト結果
実行したテストスイート（テストケース）の結果レポートが以下になります。
「ログイン」、「宿泊予約：素泊まり」、「宿泊予約：エステ・マッサージプラン」のテストケースの結果が確認できます。
※「宿泊予約：素泊まり」は、テストデータが２つあるため、2回分のテスト結果がレポートされています。
レポート内容として、サマリーおよび、各テストケースで実行されたテストスクリプトの実行ログと検証の結果（成功・失敗）、使用されたテストデータがレポートされます。また、エビデンスとしてスクリーンショットなどもレポートされます。
テストケースのバリデーションが失敗した場合のレポートが以下になります。
■ まとめ
今回は、HOTEL PLANISPHERE の UIテストを自動化してみました。
Ranorexは、アプリやテスト内容に合わせてテストスクリプトやテストケースの構成を自由に変えられるため、汎用性の高いツールといえます。
今回、作成したRanorexのソリューションは、以下のGitHubからダウンロードできます。
https://github.com/mito-tmx/RxSmpSol
※ソリューションは、Ranorex v11.3.3を使用しています。