# エレメントロケーター

ウェブとモバイルアプリケーションのテストを実行する時には、それらと相互作用するにはページまたは画面の要素の特定が必要あります。
Gondolaは、モバイルとウェブテストに多くのロケーターをサポートします。
また、Android、iOS、ウェブに対応する単一のページオブジェクトを作成するには、ILocatorインターフェースを使用できます。

# ウェブロケーター

ロケーターとしてcss、XPath、className、tagNameを利用して要素が特定できます。
POMビルダーを使用して、ウェブの要素に最適なロケーターを検索できます。

# POMビルダーを使って要素の特定

POMビルダーをインストールします。

# Gondola SE

このロケーターはGondola SEにコーヒーできて貼り付けられます。

  1. https://demo.gondolatest.com に遷移します
  2. 右上の隅Sale'sリンクを右クリックします
  3. POM Builder-Quick Copy セクションをフォーカスし、XPathを選択します POMB Quick Copy

# TypeScript

コードを記録するため、このフォーマットを使用します。

  1. https://demo.gondolatest.com に遷移します
  2. 要素を右クリックして、検証を選択します
  3. インスペクターにPOM Builderタブをクリックします
  4. Outputの下にGondolaを選択します
  5. 使用したいロケータータイプの隣にあるコピーボタンPOM Builder Copy Iconをクリックします

POM Builder

TIP

詳細については、こちら のチュートリアルをご覧ください。

# POM Builderを使用したロケーターのテスト

  1. https://demo.gondolatest.com に遷移します
  2. 要素を右クリックして、検証を選択します
  3. インスペクターにPOM Builderタブをクリックします
  4. テストを実行したいロケータータイプの隣にあるコピーボタンPOM Builder Test Iconをクリックします
  5. tagNameロケーターの隣にあるテストボタンをクリックすると、フィールドがどうオレンジ色に変化するか注意します。これは、一つ以上の要素がliタグを利用しているためです。 POM Builder Bad Locator
  6. この場合では、POMビルダーがXPathの使用をお勧めします。XPathロケーターをテストすると、ポイントする要素1つだけがわかります。 POM Builder Good Locator

TIP

POMビルダーと良いロケーターの選択方法の詳細のために、良くて悪いロケーターを区別する5つのヒントの記事を参照ください。

# モバイルエレメントロケーター

モバイルのテストでは、自動化フローとの対話を行うには、要素を特定する必要があります。Appiumは WebDriver のロケーター戦略をサポートしています。ロケーター戦略のリストのため、ロケーター戦略を参照してください。

# Appiumデスクトップ

TIP

要素を調べるには、まず、必要な機能を指定をして、自動化するプラットフォームとアプリケーションの種類をAppiumサーバーに指示する必要があります。

# Appiumを使ったロケーターの特定

必要条件: モバイルテストのためマシンの設定をしたのを確認します。

  1. Appiumデスクトップを開いて、新しサーバーを起動します
  2. Fileメニューに移動して、"New Session Window"をクリックします
  3. 必要な機能を入力します

これは、サーバー設定ダイアログのjson表現セクションに貼り付けることができる必要な機能の例です。

{
  "platformName": "android",
  "deviceName": "emulator",
  "udid": "emulator-5554",
  "automationName": "UiAutomator2",
  "newCommandTimeout": 600,
  "app": "E:\\path\\to\\your.apk"
}
  1. セッションを開始します
  2. ロケーターを見つけたいアプリの画面に移動して、Appiumの更新ボタンを押します Appium Refresh Button
  3. 使用したい要素をクリックするか、XMLツリーでを見つけます
  4. accessibility idid、またはXPathをコピーします
  5. ILocatorを利用して、プロパティを保存します

Appium Desktop Inspector

Appium Desktopは、アプリの階層をXMLツリーで表示します。

Appium Desktopをインストールするには、または詳しい情報を取得するには、こちらをクリックしてください。

# ILocators

  • ILocatorインターフェースを使用すると、複数のプラットフォームで同じPage Objectを使用できます。
    1つILocatorインターフェースを定義し、iOS、Android、ウェブのプロパティを入力できます。
    Gondolaは、現在のAUTに適切なものを自動的に選択します。
  • モバイルデバイスで自動化テストを実行する場合、クロスプラットフォームテストに使用できるロケーターを定義することをお勧めします。
  • GondolaでILocatorを宣言するには、ILocatorインターフェースを使用します。

public static locatorName: ILocator = {
       // ロケータータイプ
        xpath: "//li[.='Sale']",
        android: "~Sale"
        iOS: "#iOSLocator"
    };

  • iOSは、次のロケータータイプをサポートしています。
    • XPath
      public xpath: ILocator = { 
        xpath: "//XCUIElementTypeButton[@name=\"gondola\"]"
      }
      
    • className:XCUI要素のフルネームであり、XCUIElementTypeで始まります
      public className: ILocator = { 
        className: "XCUIElementTypeButton"
      }
      
    • name:要素の名前
      public name: ILocator = { 
        name: "Gondola"
      }
      
    • value:要素の値要素の値
      public value: ILocator = { 
        value: "Gondola"
      }
      
  • Androidは、次のロケータータイプをサポートしています。
    • XPath
      public xpath: ILocator = { 
        xpath: "//android.widget.Button[@name=\"gondola\"]"
      }
      
    • className:これは、UIAutomator2クラスのフルネームです(例:android.widget.Button)
      public className: ILocator = { 
        className: "android.widget.Button"
      }
      
    • id:要素のId
      public id: ILocator = { 
        id: "Gondola"
      }
      

