selenium

[Python] seleniumで2つ目以降のiframeの要素を取得する方法

2025-01-18更新日: 2025-01-18

Seleniumで2つ目以降のiframe内の要素を取得するには、まずそのiframeに切り替える必要があります。

driver.switch_to.frame()メソッドを使用して、iframeを指定します。

複数のiframeがある場合、インデックスやiframeのid、name属性を使って特定のiframeに切り替えます。

例えば、2つ目のiframeに切り替えるには、driver.switch_to.frame(1)のようにインデックスを指定します。

iframe内の操作が終わったら、driver.switch_to.default_content()で元のコンテンツに戻ります。

目次から探す

Seleniumでiframeを操作する基本
2つ目以降のiframeにアクセスする方法
具体的なコード例
複数のiframeがある場合の注意点
応用例
まとめ

Seleniumでiframeを操作する基本

iframeとは？

iframe(インラインフレーム)は、HTML文書内に別のHTML文書を埋め込むための要素です。

これにより、異なるコンテンツを同じページ内で表示することができます。

iframeは、広告、動画、外部コンテンツなど、さまざまな用途で使用されます。

以下はiframeの基本的な構造です。

<iframe src="https://example.com" width="600" height="400"></iframe>

Seleniumでiframeを操作する必要性

Seleniumは、Webアプリケーションのテストや自動化を行うためのツールです。

iframeを操作する必要があるのは、以下のような場合です。

理由	説明
コンテンツの取得	iframe内にあるデータや要素を取得するため
フォームの操作	iframe内のフォームに入力するため
リンクのクリック	iframe内のリンクをクリックするため

iframeの切り替え方法の基本

Seleniumでiframeを操作するには、まず対象のiframeに切り替える必要があります。

iframeに切り替えることで、その中の要素にアクセスできるようになります。

切り替えには、switch_to.frame()メソッドを使用します。

switch_to.frame()メソッドの使い方

switch_to.frame()メソッドは、指定したiframeに切り替えるためのメソッドです。

以下のように使用します。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# 1つ目のiframeに切り替え
driver.switch_to.frame(0)  # インデックスを指定
# iframe内の要素を操作
element = driver.find_element_by_id("element_id")
element.click()  # 要素をクリック
# 元のコンテンツに戻る
driver.switch_to.default_content()
# WebDriverを終了
driver.quit()

このコードでは、最初にWebDriverを初期化し、指定したURLを開きます。

その後、インデックスを使って1つ目のiframeに切り替え、iframe内の要素を操作しています。

操作が終わったら、switch_to.default_content()メソッドを使って元のコンテンツに戻ります。

2つ目以降のiframeにアクセスする方法

インデックスを使ったiframeの指定

Seleniumでは、複数のiframeが存在する場合、インデックスを使って特定のiframeにアクセスできます。

インデックスは0から始まるため、2つ目のiframeはインデックス1で指定します。

以下はその例です。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# 2つ目のiframeに切り替え
driver.switch_to.frame(1)  # インデックス1を指定
# iframe内の要素を操作
element = driver.find_element_by_id("element_id")
element.click()  # 要素をクリック
# 元のコンテンツに戻る
driver.switch_to.default_content()
# WebDriverを終了
driver.quit()

このコードでは、2つ目のiframeに切り替えた後、iframe内の要素を操作しています。

idやname属性を使ったiframeの指定

iframeにはidやname属性が設定されていることがあります。

これらの属性を使って、特定のiframeにアクセスすることも可能です。

以下はその方法です。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# id属性を使ってiframeに切り替え
driver.switch_to.frame("iframe_id")  # idを指定
# iframe内の要素を操作
element = driver.find_element_by_name("element_name")
element.click()  # 要素をクリック
# 元のコンテンツに戻る
driver.switch_to.default_content()
# WebDriverを終了
driver.quit()

このコードでは、id属性を使ってiframeに切り替えています。

name属性も同様に使用できます。

XPathやCSSセレクタを使ったiframeの指定

XPathやCSSセレクタを使用して、iframeを指定することもできます。

これにより、より柔軟にiframeを選択できます。

以下はXPathを使った例です。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# XPathを使ってiframeに切り替え
iframe = driver.find_element_by_xpath("//iframe[@class='iframe_class']")
driver.switch_to.frame(iframe)  # 要素を指定
# iframe内の要素を操作
element = driver.find_element_by_css_selector(".element_class")
element.click()  # 要素をクリック
# 元のコンテンツに戻る
driver.switch_to.default_content()
# WebDriverを終了
driver.quit()

