[Python] Webスクレイピングの基本〜Seleniumでフレーム操作〜

seleniumを使って社内システムからデータを取得するために、XPathで要素を指定しているのに「あれ？ボタンが押せない。。。」

こんな場面に遭遇することがあるかもしれません。

XPathをコピペするだけでは要素に辿り着けず、頭を悩ます方もいます。私も一度この壁にぶつかりました。

開発者ツールでHTLMをよく見てみると、フレーム構造になっており、親フレームと子フレームのような階層構造になっているということがあります。

そこで今回は、seleniumでのフレーム間移動についてご紹介します。

1 フレーム構造とは？
2 子フレームに移動
3 親フレームに移動
4 まとめ

フレーム構造とは？

フレーム構造とは、１つのページをいくつかに分割して、それぞれの分割エリアに、別々のページを表示させる方法のことです。

言い換えれば、複数のページを組み合わせて、ひとつのページであるかのように表示させる方法です。

＜画面＞

＜HTML＞

図のようなフレーム構造になっている場合は、XPathで要素を指定しても要素に辿り着けません。

以下のように操作しましょう！

子フレームに移動

#子フレームに移動
driver.switch_to.frame(driver.find_element(By.NAME,”frame1″))

上記のように記載することで、「frame1」という名前の子フレームへ移動することができます。

親フレームに移動

#親フレームに戻る
driver.switch_to.parent_frame()

子フレームへ移動した後に元の親フレームへ移動したい場合には、上記のように記載することで今いる位置から親フレームへ移動することが出来ます。

例題として、フレーム構造になっている画面で、次のような操作をするにはどうすればよいでしょうか？

① 期間の「From」と「TO」にそれぞれ日付を入力
② 検索ボタンを押下

ポイントは、期間の入力は「frame1」を操作、検索ボタンは「frame2」を操作することです。
早速、例題の答えです。

以下のようなプログラムになります。

from selenium import webdriver
import chromedriver_binary
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service

## ① 期間の「From」と「TO」にそれぞれ日付を入力 ######
##子フレーム（frame1）に移動
driver.switch_to.frame(driver.find_element(By.NAME,”frame1″))

##子フレーム（frame1）にある「期間」にテキストを入力する
elem_from = driver.find_element(By.ID,’frame1_from’)
elem_from.send_keys(‘20230901’)

elem_to = driver.find_element(By.ID,’frame1_to’)
elem_to.send_keys(‘20230930’)

## ② 検索ボタンを押下 #######
親フレームに戻る
driver.switch_to.parent_frame()

#子フレーム（frame2）に移動
driver.switch_to.frame(driver.find_element(By.NAME,”frame2″))

#子フレーム（frame2）にあるボタンを押す
driver.find_element(By.ID,’frame2noButton’).click()

まず、子フレーム「frame1」に移動し、期間を入力します。

その後、親フレームに戻ってから、子フレーム「frame2」に移動し、検索ボタンを押下します。

「frame1」から「frame2」を操作できないので注意ください。

以上、seleniumでのフレーム操作の方法でした！

まとめ

XPathをコピーしているのにエラーになるというときはframeを疑いましょう！
フレームを移動するときは switch_to.frame() を使う
親フレームに戻る時は switch_to.parent_frame() を使う