- 印刷
- ダークライト
ロケータとは
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などの属性の値がたびたび変動する。
ロケータの使いかた
シナリオをレコーディングします。
ロケータを使いたいステップの詳細を開き、「ロケータを追加」をクリックします。
プルダウンメニューより、「CSSセレクター」か「XPath」を選択します。
入力欄にCSSセレクター/XPathを記入します。CSSセレクター/XPathは、テスト対象のページの構造にあわせて記入してください。
不正な値を設定した場合はエラーメッセージが表示されます。
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セレクターは、できるだけ短く、かつ一意に要素を特定できるものを指定するのがポイントです。
ロケータ利用時の注意点
- ロケータを使用したステップでは、AIによるメンテナンスが効かなくなります。ロケータの利用は最小限に留めましょう。
- 指定したCSSセレクター/XPathに複数の要素が該当した場合には、一番初めの要素が選択されます。
- 指定したCSSセレクター/XPathに該当する要素が見つからない場合は、「対象要素が見つかりませんでした。」というエラーが発生し、ステップは失敗します。
- ShadowDOM内の要素について
- CSSセレクター: shadow-root内における要素を指定して選択いただけます。ただし、指定されたCSSセレクターに一致する要素が通常のDOM内で見つかった場合には、通常のDOM内の要素が選択されます。
- XPath: ShadowDOM内の要素を選択することはできません。