Robotic Crowd

Robotic Crowd

CSSセレクタの取得方法

Author: Ren Murayama 140 views

この記事では、CSSセレクタの概要とその取得方法を説明します。

 CSSセレクタとは

CSSセレクタは、Webページの各要素(テキスト、画像、ボタン、リンクなど)を識別するための位置情報です。
Robotic Crowdのブラウザ操作アクションでは、このCSSセレクタを使ってブラウザの要素を探します。

CSSセレクタについては、Webページを形づくるHTMLCSSという言語を知っておくと理解が易しくなります。
概要は以下の通りです。

  • 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でも同じで、例えば「見出し」「テキスト」などの構造名だけでなく、要素ごとに名前が設定されています。
冒頭の例は、要素の名前を使ってより簡潔に要素の位置情報を表現した一例となります。

記号説明
#idを表す。
idはページのHTML中で一意のため、それだけで指定が済む。
.(ドット)classを表す。
classはページ内に複数存在する場合があり、単体だと位置情報として不十分な場合がある。
要素が複数のclassを持っている場合、.h1.imgのように、.でつなげる。
:nth-child(n)同じレベルに存在する要素のうち、何番目か?を表す。
例えばh1の中にdivが3つあり、2つ目を指定したい時は
h1 > div:nth-child(2)となる。

外部サイトですが、以下もご参照ください。
CSSセレクタのチートシート

 CSSセレクタの取得方法

下記手順にてワークフローを設定します。

Google Chromeの拡張機能である、Robotic Crowd Agentを使って取得します。
※ダウンロードはこちら

CSSセレクタを取得したい箇所で右クリック→「CSS Selectorを取得」を実行するだけで、簡単にCSSセレクタを取得できます。

この方法は、Google Chromeの検証画面からCSSセレクタを取得する方法です。
拡張機能を使って想定した部分のCSSセレクタが取得できない時に試します。

※注意点※ 
- iframeという特殊な構造の中にある要素はこの方法で取得できません。
  Robotic Crowd Agentでも取得が難しい場合、チャットでご質問ください。

以下手順で操作します。

  1. Google Chromeでサイトを開きます。
  2. 選択したい要素の部分で右クリックします。
  3. 「検証」を選択します。
  4. 検証画面にマウスオーバーすると対応するページの要素がハイライトされます。
    選択したい要素がハイライトされた部分で、再度右クリックします。
  5. 「Copy→Copy selector」を選択します。
  6. セレクタがコピーできているので、任意の箇所に貼り付けます。

このページは役に立ちましたか?