UI Mapifyとの操作

TestArchitectの「UI Mapify」を使用すると、対象ウェブサイト内のWeb要素をキャプチャし、interface elementとしてエクスポートすることができます。UI Mapifyはロケーターを自動的に生成し、それらをインタフェースエンティティに保存することができます。このトピックでは、UI Mapifyのキャプチャ機能に関する一般的な情報を説明します。

1. UI Mapifyの起動

TestArchitect で、新しいインタフェースエンティティを作成するか、既存のものを開いて編集します。場合によってチェックアウト if needed.
TestArchitectのメニューバーから、「ツール」＞「UI Mapify」 を選択します。
ショートカット: または、キーボードでCtrl+F7を押すか、ツールバーの 「UI Mapify」 ボタンをクリックします。
TestArchitectの 「UI Mapifyでエレメントを取り込む」 というダイアログが表示され、URLを指定できるようになります。
- URL (必須): テスト対象のウェブサイトのURL。
- ブラウザ(任意): Web要素をキャプチャするために使用したブラウザ。
  注意:
  TestArchitect UI Mapify はChromium拡張機能です。使用する前に、お使いのブラウザに追加する必要があります。現在、TestArchitect UI Mapify はChromeのみに対応しています。
「開始」 ボタンをクリックして、UI Mapifyセクッションが起動されます。

2. Web要素の検査

要素を確認するには、以下の手順に従ってください：

「要素を検査」 ボタンをクリックして、検査モードをオンにします。
目的の要素にマウスを合わせてください。UI Mapifyでは、要素の上にホバーするとその要素がオレンジ色の枠線で目立つよう表示されます。
その要素を左クリックします。
UI Mapifyが自動的にロケーター値を生成します。

注意:
- 推奨アイコン は、このロケーター値が UI Mapifyによって自動テストでの使用が推奨されていることを示します。 「推奨」 の基準は、一意性と安定性です。
- Shadow DOM バッジ が表示されていると、検査対象の要素が Shadow DOM 内に存在することを示します。この要素を TestArchitect インタフェースエンティティに保存すると、その要素を見つけるために必要な全てのロケーター情報が自動的に取得されます。
- 特定の種類の要素は、マウスホバーや別の要素のクリックなど、UIとのインタラクション後のみ表示されます。ホットキー「Ctrl + Shift + X」 で検査を有効にすると、こうした要素をキャプチャできます。詳細については、以下の手順を参照してください。
- テスト対象アプリケーション（AUT）上に要素を表示させます。
- 「Ctrl + Shift + X」 を同時に押します。
- 該当要素にマウスを合わせ、左クリックしてそのロケーター値を取得します。
注意:
現在、ホットキーはJavaScript要素のみに対応しています。

3. ロケーターの検証

UI Mapify では、テキストボックスにロケーター値を入力・変更することで、ロケーターを生成できます。
「検索」 ボタンをクリックしてロケーターを確認し、必要に応じて調整を加え、一意で安定した状態になるまで再度確認を繰り返すことができます。
「検索」 ボタンをクリックすると、ロケーター値の横に 「一致件数」 が表示され、このロケーターに一致する要素の数をお知らせします。
「一致件数」の形式：{一致した要素の中で現在インデックス（検索順）}/{一致要素の総数} を表示します。
結果は以下の通りです :
- 0/0 : ロケーターに一致する要素はありません。
- 1/1 : ロケーターに一致する要素が1つあります。
- 1/n : ロケーターに一致する要素が合計n件あります。
ロケーターの検証結果がポップアップメッセージに表示されます。
前/次の一致する要素 : 一致する要素が多くの場合、この矢印ボタンを使用して別の一致する要素に移動できます。要素を簡単に見つけられるよう、ハイライトされた枠が示されます。
注意:
ビューポートの範囲外にある要素が一致する場合があります。その場合は、テスト対象アプリケーション（AUT）を上下にスクロールして確認する必要があるかもしれません。
シャドウDOM要素を検証する際、「一致なし」という結果になる要因はいくつかありますが、最も一般的なのは、1つ以上のシャドウホスト上のロケーターが古くなっていることです。これらのシャドウホストロケーターを手動で更新しようとするのではなく、ターゲット要素を再検査して保存することで、必要なすべてのロケーターを自動的に更新できるようになります。

4. インタフェースエンティティにロケーターの保存

現在のロケーターをTestArchitectのインタフェースエンティティにエクスポートするには、以下の手順を実行する必要があります。

「TA名」 テキストボックスに、そのロケーターの名前が正しく指定されていることを確認してください。
制限：　:
TA名には、以下の特殊文字を使用することはできません: \ / : * ? " ’ < > | # [ ]
「保存」 ボタンをクリックします。
注意:
UI Mapifyからロケーターを受け取るには、TestArchitectでチェックアウト済みのインタフェースエンティティを開く必要があります。
予期せぬ問題が発生しないよう、UI Mapify で 「保存」 をクリックする前に、そのインタフェースエンティティがアクティブなタブになっていることを確認してください。
UI Mapifyでのロケーターおよび関連情報は、TestArchitectにinterface element（インタフェース要素）として記録されます。
注意:
シャドウDOM要素を保存すると、関連するすべてのシャドウホストロケーターも自動的にインタフェースエンティティに記録されます

5. TestArchitectから取得したインタフェース要素の検証

テスト対象のアプリケーションが時間の経過とともに変更されるにつれて、そのロケーターも変化します。そのため、それらに紐づけられるTestArchitectインタフェース要素も更新する必要があります。
通常、メンテナンスの必要性は、自動テストの対象となるアプリケーションの変更によって、自動テストが失敗した時点で初めて気づかれます。
UI Mapifyを使用すると、インタフェース要素のキャプチャされたロケーター値と、現在の AUT 上の要素の変更との相違点を調整することで、既存のインタフェース要素を維持することができます。インタフェース要素を検証するには：

AUT サイトを開いた状態でUI Mapifyを起動します。
対象の要素が含まれるページに移動します。
インタフェースエンティティエディタで、インタフェース要素を右クリックし、「ロケータを検証」 を選択します
AUTおよびUI Mapifyセッションが開かれている Chrome ブラウザを開いてください。WindowsのタスクバーでChromeのアイコンが点滅しています
UI Mapifyツールバーとポップアップで、以下のよう結果を確認します。

6. その他の機能

ツールバーの位置変更: 状況によっては、UI Mapifyが、要素をキャプチャするために操作が必要なウェブページの一部を隠してしまうことがあります。その場合は、UI Mapifyのロゴ部分をドラッグ＆ドロップして、ツールバーを別の場所に移動させることができます。
UI Mapifyの終了: セッションを終了するには、UI Mapifyツールバーの 「閉じる」 ボタンをクリックしてください。
確認ダイアログで 「OK」 をクリックすると、UI MapifyおよびUI Mapifyセッションに紐づけられるブラウザタブが閉じられます。