XPathの記述を確認する方法です。
1. XPathの評価
想定した要素を XPathで正しく指定できたか、Chromeで確認する事ができます。また、コボットで記述したい XPathが、想定した要素を指定しているか、確認する事も可能です。
Google Chromeに搭載されている「デベロッパーツール」の「Console」を使用し、XPathを評価します。「Console」で XPathを評価する場合の記述は以下です。
$x('xpath')
ChromeでコボットPortalのトップページを開きます。
「F12 」キーを押下し「デベロッパーツール」を開き、「Console」タブをクリックします。
XPath「//*[@id="custom-blocks"]/div/div/div[2]/a」を評価してみましょう。
この XPathは、コボットPortalのトップページにある「コボットの使い方」の文字の周りにある、空白部分の要素を指定するXPathです。(「XPathの基本」で取得した XPath)
Consoleに以下を入力し、「Enterキー」を押下します。
$x('//*[@id="custom-blocks"]/div/div/div[2] /a')
XPathを入力した次の行に、実行結果が表示されます。これをクリックして展開しましょう。
展開した結果の a要素にマウスポインタを合わせると、該当する部分の要素がハイライトされます。想定した要素(「コボットの使い方」の文字の周りにある、空白部分)がハイライトされているため、XPathが正しく記述できている事が確認できました。
※ブラウザのメニューから「デベロッパーツール」を開く場合、下図を参考に表示してください。
2. テキストから要素を指定
要素を指定する時、id属性の値がわからない場合もあります。今度は「コボットの使い方」のテキスト部分の要素を指定する記述方法について確認してみましょう。
特定のテキストが含まれた要素を指定したい場合、ノードの種類を評価する関数「text()」と比較演算子「=」を使用します。記述は「//*[text()="コボットの使い方"]」となります。
Consoleに以下を入力し、想定した要素が正しく指定できるか確認してみましょう。
$x('//*[text()="コボットの使い方"]')
実行結果が表示されます。クリックして展開しましょう。
展開した結果のh3要素にマウスポインタを合わせると、該当する部分の要素がハイライトされます。想定した要素(「コボットの使い方」のテキスト部分)がハイライトされているため、XPathが正しく記述できている事が確認できました。
今回はページ内に「コボットの使い方」のテキストが一つしかないため、実行結果は一つとなります。該当する要素が複数ある場合は、実行結果は複数表示されます。
例えば、「$x('//*[text()]')」を実行すると、実行結果は複数表示されます。
XPath「$x('//*[text()="コボットの使い方"]')」は、「$x('//*[text()]')」を実行した複数の要素の中から、「コボットの使い方」というテキスト部分のみの要素を指定していることになります。