Docly Child

CSSセレクタを文字列で検索(FindElement)

3817 views

この記事ではFindElementアクションでCSSセレクタを取得する方法について説明します。


 

「FindElement」要素を見つける

FindElementを使うと、利用場面に応じて以下の方法でCSSセレクタを探して取得することができます。

探し方利用場面
CSSセレクターで検索・既にサイト上で目的のセレクタが分かっており、その要素が存在するかチェックしたい時。
(例)ポップアップが出ていたら閉じるボタンを押す。

XPathで検索

※XPathの説明は設定例②

・文字列を手がかりにセレクタを探したい時。
(例)サイト上の表データから、「RPA」を含む件名のみ取得。

・子要素を元に親要素を探したい時。
(例)サイト上の表データから、更新日セルが今日の行を探し、該当行の別セルから値を取得。

・セレクタが毎回変わってしまう要素を操作したい時。
(例)ページを更新する度に「#abc-176587」「#abc-134567」と取れるセレクタが変わる要素をクリック。

要素の文字列で検索

・実際のブラウザ上でセレクタが取れない時。
(例)不定期に出現するポップアップで「閉じる」ボタンを押す。
※現在対応している要素はa, label, buttonのみになります。

なお、「セレクターが存在するか?」を調べるのが目的の場合、詳細設定の中でタイムアウトまでの時間を変更しておくことを推奨します。
ミリ秒で設定するので、1000で1秒になります。
(デフォルトは30000=30秒)

 ワークフローの設定例①(要素の文字列で検索)

当ドキュメントサイトのトップページで、左サイドバーの項目の中から「スケジュール」をクリックする設定を行います。

下記手順にてワークフローを設定します。
(FindElement以外の説明は割愛します)

実際のブラウザで中々表示されない要素だと難しいですが、可能であれば要素がa, label, buttonのどれかに該当するかをチェックしておくと確実です。

  • クリックしたいボタンの上で右クリックし、検証を選択します。

 

  • 選択した要素にハイライトが当たった状態で、ブラウザに検証画面が表示されます。
    “<“の横にa, label, buttonと書いてあれば「要素の文字列を検索」で検索可能です。

 

FindElementで検索条件を設定します。

  • 「ブラウザ」にトップページを開いたブラウザを指定します。
  • 「探し方」に「次の文字列を含むボタンを検索」もしくは「次の文字列を含むボタン/リンク/ラベルを検索」を指定します。
  • 「検索条件」に探したい文字列である「スクレイピング」を指定します。

FindElementで取得したセレクタを使って、リンクをクリックします。

  • Clickアクションをドラッグ&ドロップします。
  • 「セレクタ」に「以前のアクションのアウトプットを再利用する」からFindElementのアウトプットを指定します。
以上で完了です。

 ワークフローの設定例②(XPathで検索)

当ヘルプサイトのトップページで、「はじめての方へ」と書かれているカードをクリックします。
この要素はボタンやリンクではないため、文字列で検索する場合はXPathで指定する必要があります。

下記手順にてワークフローを設定します。
(FindElement以外の説明は割愛します)

実際の操作の前に、XPathについて説明します。

XPathはHTMLやXML上の要素を指定するための構文です。
名前にPath(経路)と付く通り、以下のようにトップの要素から対象の要素までに経由する全ての要素を書いて要素を指定します。

html/body/div/div/section/div/a

ただし、これだとかなり長文になるため、以下のように「//」で省略して書くことが可能です。
※以下の場合、それまでの経路を問わず、全てのdiv要素内のa要素にヒットします。

//div/a

また、これだけだと以下のようなパターンに対応ができません。
今回はその解決策として、その要素が持っているテキストによって要素を指定する方法を使います。
(要素が持っているテキストは<要素名></要素名>で囲われている部分です。)
書き方は以下の2種類です。

//tr/td[text()="セル1"] ...完全一致
//tr/td[contains(text(), "セル1")] ...部分一致
「0. XPathとは」を元に、実際のXPathを作成します。
  • クリックしたいボタンの上で右クリックし、検証を選択します。

  • 選択した要素にハイライトが当たった状態で、ブラウザに検証画面が表示されます。
    <>内で左端に書かれているのが要素名です。

  • 要素名がh2と分かったので、以下のXPathを使うことにします。
    //h2[text()="はじめての方へ"]

FindElementで検索条件を設定します。

  • 「ブラウザ」にトップページを開いたブラウザを指定します。
  • 「探し方」に「XPathで検索」を指定します。
  • 「検索条件」に先ほど作成したXPathを指定します。
    //h2[text()="はじめての方へ"]

FindElementで取得したセレクタを使って、リンクをクリックします。

  • Clickアクションをドラッグ&ドロップします。
  • 「セレクタ」に「以前のアクションのアウトプットを再利用する」からFindElementのアウトプットを指定します。
以上で完了です。

BrowserアクションのうちClickアクションに限り、「CSSセレクタ」欄に直接XPathを指定することもできます。(2021/12/3現在)

上記の例では、以下でもワークフローは動きます。

# ブラウザを開く
+open_browser_1:
  action>: OpenBrowser
  url: 'https://docs.autoro.io/'
  lang: 'ja-JP'
  headless: true
  windowSize: '1280 x 720'
  useShadowDomSelector: false
  private: false

# 要素を見つける
+find_element_1:
  action>: FindElement
  browser: +open_browser_1
  find_by: contains
  value: 'スケジュール'
  timeout: 3000
  visible: true
  private: false

# クリック
+click_1:
  action>: Click
  browser: +open_browser_1
  selector: +find_element_1
  confirm: true
  waitAfter: 3000
  ignoreError: true
  timeout: 30000
  private: false

# ブラウザを開く
+open_browser_1:
  action>: OpenBrowser
  url: 'https://support.autoro.io/'
  lang: 'ja-JP'
  headless: true
  windowSize: '1280 x 720'

# 要素を見つける
+find_element_1:
  action>: FindElement
  browser: +open_browser_1
  find_by: xpath
  value: '//h2[text()="はじめての方へ"]'
  timeout: 30000
  visible: true

# クリック
+click_1:
  action>: Click
  browser: +open_browser_1
  selector: +find_element_1
  confirm: true
  waitAfter: 3000
  ignoreError: true
xpath find element

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