ここでは、自動テストツールに欠かせないロケータについて説明します。
目次
1. ロケータの概要
ロケータとは
ロケータとは、テスト内で操作対象の画面要素を指定する部分のことを指します。
ロケータは、Webページやモバイルアプリの画面を構成するHTMLやXMLに基づいて組み立てられています。
下図は検索ボックスのUIと、それを構成するHTMLの例です。
ロケータの種類
id
idは、HTMLやXMLの要素を一意に識別するために使用される属性です。ページ内で一意のため、他の要素と混同されないという特長があります。ただ、実行ごとに値が変わる動的idや、React、Vue.js等のフレームワークが自動生成するidなど、ロケータに向かないものもあります。
XPath
XML文書やHTML文書内の要素を特定するためのパス表記法です。ファイルシステムのパスのように、要素の階層構造をたどって目的の要素を指定します。
XPathには主に2つの記述方式があります。
1. 絶対パス（/で開始）
xpath=/html/body/div[1]/form/input[2]
ドキュメントのルートから目的の要素まで、すべての階層を順番に指定します。階層構造に変更があると動作しなくなりやすいため、メンテナンス性が低くなる傾向があります。
2. 相対パス（//で開始）
xpath=//input[@id='username'] xpath=//div[@class='button']//span[text()='送信']
-
//: ドキュメント内のどこにでも該当する要素を検索 -
[@属性名='値']: 指定した属性と値を持つ要素を検索 -
[数字]: 同じ要素が複数ある場合のインデックス指定（1から開始） -
text(): 要素内のテキスト内容で検索
よく使う記法
-
parent::: 親要素 -
child::: 子要素 -
following-sibling::: 後続の兄弟要素 -
preceding-sibling::: 前の兄弟要素 -
contains(): 部分一致検索
例：xpath=//button[contains(@name, 'submit-btn')]
なお、MagicPodでのXPathの構文は、W3Cが定めるXPath 1.0が公式ドキュメントとなります。
https://www.w3.org/TR/xpath-10
MagicPodが裏側で使用しているSelenium/AppiumがXPath 1.0のみ対応しているため、XPath 2.0以降の構文が使えない点にご注意ください。
CSSセレクタ
CSSセレクタは、CSS（Cascading Style Sheets）でスタイルを適用する対象を指定するために使われる記法です。
基本セレクタ
css=#username // ID指定（#で開始） css=button.button-primary // クラス指定（.で開始）
ロケータの選び方
ロケータにはさまざまな表現方法がありますが、MagicPodではメンテナンス性の高いロケータ、すなわち画面の変更が入っても影響が出にくいロケータの使用をおすすめしています。
検索ボックスのUIを例に説明します。
この場合、「SEARCH」ボタンを指すロケータは下記のようなものが考えられます。
| 1 | id=search | searchというシステムIDを持った要素 |
| 2 | xpath=//button[text()='SEARCH'] | 「SEARCH」というテキストを持ったボタン要素 |
| 3 | xpath=//button[1] | 上から1番目のボタン要素 |
しかし画面が下図のように変更されると、2と3のロケータには修正が必要となってしまいます。
なるべく画面の変更に強いロケータを選ぶことで、テストのメンテナンスコストが低くなり、自動テストの継続に繋げることができます。
参考
MagicPodのテスト自動化ヘルススコアはどうやって決まるのか
UIツリーの確認方法
UIツリーを確認することで、ロケータを取得したいUIがどのような構造になっているかを調べることができます。
- テストケース編集画面右側メニューの「UI一覧」をクリックする
- 確認したいUI画像の右上の 「︙」＞「UIツリーを表示」をクリックする
2.生成AIを活用する
ここではロケータに関する生成AIの活用方法を紹介します。
ロケータを作成する
自分でXPathを組み立てる際、生成AIにXPathの作成例を提案してもらうという方法があります。
プロンプト例：
以下のHTML要素に対して、「素泊まり」プランの「このプランを予約する」ボタンを指すXPathを生成してください。 <HTMLを貼り付け>
ロケータを修正する
MagicPodが提案するロケータを一部修正したい時にも、生成AIを活用することができます。
プロンプト例：
xpath=//input[@name='username-12345']をcontainsを使って安定したXPathに修正してください。
生成AIによる回答例：
ロケータを提示して説明してもらう
ロケータへの理解を深めるために、生成AIを活用することもできます。
プロンプト例：
以下のXPathの意味を解説してください。 xpath=//span[text()='泊']/parent::*/preceding-sibling::input[1]
生成AIによる回答例：
3.新しいロケータの追加方法
ロケータの追加や編集に関しては、下記ページをご参照ください。
4.iOSアプリのテストを高速化するロケータの選び方
iOSアプリにおいては、ロケータにXPathを使用した場合とaccessibility IDを使用した場合で約4倍の速度差が出たというデータがあります。
なお、accessibility IDの付与についてはこちらをご参照ください。
ユニークIDの付与