このコードでは、XPathを使って特定のiframeを選択し、その中の要素を操作しています。

CSSセレクタも同様に使用できます。

iframeのネスト構造に対応する方法

iframeがネストされている場合、親iframeから子iframeに切り替える必要があります。

以下はその方法です。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# 1つ目のiframeに切り替え
driver.switch_to.frame(0)  # 親iframe
# 2つ目のiframeに切り替え
driver.switch_to.frame(0)  # 子iframe
# iframe内の要素を操作
element = driver.find_element_by_id("element_id")
element.click()  # 要素をクリック
# 親iframeに戻る
driver.switch_to.parent_frame()
# 元のコンテンツに戻る
driver.switch_to.default_content()
# WebDriverを終了
driver.quit()

このコードでは、最初に親iframeに切り替え、その後子iframeに切り替えています。

操作が終わったら、switch_to.parent_frame()メソッドを使って親iframeに戻り、最終的に元のコンテンツに戻ります。

具体的なコード例

インデックスを使って2つ目のiframeにアクセスする例

以下のコードは、インデックスを使って2つ目のiframeにアクセスし、その中の要素を操作する例です。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# 2つ目のiframeに切り替え
driver.switch_to.frame(1)  # インデックス1を指定
# iframe内の要素を操作
element = driver.find_element_by_id("element_id")
element.click()  # 要素をクリック
# WebDriverを終了
driver.quit()

このコードでは、2つ目のiframeに切り替えた後、指定した要素をクリックしています。

idやname属性を使ってiframeにアクセスする例

次のコードは、id属性を使ってiframeにアクセスする例です。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# id属性を使ってiframeに切り替え
driver.switch_to.frame("iframe_id")  # idを指定
# iframe内の要素を操作
element = driver.find_element_by_name("element_name")
element.click()  # 要素をクリック
# WebDriverを終了
driver.quit()

このコードでは、id属性を使ってiframeに切り替え、その中の要素を操作しています。

XPathを使ってiframeにアクセスする例

以下のコードは、XPathを使って特定のiframeにアクセスする例です。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# XPathを使ってiframeに切り替え
iframe = driver.find_element_by_xpath("//iframe[@class='iframe_class']")
driver.switch_to.frame(iframe)  # 要素を指定
# iframe内の要素を操作
element = driver.find_element_by_css_selector(".element_class")
element.click()  # 要素をクリック
# WebDriverを終了
driver.quit()

このコードでは、XPathを使ってiframeを選択し、その中の要素を操作しています。

iframe内の要素を操作する例

以下のコードは、iframe内のフォームに入力する例です。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# 1つ目のiframeに切り替え
driver.switch_to.frame(0)  # インデックス0を指定
# iframe内のテキストボックスに入力
input_field = driver.find_element_by_id("input_id")
input_field.send_keys("テスト入力")  # テキストを入力
# iframe内のボタンをクリック
submit_button = driver.find_element_by_id("submit_id")
submit_button.click()  # ボタンをクリック
# WebDriverを終了
driver.quit()

このコードでは、iframe内のテキストボックスに文字を入力し、ボタンをクリックしています。

iframeから元のコンテンツに戻る方法

iframeから元のコンテンツに戻るには、switch_to.default_content()メソッドを使用します。

以下のコードはその例です。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# 1つ目のiframeに切り替え
driver.switch_to.frame(0)  # インデックス0を指定
# iframe内の要素を操作
element = driver.find_element_by_id("element_id")
element.click()  # 要素をクリック
# 元のコンテンツに戻る
driver.switch_to.default_content()
# WebDriverを終了
driver.quit()

このコードでは、iframe内の要素を操作した後、switch_to.default_content()メソッドを使って元のコンテンツに戻っています。

複数のiframeがある場合の注意点

iframeのインデックスが変わる場合の対処法

複数のiframeがある場合、インデックスを使って特定のiframeにアクセスすることが一般的ですが、ページの構造が変わるとインデックスが変わる可能性があります。

このような場合、インデックスではなく、idやname属性、またはXPathやCSSセレクタを使用してiframeを指定することが推奨されます。