TIP

ウェブテストでは、単一のロケータータイプを利用することをお勧めします。
つまり、css、className、tagName、frame、id、name、value または XPathです。

WARNING

android プロパティを定義せずに、AndroidアプリでILocatorを利用する場合、デフォルトプロパティが使用されます(設定されているどちらか)。

# XPathクエリの作成

キャプチャする要素には、accessibility id (~)などの一意のプロパティがない場合があります。
この場合には、htmlタグといくつかのプロパティを使用して、XPathクエリを作成して、要素にアクセスできます。
これはXPathクエリと呼ばれます。 クエリを作成するためのいくつかの便利なポイントは次のとおりです。

モバイルテストの場合、XPathは要素を見つけるための強力なツールですが、モバイルでは非常に大きなパフォーマンスコストがかかります。これは、XMLおよびXPathタイプのクエリがGoogleとAppleによってネイティブにサポートされていないためです。少なくとも、私たちが望んでいる方法ではサポートされていません。これにより、Gondolaと使用しているライブラリは、XPathを使用して要素を確実に見つけるために、内部で多くの複雑な処理を行うようになります。したがって、XPathを使用できますが、accessibility IDsなどを使用できるロケーター戦略はさらに優れています。

  1. XPathクエリを作成するには、現在のページの他の要素から要素を区別するのに役立つ一意の値を持つプロパティを定義する必要があります。

    • クエリの一般的な式://type[@property ='value']
    • 例://android.widget.EditText[@content-desc ="User Name"]
    • 説明:このクエリは、タイプがandroid.widget.EditTextで、プロパティcontent-descの値がUser Nameである要素を検索します。
  2. 特定の文字列を含む要素を検索するには、*contains()*を使用します。

    • //android.widget.EditText[contains(@text, "User")]
  3. テキストが文字列と完全に一致する要素を検索するには、androidの場合は*@text*、iOSの場合は*@label*を使用します。

    • //android.widget.EditText[@text = "UserName"]
    • //XCUIElementTypeTextField[@label ="UserName"]
    • Androidのtextプロパティは通常にiOSのlabelプロパティとして表示されます。
  4. 2つの条件を組み合わせるには、orandを使用します。

    • これはAndroidとiOSの両方で機能します。//*[@text = "UserName" or @label ="UserName"]
    • andを使用する例:
      • //*[@text = "UserName" and @label ="UserName"]
    • 次の形式でandを使用することもきます:[ ][ ]
      • //*[@text = "UserName"][@label ="UserName"]
    • " * "を使用すると、すべての要素が検索され、パフォーマンスが低下する可能性があります。
    • Gondolaクエリは、パフォーマンスとクロスプラットフォームテスト用に最適化する必要があります。
    {
      android:{xpath:"//android.widget.EditText[@text = 'UserName']"},
      ios:{xpath:"//XCUIElementTypeTextField[@label ='UserName']"}
    }
    
  5. クエリが要素のグループを返す場合には、戻した配列のインデックスを使用して特定の要素をアクセスできます。例えば、次は深さ1の配列の3番目の要素をアクセスする場合です。

    • (//*[contains(@text, "us")])[3]
    • 配列の最後の要素をアクセスするには、*last()*を使用できます。
      • (//*[contains(@text, "us")])[last()]
  6. 特定のプロパティを持たない要素を検索するには、*not()*を使用します。

    • //android.widget.EditText[not(@visible)]
  7. 要素の検索が非常に複雑である場合、一意の/安定したプロパティを持つアンカーを使用して、それに関連する要素を見つけることができます。 要素ツリーを使用したいくつかの例を次に示します。

    <book category="layer1">
        <book category="web" cover="paperback">
          <title>Learning XML</title>
          <author>Erik T. Ray</author>
          <year>2003</year>
          <price>39.95</price>
        </book>
    </book>
    
    • 要素ツリーを上に移動するには、ancestorを使用します:
      • //title/ancestor::book -> 2つのbook要素を戻す
    • 要素ツリーを下に移動するには、childを使用します:
      • ./book/child::title -> title要素を戻す
    • 要素ツリーの同じレベルで前方に移動するには、following-siblingを使用する:
      • //book/child::title//following-sibling::price -> price要素を戻す
    • 要素ツリーの同じレベルで後方に移動するには-> preceding-siblingを使用する:
      • //book/child::price//preceding-sibling::title -> title要素を戻す
最終更新: 2020/10/5 4:04:02