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

AutifyのメンテナンスAIは、ページ内に変化があっても継続的に要素を選択できるよう、要素が持つ複数の特徴から総合的な判断を行い、前回と最も一致度の高い要素を見つけ出します。

その一方で、まれにテストの対象によっては AutifyのAIに頼らずに 特定の要素を選択し、クリックや入力、アサーションを行いたいケースが発生する場合もあります。

たとえば：

• 以下のような背景から、AIが要素を誤判断しやすい
  • 同じclassやidなどの属性を持つ要素が複数存在する
  • 要素にclassやidなどの属性の設定がない
  • 要素に付与されたclassやidなどの属性の値がたびたび変動する
• テスト実行のたびにデータが変わるリスト表示の画面で、常にリストのN番目（最初・最後を含む）の要素を選択したい
• 要素の他の特徴に左右されることなく、常に特定の属性（classやIDなど）を持つ要素を指定したい

などといったケースです。

このような場合には 「ロケータ」機能 を使いましょう。以下に使いかたを解説します。

「ロケータ」機能の使いかた

使用方法

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

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

3. 「CSSセレクター」欄に、要素のCSSセレクターを記入します。

CSSセレクターは、テスト対象のページの構造にあわせて記入してください。

CSSセレクターに関する補足

Chromeのデベロッパーツールを使用した場合、一般的なCSSセレクターの取得方法は以下の通りです。

• 検証対象のページで、CSSセレクターを取得したい要素を右クリック
• コンテキストメニューから [検証] を選択
• デベロッパーツールでハイライトされた対象要素を右クリック
• コンテキストメニューから [Copy] -> [Copy selector] を選択

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

CSSセレクターは、できるだけ短く、一意に要素を特定できるものをご指定いただくのがポイントです。CSSセレクターの詳細は、下記MDNのドキュメントをご覧ください。

https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Selectors

「ロケータ」機能ご利用時の注意点

• 「ロケータ」機能を使用したステップでは、AIによるメンテナンスが効かなくなります。「ロケータ」機能の利用は、意図する要素を選択する上で必要な箇所だけに留めましょう。
• 指定したCSSセレクターに複数の要素が該当した場合には、一番初めの要素が選択されます。
• 指定したCSSセレクターに該当する要素が見つからない場合は、ステップは失敗します。
• ShadowDOM内の要素も、shadow-root内におけるCSSセレクターを指定して「ロケータ機能」で選択いただけます。ただし、指定されたCSSセレクターに一致する要素が通常のDOM内で見つかった場合には、通常のDOM内の要素が選択されます。
• iframe内の要素は「ロケータ」機能では選択できません。JSステップをご利用ください。

なお、「ロケータ」機能を使ってもご希望の要素の選択が難しそうな場合や、ご利用上の不明点がございましたら、お気軽にサポートまでお問い合わせください！

関連記事

• AutifyのメンテナンスAIって何をしてるのですか
• 「要確認」とはなんですか？
• CSSセレクターを使いこなす