コボットPortal

XPathの基本

XPathについての基本です。

目次
  1. XPathとは
  2. XPathの構文


1. XPathとは

XPath(XML Path Language)は、XML文書で特定の部分を指定する構文です。HTMLもXPathを使用し、要素を指定することができます。コボットでは、ブラウザ操作関連のアクティビティで、操作対象となるUI(ユーザーインターフェイス)要素を指定する場合に使用します。


2. XPathの構文

XPathではXML文章をツリーとして捉えることで、要素や属性の位置を指定することができます。URLのように「/」で要素などをつなげて記述します。既存ページのXPathを取得し、構文を見ていきましょう。


Google Chrome で XPath を取得

Chromeに搭載されている「デベロッパーツール」を使用し、バイトルのトップページからエリア選択の「東京都」を指定するXPathを取得します。


Chromeでバイトル(https://www.baitoru.com/)を開きます。


トップページの「都道府県から選ぶ」にある「関東」内「東京都」の上で右クリックし、コンテキストメニューから「検証」をクリックします。


「デベロッパーツール」が表示され、「東京都」の要素が青くハイライトされます。ハイライトされた箇所で右クリックします。

※ここではブラウザの右側に表示されていますが、設定によってデベロッパーツールがブラウザの左側や下部、別ウィンドウで表示される場合もあります。ブラウザの右側に表示したい場合、デベロッパーツールの右上にある (Customize and control DevTools)をクリックし、「Dock side」一番右側のアイコン「Dock to right」をクリックします。


表示されたコンテキストメニューから「Copy」>「Copy XPath」をクリックします。これでXPathがクリップボードにコピーされました。


取得したXPathの確認

メモ帳などを使用し、クリップボードに取得したXPathを見ていきましょう。


  //*[@id="link_job_list_pc_all_all_prefectures_1"]/a  

このXPathは簡略化された記述方法になります。XPathはHTML文書をツリー構造と捉え、「/」で要素などをつなげて位置を指定すると説明しました。このページをツリー構造にした時の要素「東京都」は、ルートから記述すると以下のようになります。

  /html/body/div[3]/div[1]/div[2]/div[2]/div/div/div/div[2]/dl[1]/dd/ul/li[1]/div/a  

意味としては「html要素の直下の、body要素の直下の、3番目のdivの…」のようになります。

※簡略化しないXPathもデベロッパーツールを使用し取得可能です。
 取得方法は、XPathのコピーで『「Copy」>「 Copy XPath」』ではなく、
『「Copy」>「 Copy full XPath」』となります。


簡略化されたXPathの構文を見ていきます。

  //*[@id="link_job_list_pc_all_all_prefectures_1"]/a  
「//」は子孫要素を意味し、「*」は、すべての子要素を意味します。
「//*」で「ドキュメント内のすべての要素」を表します。

  //*[@id="link_job_list_pc_all_all_prefectures_1"]/a  
「@」は属性名の接頭辞で、要素に紐づく属性を指定する場合に使用します。
「=」はイコール演算子です(代入ではありません)。囲っている「 [ ] 」は、条件式を記述する場合に使用します。この部分で「id属性が"link_job_list_pc_all_all_prefectures_1"の要素」を指定しています。

  //*[@id="link_job_list_pc_all_all_prefectures_1"]/a  
「/」は直下の要素という意味で、「『/』より前に記述された要素の直下にある a要素」を指定しています。

取得したXPath  //*[@id="link_job_list_pc_all_all_prefectures_1"]/a  は、
「このページで、id属性が"link_job_list_pc_all_all_prefectures_1"の要素の直下にあるa要素」
と指定しています。

印刷
徳田 is the author of this solution article.

この回答は役に立ちましたか? はい いいえ

フィードバックを送信
お役に立てなくて申し訳ありません。フィードバックを残し、このアーティクルを改善するのにどうかご協力ください。