ロケータを追加して要素を指定する

ロケータとは

Autifyのロケータ機能はCSSセレクターもしくはXPathを利用してステップの対象要素を指定できます。次のセクション以降で説明されているように、特定のステップの対象要素を明示するために利用いただけます。

ロケータの使い分け

AutifyのメンテナンスAI(以下 Autify AI)は、ページ内に変化があっても継続的に要素を選択できるよう、要素が持つ複数の特徴から総合的に判断し、最も一致度の高い要素を見つけ出します。
しかし、 Autify AIに頼らずに特定の要素を選択したいケースが発生する場合やロケータと併用することでより安定したテストが実行できるケースがあります。設定条件の特徴を踏まえ、お客様のwebアプリケーションの特性やテスト実行の方針によって、ステップ単位で使い分けすることをご検討ください。

1. ロケータを使わないケース (AutifyのメンテナンスAIに任せるケース)

Autify AIのみを使い、要素を見つけます。webサイトの構造に変化が少ない場合やAutify AIに任せたい場合は、ロケータなしで運用すると良いでしょう。

2. ロケータのみを使うケース

webサイトのHTML構造が安定的で、頻繁な変更がない場合やAIの柔軟な探索に任せるのではなく、指定したロケータで常に厳密に要素を特定したい場合に適しています。
具体的には、以下のようなケースでは、ロケータを指定することで安定することがあります。

• テスト実行のたびにデータが変わるテーブルやリストで、常にN番目の要素を選択したい場合。
• 要素の他の特徴に左右されることなく、常に特定の属性（classやIDなど）を持つ要素を指定したい場合。
• 対象webサイトが以下のような構造のため、Autify AIが誤った要素を見つけやすい場合 (ただし、安定した代替セレクターやXPathがある場合に限る)。
  • 同じclassやidなどの属性を持つ要素が複数存在する。
  • 要素にclassやidなどの属性の設定がない。
  • 要素に付与されたclassやidなどの属性の値がたびたび変動する。
• 当該ステップの高速化 (Autify AIが発動せず、ロケータで要素を探すため) したい場合は、ロケータのみでご利用ください。

注意点

• ロケータを使用したステップでは、Autify AIによるメンテナンスが効かなくなります。ロケータの利用は最小限に留めましょう。
• 指定したCSSセレクター/XPathに該当する要素が見つからない場合は、対象要素が見つかりませんでした。 というエラーが発生し、ステップは失敗します。
• 指定したCSSセレクター/XPathに複数の要素が該当した場合には、一番初めの要素が選択されます。

3. ロケータとAutifyのメンテナンスAIを併用するケース

ロケータを指定し、このロケータから要素を学習し、以降はAIによる要素探索に任せる 機能にチェックをすると、初回実行時は指定したロケータで探索し、要素が見つかった場合は、その特徴を保存し、その後の実行ではロケータを使わず保存された特徴をもとにAutify AIによる要素探索を行います。

対象webサイトのUIや画面構造の変更が頻繁に発生するが、要素自体の特徴は一定である場合に適しています。また、初期設定時のみロケータを最初の足がかりとして設定し、以降はAutify AIに任せることで、ロケータ更新のメンテナンス工数を抑えたい場合にも適しています。

注意点

• Autify AIが見つけられなければ失敗します。見つけた要素の確信度が低い場合は 要確認 になることがあります。要確認 となった場合は、実行結果を確認するようにしてください。
• 正しいロケータを設定していても、2回目以降はロケータが利用されないAutify AIによる探索となるため、失敗する可能性があります。
• ロケータ設定や当該ステップは更新しないが、シナリオ自体を更新した場合、該当ステップの動作の仕組みに影響はなく、Autify AIによる探索が継続されます。一方で、ロケータを更新した場合、更新後の初回はロケータを使用し、次回以降はロケータを使用されません。

まとめ

※チェック：「このロケータから要素を学習し、以降はAutify AIによる要素探索に任せる」機能

ロケータの使いかた

1. シナリオをレコーディングします。

2. ロケータを使いたいステップの詳細を開き、「ロケータを追加」をクリックします。
   

3. プルダウンメニューより、「CSSセレクター」か「XPath」を選択します。
   

4. 入力欄にCSSセレクター/XPathを記入します。CSSセレクター/XPathは、テスト対象のページの構造にあわせて記入してください。
   

CSSセレクターとは

基本的な CSS セレクター | MDNによると:

CSS セレクターは、CSS ルール (CSS Rule) の最初の部分です。CSS セレクターは要素やその他の用語の組み合わせで、どの HTML 要素を選択するかブラウザーに伝えます。選択された要素には CSS プロパティ値 (property value) が適用されます。セレクターによって選択された要素を、選択対象 (subject of the selector) と呼びます。

CSSセレクターの例を以下にいくつか挙げます。
|要素の例|CSSセレクター|
|:----|:----|
|data-test属性 'abc' を持つ<div>要素|div[data-test='abc']|
|ID属性 'def' を持つ<p>要素の直下にある、'caution' クラスを持つ<span>要素|p#def > span.caution|
|sample-list' クラスを持つ<ul>要素のリスト直下にある、一番最初の<li>項目|ul.sample-list > li:first-child|
|href属性に 'https://autify.com' を持つ<a>要素|a[href='https://autify.com']|

CSSセレクターは、できるだけ短く、かつ一意に要素を特定できるものを指定するのがポイントです。

XPathとは

XPath | MDNによると:

XPath は XML Path Language の略称です。非 XML 構文を使って、柔軟な方法で XML 文書の様々な部分をアドレッシングする（指し示す）ことができます。さらに、文書中で指し示されたノードがパターンに一致するかどうかの判定を行うこともできます。

ロケータ利用時の注意点

• ShadowDOM内の要素について
  • CSSセレクター: shadow-root内における要素を指定して選択いただけます。ただし、指定されたCSSセレクターに一致する要素が通常のDOM内で見つかった場合には、通常のDOM内の要素が選択されます。
  • XPath: ShadowDOM内の要素を選択することはできません。
• ロケータ欄が空欄の状態でシナリオを保存することはできません。ロケータが不要になった場合は ロケータを削除 リンクを押して削除してください。

テスト結果

テスト結果の各ステップの詳細画面にて、ロケータで要素を見つけたのかAutify AIが見つけたのかを確認することが可能です。

関連記事

• テーブルやリストで意図した要素を操作するにはどうしたらいいですか？
• CSSセレクターを使いこなす
• JavaScript での XPath の利用の手引き| MDN