Applitools Eyes連携 前編：Web画面全体の画像検証
今回は、Ranorex と Applitools Eyes の連携による画像検証について紹介します。前編では、スクロールが必要なWeb画面全体を検証する方法について説明します。
Applitools Eyesとは、ビジュアルAIを用いたテスト自動化プラットフォームです。 画像を用いた検証に特化したツールで、通常Selenium や Appium などで作成した自動テストシナリオに組み込んで使用します。Selenium や Appium と組み合わせて使う場合はコーディングが必須となりますが、Ranorex との連携では、コーディングなしで使用することができます。
今回は Applitools Eyes の無償アカウントを利用して、Ranorex のシナリオ内で Applitools Eyes の画像比較を行う方法について検証しました。
※本検証では、Ranorex v9.5.3を使用しています。
※本検証は、Applitools Eyes との連携によるテスト実行において、動作を保証するものではありません。また、本検証に関するサポートへの問い合わせは受付けておりませんので、予めご了承いただけます様、お願いいたします。
目次
Applitools Eyes 連携の手順として、以下の操作を実施します。各リンクをクリックすると、ページ内の該当箇所にジャンプできます。
また連携手順に補足して、以下の手順を説明しています。
1. Applitools アカウントの作成
Applitoolsの公式サイト（https://auth.applitools.com/users/register）にアクセスします。
入力項目を記入し、「CREATE ACCOUNT」をクリックすると、入力したメールアドレスに確認メールが届きますので、メール本文の「Confirm Email」をクリックして認証を行います。
※Applitools Eyes 無償アカウントの場合、100回/月まで検証の実行が可能です。詳しくは、公式サイト(https://applitools.com/)をご確認ください。
アカウント作成が完了したら、公式サイト(https://applitools.com/)よりログインおよびサインインを行います。
初回ログイン時にはチュートリアルの画面が表示されますが、スキップして問題ありません。
2. API key の取得
ダッシュボード画面右上の人のアイコンをクリックし、プルダウンの「My API key」をクリックします。
ダイアログが表示されるので、右端のアイコンをクリックしてAPI keyの内容をコピーしておきます。
Ranorexでのシナリオ作成時に使用するので、値はメモしておいてください。
3. Ranorex ソリューションにパッケージを追加
Ranorex Studioを起動し、Web画面全体の検証を行いたい任意のRanorex ソリューションを開きます。 プロジェクトビューにてソリューションを右クリック – [パッケージの管理…]を選択します。
パッケージ管理の画面で、右側の検索ボックスに「Ranorex Applitools eyes」と入力して虫眼鏡アイコンをクリックします。
検索結果に表示された「Ranorex with Applitools Eyes」を選択し、[追加]をクリックし、パッケージ管理の画面を閉じます。
4. Ranorex テストスイート設定
テストスイートを右クリック – [Setupの追加]をクリックし、Setupの領域を追加します。同様の手順で、Teardownの領域も追加します。
モジュールブラウザーより、InitializeEyes を [SETUP] に、FinalizeEyes を [TEARDOWN] 配下にドラッグ&ドロップします。
InitializeEyes はApplitools Eyes側にAPI keyをはじめとした設定情報を渡すためのメソッドです。設定情報は、この後の手順でグローバルパラメーターを使用してRanorexシナリオ内で設定ができます。Applitools Eyes 連携したテストを開始する際に呼び出しが必要なメソッドのため、テストスイートの[SETUP]配下に配置します。
FinalizeEyes は、Applitools Eyesからテスト結果を受け取り、Ranorexレポートに出力するためのメソッドです。テストの最後に必ず呼び出す必要があるため、テストスイートの[TEARDOWN]配下に配置します。
テストスイートを右クリック – [グローバルパラメーター]をクリックします。
表示されたグローバルパラメーターの設定画面で、[自動生成]、[自動バインド]を順にクリックします。
EyesApiKey の Value に、メモしておいたApplitools Eyes の API key を入力します。
※Applitools Eyes無償版を利用する場合、 EyesApiKey のみの入力でテスト実行が可能となります。
EyesApiKey 以外の設定項目については、以下ユーザーガイドをご参照ください。
https://www.ranorex.com/ja/help/latest/interfaces-connectivity/applitools-eyes-integration/create-tests/
入力が完了したら、[OK]をクリックして画面を閉じます。ソリューションの変更を保存してください。
5. Ranorex シナリオの作成
Ranorex Studio にて、Applitools Eyesによるチェックをおこないたいレコーディングモジュールを開きます。
検証したいリポジトリアイテムを、リポジトリからアクション テーブルにドラッグ&ドロップします。Webアプリケーションの場合、以下のような RanoreXPath になっている、アプリフォルダーを対象にアクションを作成することで、スクロールを含めた画面全体を対象に画像比較がおこなえます。
・RanoreXPathの例：dom[@domain=’対象画面のURL’]
表示されたアクションの中で、[ユーザー コード] – [ライブラリから選択] で開いた画面で、 [VisualCheckpoint]をダブルクリックします。
6. テストの実行
作成したシナリオは、テストスイートでRUNをクリックすることで実行が可能です。
※Applitools Eyesに対し、API Keyをグローバルパラメーターで渡しているため、モジュール単位での実行(RUN RECORDING)を行うとVisualCheckpointメソッドの実行に失敗します。VisualCheckpointが含まれるレコーディングモジュールは、必ずテストスイートより実行するようご注意ください
7. 結果の確認
VisualCheckpointによる検証をおこなう場合、シナリオの初回実行時の画像が期待画像として登録されるため、事前に期待画像を登録しておく必要はありません。
初回の実行時は検証は実行されず、Ranorex レポートでは、TEARDOWNに以下のような警告が表示されます。
Applitools backend のリンクをクリックすると、Applitools Eyesの管理画面が開き、期待画像が確認できます。
管理画面で、テストケース名をクリックすると、テスト実行時に取得したスクリーンショットが表示されます。
画像をクリックすると、画面の詳細が確認できます。
・Web画面のスクリーンショット取得方式の変更
今回の例では、スクリーンショット内にヘッダーなど表示位置を固定したオブジェクトが、画面の切り替わりのタイミングで毎回映り込んでしまっているため、設定を変更して再実行します。
VisualCheckpointを実行しているレコーディングモジュールを開き、[新しいアクションの追加] – [ユーザー コード] – [ライブラリから選択] で開いた画面で、 [ChangeScreenshotCaptureBehaviour]を選択し、[選択項目を追加]をクリックします。
User codeアクションが追加されますので、VisualCheckpointの前に配置します。
ChangeScreenshotCaptureBehaviour の引数 flagName に HidePositionFixed と入力することで、CSSでpositon:fixedのオブジェクトを非表示にした状態で、スクリーンショットが取得されます。
※ChangeScreenshotCaptureBehaviourはWebdocument要素における、スクリーンショットのキャプチャ方式を定義します。
None/DisableCssTransitions/HidePositionFixed の3種類の方式を設定できます。
・テストの再実行＆結果の確認
Ranorex Studio のテストスイートより、テストを再実行します。今回はVisualCheckpointが失敗し、以下のようなレポートが出力されました。
Applitools backend のリンクをクリックして管理画面を確認すると、ステータスが[Unsolved]になっていますので、詳細を確認します。
固定のヘッダーなどが非表示になった箇所を中心に、画像に差分がある部分がピンク色にハイライトされています。
下の画像で赤枠に囲ったボタンをクリックすると、右側の画像を期待画像として入れ替えることができます。今回は、ヘッダーの映り込みがない画像を期待画像としたいため、このボタンをクリックして、ダイアログを閉じます。
「Unsolved」だったステータスが「Passed」に変わりました。右側の保存ボタンをクリックすると、入力した変更が保存されます。
まとめ
Applitools Eyes 連携の機能を使用することで、Ranorexでは実現が難しい、スクロールを含めたWeb画面全体での画像比較をおこなえます。Applitools Eyes の無償アカウントに関しては、どなたでも作成可能ですので、興味のある方はぜひお試しください。
次回の記事(後編)では、Applitools Eyes 連携の機能を利用した、PDFファイルの画像検証の手順について解説していきたいと思います。
