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

ロケータとは

Autifyのロケータ機能はCSSセレクターもしくはXPathを利用してステップの対象要素を選択できます。
次のセクションで説明されているように、特定のステップを安定化させ、高速化するのに役立ちます。

CSSセレクターとは

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

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

XPathとは

XPath | MDNによると:

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

ロケータを使用して良い場合

AutifyのメンテナンスAI(以下AI)は、ページ内に変化があっても継続的に要素を選択できるよう、要素が持つ複数の特徴から総合的に判断し、最も一致度の高い要素を見つけ出します。しかし、 AIに頼らずに 特定の要素を選択したいケースが発生する場合があります。

たとえば以下のようなケースがあります。

• テスト実行のたびにデータが変わるテーブルやリストで、常にN番目の要素を選択したい場合。
• 要素の他の特徴に左右されることなく、常に特定の属性（classやIDなど）を持つ要素を指定したい場合。
• 以下のような理由で、AIが誤った要素を見つけやすい場合。
  • 同じclassやidなどの属性を持つ要素が複数存在する。
  • 要素にclassやidなどの属性の設定がない。
  • 要素に付与されたclassやidなどの属性の値がたびたび変動する。

ロケータの使いかた

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

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

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

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

CSSセレクターの例を以下にいくつか挙げます。

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

ロケータ利用時の注意点

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

関連記事

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