seleniumを使って社内システムからデータを取得するために、XPathで要素を指定しているのに「あれ？ボタンが押せない。。。」
こんな場面に遭遇することがあるかもしれません。
XPathをコピペするだけでは要素に辿り着けず、頭を悩ます方もいます。私も一度この壁にぶつかりました。
開発者ツールでHTLMをよく見てみると、フレーム構造になっており、親フレームと子フレームのような階層構造になっているということがあります。
そこで今回は、seleniumでのフレーム間移動についてご紹介します。
フレーム構造とは？
フレーム構造とは、１つのページをいくつかに分割して、それぞれの分割エリアに、別々のページを表示させる方法のことです。
言い換えれば、複数のページを組み合わせて、ひとつのページであるかのように表示させる方法です。
＜画面＞
＜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() を使う