CSSセレクタの取得方法
この記事では、CSSセレクタの概要とその取得方法を説明します。
CSSセレクタとは
CSSセレクタは、Webページの各要素（テキスト、画像、ボタン、リンクなど）を識別するための位置情報です。
AUTOROのブラウザ操作アクションでは、このCSSセレクタを使ってブラウザの要素を探します。
CSSセレクタについては、Webページを形づくるHTMLとCSSという言語を知っておくと理解が易しくなります。
概要は以下の通りです。
- HTML（HyperText Markup Language）：タイトルや見出し、本文などWebページの構造と内容をつくる。
- CSS（Cascading Style Sheets）：HTML上のテキスト・画像・ボタンなどの色や表示方法を指定する。
つまり、HTMLでできた骨組みの見た目をCSSで整える形で大半のWebページはつくられています。
この時、「どのHTML要素を装飾するか？」をCSS側が認識するために使うのがCSSセレクタです。
（2021/10/06現在）
- Click：クリックする対象を指定
- Hover：ホバーする対象を指定
- TypeText：文字を入力する対象を指定（文字入力できる要素のみ）
- SetFileToUpload：ファイルを添付する対象を指定（ファイル貼り付け可能な要素のみ）
- TypePassword：パスワードを入力する対象を指定（input[type=”password”]のみ）
- SelectOption：プルダウン選択する対象を指定（select要素のみ）
- GetText：テキストを取得する対象を指定
- SendKeys：キーを送信する対象を指定
- TakeElementShot：スクリーンショットを撮影する対象を指定
- FindElement：探す要素を指定
- ScrapePage：取得する対象を指定
- ExtractDataFromTable：テーブルデータを指定（table要素のみ）
- ExtractData：取得する対象を指定（複数必要）
- GetAttribute：属性を取得する対象を指定
- DragAndDrop：ドラッグする要素、ドロップ先の要素を指定
ページ上のCSSセレクタを取得すると、基本的に以下のように文字列と記号の組み合わせが取得できます。
この時使われている記号の紹介です。
#site_logo > .h1.img > div:nth-child(1)
まず、前提として、各要素の位置情報は他の要素とは重複しないように指定しなければなりません。
例えばある料理店のことを話す時、「東京都のご飯屋さん」とだけ呼ぶと、どのお店のことを言っているのかはっきりしません。
かといって、お店のことを都度「日本の東京都中央区日本橋蛎殻町1丁目…」ときっちり住所で呼ぶのは不便です。
そのため、通常は店名か、「人形町駅のそばの洋食屋さん」などと呼んでその店を指します。
HTMLでも同じで、「見出し」「テキスト」などの構造名だけでなく、要素ごとに名前を設定することができます。
冒頭の例は、要素の名前を使い、簡潔に要素の位置情報を表現した一例となります。
#site_logo > .h1.img > div:nth-child(1)
これは、「site_logo」というページに一つしかない要素の中の、「h1」「img」というクラスを持つ要素のさらに中の、1つ目のdiv要素を表します。
| 記号 | 説明 |
| # | idを表す。 idはページのHTML中で一意のため、それだけで指定が済む。 |
| .（ドット） | classを表す。 classはページ内に複数存在する場合があり、単体だと位置情報として不十分な場合がある。 要素が複数のclassを持っている場合、.h1.imgのように、.でつなげる。 |
| :nth-child(n) | 同じレベルに存在する要素のうち、何番目か？を表す。 例えばh1の中にdivが3つあり、2つ目を指定したい時は h1 > div:nth-child(2)となる。 |
外部サイトですが、以下もご参照ください。
・CSSセレクタのチートシート
CSSセレクタの取得方法
下記手順にてワークフローを設定します。
Google Chromeの拡張機能である、AUTORO Assistantを使って取得します。
※ダウンロードはこちら
この方法は、Google Chromeの検証画面からCSSセレクタを取得する方法です。
拡張機能を使って想定した部分のCSSセレクタが取得できない時に試します。
※注意点※ - iframeという特殊な構造の中にある要素はこの方法で取得できません。 AUTORO Agentでも取得が難しい場合、チャットでご質問ください。
以下手順で操作します。
- Google Chromeでサイトを開きます。
- 選択したい要素の部分で右クリックします。
- 「検証」を選択します。
- 検証画面にマウスオーバーすると対応するページの要素がハイライトされます。
選択したい要素がハイライトされた部分で、再度右クリックします。 - 「Copy→Copy selector」を選択します。
- セレクタがコピーできているので、任意の箇所に貼り付けます。
ブラウザ系アクションのCSSセレクタ欄右端に存在する「指」のアイコンからCSSセレクタを取得することも可能です。
指のアイコンをクリックすることにより、シークレットウィンドウで該当のブラウザが開かれます。
開かれたシークレットウィンドウ上で操作したい要素をクリックすると、その要素のCSSセレクタがアクションのCSSセレクタ入力欄に入力されます。
※ログインが不要なWebサイトの操作時に便利です。
ここでは応用編として、2で表示した検証画面を確認しながらセレクタを作成する方法の例を5つご紹介いたします。
この方法では、
- id、classでの指定ができない
- クラス名が変動する
などのときに有効です。
原則として、指定したCSSセレクタに該当する要素が複数ある時はHTML上で最も左上にあるものが優先されます。
・CSSセレクタの設定が合っているか確認する方法
設定が合っているかどうかは、検証画面から確認ができます。
例として、Chromeブラウザを使用している場合は下記方法で確認が可能です。
- Google Chromeでサイトを開きます。
- 右クリック→検証もしくはF12キーを入力します。
- 開いた検証画面が選択されている状態でctrl+Fを入力します。（macの場合は⌘+F）
- 表示された検索窓に、CSSセレクタを入力します。
・属性名と属性値で指定する
タグ[属性=”属性値”]でCSSセレクタの指定が可能です。
この指定は他と被りにくい、変更されにくいといった特徴があります。
例：input[name="company"]
・属性+値の部分一致で検索
値の部分一致で検索が可能です。
値の一部分が変動する可能性がある場合に有効です。
単体の要素を操作したい場合は、
- 他に該当するものがないものである
- 複数該当はしているが一番左上にあるものである
の条件を満たすように注意してください。
前方一致は^で表すことができます [属性^=”値”]
例：input[placeholder^="オートロ"]
後方一致は$で表すことができます。 [属性$=”値”]
例：input[placeholder$="株式会社"]
部分一致は*で表すことができます。 [属性*=”値”]
例：input[placeholder*="トロ"]
・or指定
CSSセレクタ同士をカンマで繋げることでor指定が可能です。
どちらかが出現している時に指定したい、ScrapePageアクションなどで、複数の要素を取得したい時に便利です。
参考：検索結果のスクレイピング
input[placeholder="オートロ株式会社"],input[placeholder="おおとろ"]げんそ