コボット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に搭載されている「デベロッパーツール」を使用し、コボットPortalのサイト上にある「コボットの使い方」の部分を指定するXPathを取得します。


ChromeでコボットPortalのトップページを開きます。


トップページの「コボットの使い方」の空白部分で右クリックし(●の付近など)、コンテキストメニューから「検証(I)」をクリックします。


「デベロッパーツール」が表示され、「コボットの使い方」部分の要素が青くハイライトされます。ハイライトされた箇所で右クリックします。


「Copy」>「Copy XPath」をクリックします。これでXPathがクリップボードにコピーされました。


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




取得したXPathの確認

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


  //*[@id="custom-blocks"]/div/div/div[2]/a  

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

  /html/body/div[2]/div[1]/div/div/div[2]/a  

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

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


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

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

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

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

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

印刷
S
Saki is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.