エンジニアの頭の中

フリーランスエンジニアが書く技術系ブログです。

ChromeでXPathを簡単に取得する

スクレイピングするためのコードを書く場合など、XPathを取得したい場合があるかと思います。

Google Chromeを使用して、ウェブページのXPathを簡単に取得する方法について、記載します。

そもそもXPathとは

XPath(XML Path Language)とは、XML文書の木構造内のノードの位置を指し示すためのパスのことです。XPathについては、わかりやすく説明している記事がたくさんあるので、そちらをご覧ください。

www.atmarkit.co.jp

XPath 取得方法

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

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

    f:id:mitsu3204:20170415161432p:plain

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