XPathに慣れてくると、安定性とかメンテ効率を意識して、Copy XPathから取得したままの値を使うことって少なくなりますよね。

▼ Copy XPathで取得される値のイメージ

//*[@id="content_left"]/div[7]/table/tbody/tr[2]/td[1]td[3]

▼ 一意の要素から相対位置を辿るXPathの例

//td[text()="カルボナーラ"]/../td[3]

この試行錯誤にうってつけの機能を見つけたのでお裾分けです。

　

機能の在り処

• ChromeのF12デベロッパーツール
• ElementタブのCtrl＋Fで現れる検索ボックス
• placeholderに「Find by string, selector or XPath」と表示される欄

https://www.google.com/search?q=Find+by+string,+selector+or+XPath&tbm=isch

　

使いかた

• たとえば、「//title」と入力
  → タイトルタグがハイライトされる

　

身近な例

• Copy XPathやCopy full XPathの値
  → 貼り付ければ当然ヒットする

　

所感

• Web界隈ではよく知られた方法っぽい
• RPA界隈ではあまり情報を見かけなかった
• ユーザーフォーラムでこの検索ボックスに触れてるかたがいらっしゃったものの、当時わたしはこの便利さに気づけず、、
• 「1 of 1」みたいに何件ヒットしてるかも把握できる
• 複数ヒットするなら、XPathで考慮が必要な場合もある

　

実際のWebサイトで検証

<TABLE>－HTMLタグリファレンス
http://www.htmq.com/html/table.shtml

メニュー列の「カルボナーラ」のCopy XPath結果

//*[@id="content_left"]/div[7]/table/tbody/tr[2]/td[1]

• IDあり要素からの相対位置
• 検索ボックスに入れれば当然ヒットする
• dev[7]あたりがページ構造の変化に弱そうで心許ない、、

「カルボナーラ」のCopy full XPath結果

/html/body/div/div[7]/div[7]/table/tbody/tr[2]/td[1]

• 先頭からの絶対位置
• 検索ボックスに入れれば当然ヒットする
• これもdiv/div[7]/div[7]あたりがページ構造の変化にもっと弱そうで心許ない、、

「カルボナーラ」のXPath（改）

//td[text()="カルボナーラ"]

• クリックの想定
• 値の取得では、現実にはこんなニーズはないはず
• 値の取得でニーズがあるとしたらこんな感じ

//td[contains(text(),"ボナー")]

より実務的なニーズ

• カルボナーラの豆知識を取得したい

//td[text()="カルボナーラ"]/../td[3]

• 一意の要素から相対位置を辿る際の試行錯誤で検索ボックスが大活躍

　

【参考】IEのF12開発者ツールとの比較

• DOM Explorerタブ
• Ctrl＋Fで現れる検索ボックス
• 「Find by string」、文字列検索相当のみっぽい
• XPathでは検索できない
• IEでXPathを扱うには何らかの工夫が必要と言われる一面を垣間見た感じ

　

XPathの検索機能に言及があるページ

XPathのまとめ、要素の参照方法いろいろ │ Web備忘録
https://webbibouroku.com/Blog/Article/xpath

Google-chrome: Google ChromeでXPathを取得する方法はありますか？ | Code Hero
https://codehero.jp/google-chrome/3030487/is-there-a-way-to-get-the-xpath-in-google-chrome

　

ユーザーフォーラム内の関連スレッド

https://winactor.com/questions/question/chromeのデベロッパーツール上でhtmlタグをwinactorにコピー抽/

質問後にとんと音沙汰がなくなるスレッド、、ご機嫌を損ねるような失礼な言葉遣いがあったのか、、お眼鏡に適わなかったのか、、ご多忙なのか、、忘却の彼方なのか、、気になり続けます、、
成否のどちらであっても、結果の続報さえあれば次の人が参考にできると思うんです。
オフィシャルでマナーアップキャンペーンを展開してくれれば良いのに、と言ってみるテスト。
わたし自身も、よりいっそう気を付けよう。

　

同じ目的の別手法の情報

ココさんに教わった、Consoleを活用する方面です。

XPathでWebページの要素を検索する | ハックノート
https://hacknote.jp/archives/23230/

HTML情報を取得する Xpath を覚えよう – Cloud Cafe
http://cloudcafe.tech/?p=2456

• 情報が充実してるだけに、Xpath、、ちょっと気になっちゃう、、
• 専門用語/固有名詞は、正しい綴りの情報がより信頼できるイメージ

XPath > Xpath > xpath
WinActor > Winactor winactor WINACTOR

覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
https://qiita.com/nakajmg/items/f4e40356143d6fc0038e

• 機会を見つけて、少しずつ身につけたい

Chrome DevTools Console で使える便利なコマンド
https://zenn.dev/lollipop_onl/articles/eoz-devtools-console-commands

• 日本語の情報はやはりありがたい

Console Utilities API reference - Chrome Developers
https://developer.chrome.com/docs/devtools/console/utilities/

• まとめサイトの日本語と照らし合わせて、原典に触れる機会も持ちたい