以下はその例です。

# id属性を使ってiframeに切り替え
driver.switch_to.frame("iframe_id")  # idを指定

この方法により、インデックスの変動に影響されずに安定してiframeにアクセスできます。

iframeの動的生成に対応する方法

動的に生成されるiframeに対しては、要素がDOMに追加されるまで待機する必要があります。

SeleniumのWebDriverWaitを使用して、特定の条件が満たされるまで待機することができます。

以下はその例です。

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# iframeが動的に生成されるのを待つ
WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.XPATH, "//iframe[@id='dynamic_iframe']")))
# iframeに切り替え
driver.switch_to.frame("dynamic_iframe")
# WebDriverを終了
driver.quit()

このコードでは、指定したiframeがDOMに存在するまで最大10秒間待機します。

iframeのロード待機に関する注意点

iframeが完全にロードされる前に操作を行うと、要素が見つからないエラーが発生することがあります。

これを避けるために、iframe内の要素が存在するまで待機することが重要です。

以下はその方法です。

# iframeに切り替えた後、要素が存在するまで待機
WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.ID, "element_id")))
# iframe内の要素を操作
element = driver.find_element_by_id("element_id")
element.click()  # 要素をクリック

このように、要素が存在するまで待機することで、エラーを回避できます。

iframe内の要素が見つからない場合の対処法

iframe内の要素が見つからない場合、以下の点を確認することが重要です。

iframeに正しく切り替えているか: switch_to.frame()メソッドを使用して、正しいiframeに切り替えているか確認します。
要素のセレクタが正しいか: 使用しているセレクタ(id、name、XPath、CSSセレクタ)が正しいか確認します。
要素が動的に生成されているか: 要素がDOMに追加されるまで待機する必要がある場合があります。

以下は、要素が見つからない場合の対処法の例です。

# iframeに切り替えた後、要素が存在するまで待機
try:
    element = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.ID, "element_id")))
    element.click()  # 要素をクリック
except Exception as e:
    print("要素が見つかりませんでした:", e)

このコードでは、要素が見つからない場合にエラーメッセージを表示するようにしています。

応用例

iframe内でフォームを操作する

iframe内のフォームを操作するには、まずiframeに切り替え、その後フォームの要素を特定して操作します。

以下は、テキストボックスに入力し、送信ボタンをクリックする例です。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# 1つ目のiframeに切り替え
driver.switch_to.frame(0)  # インデックス0を指定
# テキストボックスに入力
input_field = driver.find_element_by_id("input_id")
input_field.send_keys("テスト入力")  # テキストを入力
# 送信ボタンをクリック
submit_button = driver.find_element_by_id("submit_id")
submit_button.click()  # ボタンをクリック
# WebDriverを終了
driver.quit()

このコードでは、iframe内のテキストボックスに文字を入力し、送信ボタンをクリックしています。

iframe内のリンクをクリックする

iframe内にあるリンクをクリックする場合も、まずiframeに切り替え、その後リンクを特定してクリックします。

以下はその例です。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# 1つ目のiframeに切り替え
driver.switch_to.frame(0)  # インデックス0を指定
# リンクをクリック
link = driver.find_element_by_link_text("リンクテキスト")
link.click()  # リンクをクリック
# WebDriverを終了
driver.quit()

このコードでは、iframe内の特定のリンクをクリックしています。

iframe内のテキストを取得する

iframe内のテキストを取得するには、iframeに切り替えた後、対象の要素からテキストを取得します。

以下はその例です。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# 1つ目のiframeに切り替え
driver.switch_to.frame(0)  # インデックス0を指定
# テキストを取得
text_element = driver.find_element_by_id("text_id")
text = text_element.text  # テキストを取得
print("取得したテキスト:", text)  # テキストを表示
# WebDriverを終了
driver.quit()

このコードでは、iframe内の特定の要素からテキストを取得し、表示しています。

iframe内の画像やメディアを操作する

iframe内の画像やメディアを操作する場合も、まずiframeに切り替え、その後対象の要素を特定して操作します。

以下は、画像をクリックする例です。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# 1つ目のiframeに切り替え
driver.switch_to.frame(0)  # インデックス0を指定
# 画像をクリック
image = driver.find_element_by_xpath("//img[@id='image_id']")
image.click()  # 画像をクリック
# WebDriverを終了
driver.quit()