はじめに
Seleniumを使ったブラウザ自動操作では、操作対象のHTML要素を特定するために XPATH がよく使われます。
XPATHはブラウザの開発者ツールから簡単に取得できますが、社内イントラネットではこれができないことがあります。
EdgeがIEモードで動作している環境では、右クリックしても「開発者ツールで調査する」が表示されず、XPATHが取得できません。
この記事では、そんな状況を VSCodeのデバッガを活用して回避する方法 を紹介します。
1〜3章はサンプルプログラムとXPATH取得の基礎知識です。本題は4章です。すでにSeleniumの基本をご存じの方は4章から読んでいただいてもOKです。
1. XPATHを使ったサンプルプログラム
1-1. 機能概要
- 日経新聞の検索ページを開き、「宇宙」というキーワードで検索する
- 検索結果の一覧からトップ記事のタイトルを取得して表示する
- ブラウザは Edge を使用する（Chromeではなく）
1-2. サンプルプログラム
import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.edge.service import Service
# パラメータ
KEYWORD = '宇宙'
SEARCH_URL = 'https://www.nikkei.com/search?'
SEARCH_FIELD_XPATH = '/html/body/main/header/div/div/div[1]/input'
SEARCH_TOP_XPATH = '/html/body/main/div[3]/div/div/div[2]/div[2]/div/div[1]/div/div/div/div/div/div[1]/div[1]/h3/a'
# メインルーチン
def main():
driver = webdriver.Edge()
try:
driver.get(SEARCH_URL)
search_field = driver.find_element(by=By.XPATH, value=SEARCH_FIELD_XPATH)
search_field.clear()
search_field.send_keys(KEYWORD)
time.sleep(5)
top_news = driver.find_element(by=By.XPATH, value=SEARCH_TOP_XPATH)
print(f"「{KEYWORD}」について検索した結果のトップ記事")
print(top_news.text)
finally:
driver.quit()
if __name__ == "__main__":
main()
1-3. プログラムの説明
上記プログラムでは Selenium を使用してEdgeブラウザを操作しています。
下図は実行時に開く日経新聞のページです。
SEARCH_FIELD_XPATH と SEARCH_TOP_XPATH の2つの変数がXPATHに対応しており、それぞれ赤字で示されています。
1-4. 実行結果
C:\Qiita_xpath>python xpath_sample.py
「宇宙」について検索した結果のトップ記事
JAXAが次世代空モビリティー実験 北海道大樹町、HOSPO滑走路活用
C:\Qiita_xpath>
2. 事前準備（Seleniumのインストール）
Seleniumライブラリがインストールされていない場合は、以下のコマンドでインストールします。
pip install selenium
エラーになる場合は、python経由でインストールしてください。
python -m pip install selenium
Edgeドライバーについて
通常は webdriver.Edge() 実行時にEdgeDriverが自動ダウンロードされます。
ただし、社内ネットワークなどの制限がある環境では手動でのダウンロードが必要になる場合があります。
その場合は以下の手順を行います。
-
以下のサイトから Stable Channel の
x64用msedgedriver.exeをダウンロードする
👉 https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/?form=MA13LH -
ダウンロードした
msedgedriver.exeを、パスの通っているフォルダかxpath_sample.pyと同じフォルダにコピーする
なお、EdgeとEdgeドライバーのバージョンはセットになっています。手動でのダウンロードの場合、Edgeが（自動で）アップデートされたタイミングで、Edgeドライバーも都度手動で更新して下さい。
3. XPATHの取得方法
XPATHの取得方法については、以下の記事が参考になります。
👉 https://qiita.com/ywindish/items/5a992c49387d81df900e
（ywindish氏）
Edgeでの注意点
上記記事では右クリックして「検証」を選ぶと書かれていますが、これはChromeの場合です。
Edgeの場合は「開発者ツールで調査する」を選択してください。それ以外の手順は同じです。
4. 社内イントラネット（IEモード）でXPATHが取得できない場合
Edgeで社内ホームページを右クリックしても「開発者ツールで調査する」が表示されないケースがあります。
これは EdgeがIEモードで動作していることが原因と考えられます。
補足：EdgeのIEモードについて
少なくとも2029年までサポートが継続される予定ですが、いつかはEdge（Chromiumベース）への移行が必要になります。
社内システムの刷新にはコストがかかるため、すぐに移行できない企業も多いのが現状です。
解決策：VSCodeのデバッガを活用する
XPATHが未確定のまま、以下の手順で対処できます。
- PythonプログラムをVSCodeなどのデバッガ付きIDEで実行する
- XPATHを使う直前の行にブレークポイントを設定する
- ブレークポイントで処理が止まった状態で、Python制御下のEdgeウィンドウを操作する
下図は xpath_sample.py をVSCodeでデバッグ実行し、ブレークポイントで止まっているところです。
この状態では、PythonがEdgeを制御しているため、IEモードの設定が無視されます。
Edgeウィンドウで右クリックすると「開発者ツールで調査する」が表示されるようになります。
「開発者ツールで調査する」を 2回実行 すると、デベロッパーツールが正しく表示されることがあります（理由は不明ですが、実績あり）。
デベロッパーツールが開いたら、対象要素を右クリックして「Copy → Copy XPath」でXPATHを取得できます。
5. おまけ：IEモード対応への改造
IEモードで動作するシステムをPython＋Edgeで自動化しようとすると、システム要件のミスマッチから正常動作しないことがあります。
XPATHが取得できた後は、以下の記事を参考にIEモード対応に改造することをおすすめします。
-
Microsoft公式ドキュメント（IEモード + WebDriver）
👉 https://learn.microsoft.com/ja-jp/microsoft-edge/webdriver/ie-mode?tabs=c-sharp -
Qiita記事（watanabe-tsubasa氏）
👉 https://qiita.com/watanabe-tsubasa/items/7e722922e786b0787a8a
まとめ
| 状況 | 対処法 |
|---|---|
| 通常のページでXPATHを取得したい | Edgeで右クリック →「開発者ツールで調査する」 |
| 社内IEモードページでXPATHが取得できない | VSCode等でブレークポイント実行し、Python制御下のEdgeから取得 |
| Seleniumがインストールされていない | pip install selenium |
| EdgeDriverが自動DLされない | msedgedriver.exeを手動でDLして配置 |
XPATHを使いこなすことで、ブラウザ操作の自動化の幅が大きく広がります。
社内システム特有の問題も、デバッガを活用することで柔軟に対処できます。ぜひ試してみてください！
その他の記事は BB研究所 で公開しています。