CSSセレクターを取得する

Autify でシナリオにロケータを追加し、CSSセレクターを指定しようと試みた際に、どのようなCSSセレクターを指定したら良いのかわからない場合は、Google Chrome デベロッパーツール（以降デベロッパーツール）で対象要素のCSSセレクターを調べることが出来ます。
このページでは、デベロッパーツールを使って要素のCSSセレクターを取得する方法を説明します。
※CSSセレクターを取得後に、より安定したセレクターとする方法や、取得後に発生したエラーに関しては関連記事をご確認ください。

Google Chrome デベロッパーツールとは

デベロッパーツールは、Google Chrome ブラウザに直接組み込まれたWeb開発者ツールセットです。（公式サイトより）
公式のドキュメントはこちらです。
https://developer.chrome.com/docs/devtools/
※Windows版とMac版でUIが若干違う箇所があります。このページではMac版を使用しています。

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

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

1.Chrome の右上にある「︙」アイコンから起動

Chrome の右上にある「︙」アイコンをクリックします。
メニュー内の「その他のツール」　＞　「デベロッパーツール」をクリックします。

2.マウスの右クリックメニューから起動

Chrome ブラウザ上でマウスを右クリックしてメニューを表示します。
「検証」をクリックします。

3.ショートカットキーから起動

下記のショートカットキーを利用しても起動できます。
Windows => Ctrl+Shift+I
Mac => Cmd+Opt+I

Tips：表示位置の変更方法

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

• 別ウインドウ
• 左側
• 下側
• 右側
  

対象要素のセレクター取得方法

今回は、Autifyサイトトップページにある見出し、「ソフトウェアテスト自動化プラットフォームのAutifyでリリースサイクルを高速化」のCSSセレクターを取得してみます。

1.デベロッパーツールを「選択モード」にする

1. デベロッパーツールで「Elements」タブが開いていることを確認します。
2. デベロッパーツールの左上にあるアイコンをクリックすると「選択モード」になります。

2.対象要素を選択する

1. デベロッパーツールが「選択モード」になると、サイト画面上の対象要素をマウスで選べる状態になるので、サイト画面上でCSSセレクターを取得したい対象要素にマウスの位置を合わせクリックします。
2. クリックした要素は画面上で選択中の状態になります。
   

3.選択中の状態になると、デベロッパーツールの「Elements」タブのソースコードも、選択中の要素に該当するソースコードが選択状態になります。

3. 対象要素のCSSセレクターを取得する

1. デベロッパーツールで選択状態になっているソースコード上にマウスを移動し、右クリックします。
2. メニューから「Copy」 ＞ 「Copy selector」をクリックすると、対象要素のCSSセレクターがクリップボードにコピーされます。
3. テキストエディターなどにコピーされたCSSセレクターをペーストします。
   

今回は以下のようなCSSセレクターが取得できました。

#gatsby-focus-wrapper > div:nth-child(3) > div > div.web-steps-heading.text-center > h3

デベロッパーツールで取得したCSSセレクターの指定方法を変更する

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

• 自分の意図を反映している
• 対象を一意に識別出来る
• 簡潔で壊れにくい（ページ構造の変化に強い）
  ものを指定することが肝要です。

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

任意のCSSセレクターの指定方法が意図した要素に対して指定出来ているかを確認する方法

デベロッパーツールで取得したCSSセレクターの指定方法を調整した場合などに、CSSセレクターの指定方法が意図した要素を指定するものになっているかを調べたい場合は、デベロッパーツールの「Console」タブで確認することが出来ます。

確認には Document.querySelector() を使います。
デベロッパーツールの「Console」タブに document.querySelector("CSSセレクター"）; の「CSSセレクター」の部分を任意のCSSセレクターに差し替えたコードを入力してEnterします。
今回は、先程デベロッパーツールで取得したAutifyサイトの見出し要素のCSSセレクターを簡潔にしてみて、意図する見出し要素が指定されるかどうかを検証します。

1. デベロッパーツールの「Console」タブを開きます。

2. デベロッパーツールの「Console」欄に

document.querySelector(".web-steps-heading.text-center > h3"); 

と入力しEnterします。
指定したCSSセレクターに対して該当する要素が存在する場合は、戻り値として該当要素のソースコードが表示されます。
今回は、意図した見出し要素のHTMLソースコードが表示されたので、.web-steps-heading.text-center > h3 でも対象の見出しを指定することが出来ることが確認できました。

このようにCSSセレクターを利用したい場合には、デベロッパーツールを使うことで、目的の要素のCSSセレクターを取得することが可能です。

関連記事

• ロケータを追加して要素を指定する
• CSSセレクターを使いこなす
• 対象要素が見つかりませんでした