Docly Child

XPathの設定方法

1479 views

この記事ではXPathについて説明します。


 XPathとは

XPathはHTMLやXML上の要素を指定するための構文です。

名前にPath(経路)と付く通り、以下のようにトップの要素から対象の要素までに辿る経路を書くことで、対象の要素を表します。

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

似た書き方として、PCのファイルパスをイメージするとよいかもしれません。
OSがMicrosoftであれば、以下のような書き方のことです。
Explorerで、Cドライブ→Usersフォルダ→ユーザー名フォルダ…とクリックして対象のファイルにたどり着くのと同じイメージです。

C:¥Users¥ユーザー名¥Documents¥会議資料

OSがMacであれば、以下がファイルパスです。

既にAUTOROをご利用中の方であれば、ブラウザ操作を行う時、例えばページ上のボタンをクリックするには、CSSセレクタを取得して指定していると思います。

XPathもCSSセレクタも要素を指定する構文という点では違いはないですが、XPathには、CSSセレクタと比べて以下のような利点があります。

  • 要素中の文字列を使って指定ができる。
    要素が増えたり減ったりするページで、目当ての要素を文字列で確実に指定することができます。
    例えば、以下のように、AUTOROのフォルダページで「検証」フォルダを常に選択することが可能です。
    CSSセレクタ指定だと「上から3番目の要素」としか指定できず不安定な場合があります。

     

  • 遡ったり、横にスライドして指定ができる。
    何かの要素を手がかりにして、別の要素を指定する、という指定方法に強いです。
    例えば、(Webページ上のテーブルデータで)太郎さんの部署を取得したい時、“太郎”と書いてあるセルを手がかりに、「太郎のセルを含む行の部署セル」という指定が可能です。
    CSSセレクタ指定だと、「太郎と書かれたセル」から「そのセルを含む行」に遡って指定することはできません。

ただし、XPathは一部サイトでは動作しない可能性があります。
具体的にはiframeやshadowDOMと呼ばれる仕組みを採用しているサイトになります。

これらのサイトについては、AUTOROが用意している記法を使うとCSSセレクタ指定で操作が可能です。
弊社が用意しているGoogle拡張機能の「AUTORO Assistant 」を使うと、自動的に記法に沿ったCSSセレクタを取得できます。

そのため、基本的にブラウザ操作ではAUTORO AssistantでのCSSセレクタ指定を推奨しますが、上記のようにXPathが活きる場面では、XPathを使用することがあります。

 XPathが使えるアクション

2022年12月現在、以下アクションで使用できます。

  • FindElement(要素を見つける)
  • Click(クリックする)

基本的には、FindElementでXPathからCSSセレクタを取得し直して、そのCSSセレクタを他のBrowserアクションで利用します。

 XPathの設定例

設定前に、基本的な記法を以下に列挙します。

※使用例は記法をわかりやすくするため、記法と関係のない部分を省略している場合があります。

詳細は以下のページ等、HTMLの解説を含むページをご参照いただくか、構築時にチャットでご相談ください。
クローラ作成に必須!XPATHの記法まとめ – Qiita(外部サイト)

実際の設定手順を以下で紹介します。

弊社が運営しているAUTORO MAGAZINEのページで、新規記事が追加されていれば記事タイトルを取得するフローを想定します。
記事タイトル下に更新日が入っているので、それを手がかりにします。

まずは、日付が書いてある要素のXPathを設定します。

  • 日付の上で右クリック→検証で検証画面を開きます。
  • 日付を囲っている<ooo>日付</ooo>の部分を確認して、要素名を取得します。
    要素名は以下の画像だと水色の部分です。(お使いのブラウザによってデザインは異なる可能性があります)


  • XPathを作成していきます。
    まず、要素名までを記述します。
//time
  • 「日付の文字列と完全一致する」という条件を付け加えます。
//time[text()="2022.11.10"]
  •  要素が取れるか確認します。
    検証画面のコードが書いてある部分で、適当な箇所をクリックしてから、「Ctrl + F」あるいは「⌘ + F」で検索バーを表示します。
  • 上記XPathを入力します。
  • 取りたい要素が選択されたらOKです。
    (現段階では”2022.11.10″の要素しか取れませんが、「3. ワークフローに設定」で変数をセットします)
    ny

1.で作成したXPathを元に、記事タイトルのXPathを作成します。

  • 記事タイトルで右クリック→検証で検証画面を開きます。
  • 記事タイトルを囲っている要素を探します。
    今回は”p”になります。 
  • pから、timeへの経路を考えます。
    経路は、以下のいずれかを繰り返して作ります。
    • インデント(左揃えの段)が同じ要素に移動する
    • インデントが違う要素に移動する
  • 今回は、以下でtimeに辿り着きます。
    • pからdivへ、同じインデントの中で移動する。
    • divからtimeへ、インデントを下げて移動する。
  • XPathを作成します。経路の最後の部分から作成していきます。
    • timeを元に、divを指定するXPathを作成する
      //div[time[text()="2022.11.10"]]

    • divを元に、pを指定するXPathを作成する
      //div[time[text()="2022.11.10"]]/preceding-sibling::p

GetTextアクションに指定します。

1,2では日付を固定の”2022.11.10″としていましたが、実際には「その日の日付」という変動する値を使用します。

そのため、設定は以下の通り変数を使用します。

xpath 検索 文字 x path

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