XPathとは
XPath（エックスパス）は、HTML文書の構造に注目し、文書内の特定の部分を指定する表現手法です。
Seleniumでは画面項目の指定にXPathを利用することができます。商用RPAソフトのWinActorでもXPathが採用されています。
HTMLの構成
WebサイトはHTMLで記述されています。
HTMLでは、要素を表現するのにHTMLタグを用います。
タグの例
| <title>タイトル内容</title> | タイトルバーにタイトルを表示 |
| <h1>見出し１</h1> | 見出しタグ（h1～h6まで） |
| <p>テキスト内容</p> | 段落タグ |
| <form>フォーム内容</form> | サーバーに送信する入力フォームを表示 |
| <input type="text"> | フォーム内のテキストボックス |
HTML文書はhtmlタグで囲まれ、大きくヘッダ部とボディ部に分かれます。
<html>
<head>
ヘッダ部：文書情報を記述
</head>
<body>
ボディ部：文書内容を記述
</body>
</html>XPathの記述方法
HTMLがタグで構成されていることから、要素を特定するには、ページ内のタグ情報を追っていけばよいことになります。
XPathはHTMLのタグ構造をツリー形式にたどっていくことで、要素を特定することができます。
基本的な書き方
| HTML | XPath |
|---|---|
<html> <head> <title>タイトル</title> </head> <body> <h1>表題</h1> <p>段落内容</p> </body></html> |
１階層目：/html |
序数での指定
同じタグが並ぶ場合は、序数（順番）を用いて指定します。
| HTML | XPath |
|---|---|
<html> <head> <title>タイトル</title> </head> <body> <h1>表題</h1> <h2>副題１</h2> <p>段落1_1</p> <p>段落1_2</p> <h2>副題２</h2> <p>段落2_1</p> <p>段落2_2</p> </body></html> |
/html/body/h1/html/body/h2[1]/html/body/p[1]/html/body/p[2]/html/body/h2[2]/html/body/p[3]/html/body/p[4] |
このように番号を付けることで重複を避けることができます。しかしながら指定したい要素が何番目かをHTMLを読み込んで調べる必要がありますので、人間が手で編集するのは現実的ではありません。
また、要素が追加されたりして順番が変わるとXPathも影響も受けるので、ページの変更に弱いという点があります。
属性での指定
そこで、序数以外にもタグが持つ属性情報を利用することができます。
| 主な属性 | 説明 |
|---|---|
| id | 要素を特定する一意のID |
| class | 適用するスタイルシート（CSS）のクラス名を指定 |
| name | 要素の名前 |
| value | 要素が持つ値 |
| text | 要素が含むテキスト |
| alt | 画像（<img>タグ）の代替テキスト |
| href | リンク（<a>タグ）のURL |
属性を使用した例
<html>
<head>
<title>タイトル</title>
<style>
.red{color:red} /* スタイルシート */
</style>
</head>
<body>
<form>
<input type="text" id="input1" name="text1" class="red" value="入力テキスト">
<input type="reset" id="reset1" name="cancel" class="red" value="リセット">
</form>
</p>
</body>
</html>このテキストボックスを表すXPath
/html/body/form/input[1] |
/html/body/form/input[@id="input1"] |
/html/body/form/input[@name="text1"] |
/html/body/form/input[@class="red"][@value="入力テキスト"] |
これらは全て同じ項目を表しています。
省略表示
要素の特定に不要なタグは省略することが可能です。省略するタグを「/」で置き換えます。
| XPath | 省略形 |
|---|---|
/html/body/form/input[1] |
//input[1] |
/html/body/form/input[@id="input1"] |
//input[@id="input1"] |
/html/body/form/input/input[@name="text1"] |
//input[@name="text1"] |
/html/body/form/input/[@class="red"][@value="入力テキスト"] |
//input[@value="入力テキスト"] |
XPathが重複する場合
上記のHTMLコードでは、テキストボックスとリセットボタンで同じクラス名が指定されています。
<input type="text" id="input1" name="text1" class="red" value="入力テキスト">
<input type="reset" id="reset1" name="cancel" class="red" value="クリア">ですから、仮にXPathを
//input[@class="red"]と記述した場合、要素が２個選ばれます。このような場合、Seleniumでは最初の要素（テキストボックス）を操作するため、シナリオが正しく動作しません。
よって、XPathの重複を避ける必要があります。
HTMLの作法として、id属性は文書内で1つのみで重複させてはならないという決まりがありますので、idを指定できる場合は、XPathが重複することはありません（コーディングミスの場合を除く）
一方、nameやclassなど、他の属性は重複が許されているので、XPathが重複しないかを意識しておく必要があります。
各ブラウザの対応状況
Google ChromeとFirefoxは、XPathを取得する機能があります。
Internet ExplorerとMicrosoft Edgeには残念ながらXPathを取得する機能はありません。
| ブラウザ | 省略表示 | 属性 | 重複チェック |
|---|---|---|---|
| Chrome | 省略可能 | idのみ取得可能 | なし （HTMLが正しければidは重複しない） |
| Firefox | なし （/htmlから始まる） |
なし （重複要素は序数で指定） |
なし （序数で指定するので重複は起きない） |
一方、XPath取得/解析ツールは以下の通りです。
| 省略表示 | 取得できる属性 | 重複チェック |
|---|---|---|
| 省略可能 | id,class,name,text,alt,href | あり |