エンジニアの頭の中

知識と技術で「お金稼ぎの自動化」を実現するため、日々奮闘するエンジニアのブログです。

ChromeでXPathを簡単に取得する

Webスクレイピングするためのコードを書く場合など、Webブラウザで表示しているHTMLページからXPathを取得したい場合があるかと思います。

この記事ではGoogle Chromeを使用してXPathを簡単に取得する方法について、記載します。

目次

XPathとは

一応触れておくと、XPath (XML Path Language)とは、XML文書の木構造内のノードの位置を指し示すためのパスのことです。

見た目的にはこんなやつです。

//*[@id="result_0"]/div/div[2]/div/div/a/img

XPathについては、わかりやすく説明している記事がたくさんあるのでそちらをご覧ください。

www.atmarkit.co.jp

 

私がXPathよく使うシーンとしては、Seleniumを使ってWebブラウザの操作を自動化する場合です。

Seleniumによる操作対象の要素の指定には、idやcssセレクタなどの手段もありますが、私はXPathを使用することが多いです。

XPath 取得方法

Google ChromeXPathを取得するには、以下の操作を行います。

  1. Google Chrome で目的のWebページへアクセスします。
  2. Chromeに表示されているXPathを取得したい要素にマウスカーソルを合わせて右クリックします。
  3. 表示されたメニューから「要素を検証(英語設定ならInspect)」を選択します。

    例:GIZMODOというタイトル部分のXPathを取得する場合

    f:id:mitsu3204:20170415161432p:plain

  4. Developer Toolが起動し、該当の要素のHTMLソースにフォーカスした状態となるので、右クリックして、Copy -> Copy XPath を選択します。
    f:id:mitsu3204:20170415161455p:plain
  5. これで、指定した要素のXPathクリップボードにコピーされています。あとは、使用箇所にXPathをペーストして使いましょう。以下のようにXPathが出力されます。

    //*[@id="app"]/div/div/header/div/h1/a/svg/g/path