CSSセレクター / XPathを取得する

CSSセレクター / XPathを取得する

Article Summary

Share feedback

Thanks for sharing your feedback!

Autify でシナリオにロケータを追加する際に、どのようにCSSセレクター / XPathを指定したら良いのかわからない場合は、Google Chrome デベロッパーツール（以降デベロッパーツール）で対象要素のCSSセレクター / XPathを調べることが出来ます。

このページでは、デベロッパーツールを使って要素のCSSセレクター / XPathを取得する方法を説明します。
より安定して要素を指定する方法や、取得後に発生したエラーに関しては関連記事をご確認ください。

デベロッパーツールは、Google Chrome ブラウザに直接組み込まれたWeb開発者ツールセットです。（公式サイトより）
*Windows版とMac版でUIが若干違う箇所があります。このページではMac版を使用しています。

デベロッパーツールの起動方法

デベロッパーツールの起動方法は下記の3通りの方法があります。

Chrome の右上にある「︙」アイコンから起動
1. Chrome の右上にある「︙」アイコンをクリックします。
2. メニュー内の「その他のツール」>「デベロッパーツール」をクリックします。
マウスの右クリックメニューから起動
1. 対象要素の上でマウスを右クリックしてメニューを表示します。
2. 「検証」をクリックします。
ショートカットキーから起動
下記のショートカットキーを利用しても起動できます。
```
Windows： Ctrl + Shift + I
MacOS： command + option + I
```

デベロッパーツールの表示位置は、デベロッパーツール内右上の「︙」アイコンから開くメニューの「Dock side」で変更が出来ます。
表示位置の変更方法.png

今回は、Autifyサイトトップページにある見出し、「ソフトウェアテスト自動化プラットフォームのAutifyでリリースサイクルを高速化」を例にご紹介します。

デベロッパーツールを「選択モード」にする
1. デベロッパーツールで「Elements」タブが開いていることを確認します。
2. デベロッパーツールの左上にあるアイコンをクリックすると「選択モード」になります。
対象要素を選択する
1. デベロッパーツールが「選択モード」になると、サイト画面上の対象要素をマウスで選べる状態になるので、対象要素にマウスの位置を合わせクリックします。
2. 要素に該当するソースコードが選択状態になります。
対象要素のCSSセレクター / XPathを取得する
1. デベロッパーツールで選択状態になっているソースコード上にマウスを移動し、右クリックします。
2. それぞれ下記操作で対象要素の値がクリップボードにコピーされます。
  CSSセレクター：[Copy] > [Copy selector]
  XPath：[Copy] > [Copy XPath]
3. テキストエディターなどにコピーされた値をペーストします。

今回は以下のような値が取得できました。

body > main > div:nth-child(3) > div > div > div > div.web-steps-heading.text-center > h3

/html/body/main/div[3]/div/div/div/div[1]/h3

CSSセレクター / XPathは、同じ要素を選ぶ場合であっても複数の指定方法があります。
自動テストにおいては、複数の指定方法がある中でも以下の点を満たすことが肝心です。

取得したCSSセレクターの指定方法を変更する方法は、こちらの記事が参考になります。
CSSセレクターを使いこなす

取得したCSSセレクター / XPathの指定方法を調整した場合などに、意図した要素を指定するものになっているかを調べたい場合は、デベロッパーツールの「Elements」パネル内で下記コマンドで検索窓を呼び出し、検索する事で確認が可能です。

Windows：Ctrl　+　F
macOS：command　+　F

CSSセレクターを例として、紹介します。（XPathも同様の方法で確認できます。）
取得したCSSセレクターを下記のように変更し、意図する要素を指定できていることを確認します。

変更前：body > main > div:nth-child(3) > div > div > div > div.web-steps-heading.text-center > h3
変更後：.web-steps-heading.text-center > h3

右下の検索窓にCSSセレクターを入力すると、要素が指定できている場合には該当要素がハイライトされます。

検索にヒットしない場合には、CSSセレクターの記述内容を確認してください。
複数要素が検索にヒットした場合には、ロケーターが意図しない要素を特定してしまう可能性がございます。その場合は対象を一意に指定できるよう、指定方法を修正してください。

この記事は役に立ちましたか?

タグ