selenium 入力ボックスの要素が見つからない

Question

前提

閲覧頂きありがとうございます。

為替レートの情報を自動で取得したく
スクレイピングを試みています。

下記のサイトでCookieの同意をクリックした後、
「」の項目に入力するため要素の取得をしたいのですが、
要素が見つからずエラーとなります。

■対象ページ
https://usa.visa.com/support/consumer/travel-support/exchange-rate-calculator.html

発生している問題・エラーメッセージ

---------------------------------------------------------------------------
NoSuchElementException                    Traceback (most recent call last)
Cell In[13], line 1
----> 1 irame = browser.find_element(By.XPATH, '//*[@id="input_amount_paid"]')

File ~\AppData\Local\Programs\Python\Python311\Lib\site-packages\selenium\webdriver\remote\webdriver.py:861, in WebDriver.find_element(self, by, value)
    858     by = By.CSS_SELECTOR
    859     value = '[name="%s"]' % value
--> 861 return self.execute(Command.FIND_ELEMENT, {"using": by, "value": value})["value"]

File ~\AppData\Local\Programs\Python\Python311\Lib\site-packages\selenium\webdriver\remote\webdriver.py:444, in WebDriver.execute(self, driver_command, params)
    442 response = self.command_executor.execute(driver_command, params)
    443 if response:
--> 444     self.error_handler.check_response(response)
    445     response["value"] = self._unwrap_value(response.get("value", None))
    446     return response

File ~\AppData\Local\Programs\Python\Python311\Lib\site-packages\selenium\webdriver\remote\errorhandler.py:249, in ErrorHandler.check_response(self, response)
    247         alert_text = value["alert"].get("text")
    248     raise exception_class(message, screen, stacktrace, alert_text)  # type: ignore[call-arg]  # mypy is not smart enough here
--> 249 raise exception_class(message, screen, stacktrace)

NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//*[@id="input_amount_paid"]"}
  (Session info: chrome=109.0.5414.75)
Stacktrace:
Backtrace:
	(No symbol) [0x00806643]
	(No symbol) [0x0079BE21]
	(No symbol) [0x0069DA9D]
	(No symbol) [0x006D1342]
	(No symbol) [0x006D147B]
	(No symbol) [0x00708DC2]
	(No symbol) [0x006EFDC4]
	(No symbol) [0x00706B09]
	(No symbol) [0x006EFB76]
	(No symbol) [0x006C49C1]
	(No symbol) [0x006C5E5D]
	GetHandleVerifier [0x00A7A142+2497106]
	GetHandleVerifier [0x00AA85D3+2686691]
	GetHandleVerifier [0x00AABB9C+2700460]
	GetHandleVerifier [0x008B3B10+635936]
	(No symbol) [0x007A4A1F]
	(No symbol) [0x007AA418]
	(No symbol) [0x007AA505]
	(No symbol) [0x007B508B]
	BaseThreadInitThunk [0x76A100F9+25]
	RtlGetAppContainerNamedObjectPath [0x77747BBE+286]
	RtlGetAppContainerNamedObjectPath [0x77747B8E+238]

該当のソースコード

!pip install selenium
from selenium import webdriver
!pip install webdriver_manager
from time import sleep

from webdriver_manager.chrome import ChromeDriverManager

from selenium.webdriver.common.by import By

elem_ok_btn = browser.find_element(By.XPATH, '//*[@id="CookieReportsBanner"]/div[1]/div[2]/a[1]')
elem_ok_btn.click()

#エラー箇所↓↓
irame = browser.find_element(By.XPATH, '//*[@id="input_amount_paid"]')

試したこと

※XPATH、chras名などで指定しようと試みましたが、
いずれもエラーになります。

※iframeが使用されている場合は
htmlを確認しましたが、該当箇所ではframeは
使用されていないのか、同様にエラーとなりました。

補足情報（FW/ツールのバージョンなど）

Python 3.11.1　
selenium 4.7.2

Answer 1

該当のページは、cloudflare の cdn を利用してデータを取得しています。そのため、ページのロードを待つ必要がありそうです。

selenium でページロードを待機するには、.implicitly_wait() というメソッドを使います。

追記：加えて、該当の要素は Shadow DOM となっており、shadow root が設定されている内側にある要素です。そのため、shadow root を取得してから、任意の要素を取得するようにすれば上手く取得できます。

参照：Using shadow DOM - Web Components | MDN

from selenium import webdriver

browser = webdriver.Chrome()

# ページ遷移時すぐに要素が見つからない場合に見つかるまで待機する時間を設定
# この場合、10 秒までは要素が見つかるまで待ちます。それでも見つからないと諦めてタイムアウトを返します
browser.implicitly_wait(10)

browser.get(https://usa.visa.com/support/consumer/travel-support/exchange-rate-calculator.html)

# Shadow root を持つ要素は、dm-calculator であることがわかるため、その要素のプロパティから shadowroot を取得します
# その上で、任意の要素を取得します
amount = browser.find_element(
    By.XPATH, "//dm-calculator"
).shadow_root.find_element(By.ID, "input_amount_paid")

より明示的な待機についてはドキュメントをご覧ください。

PlayWright を使った場合

selenium だと該当の要素の取得がどうにもうまくいかなかったため、試しに playwright でスクレイピングしてみたところ簡単に取得できたため、一応回答として残しておくことにします。

import asyncio

from playwright.async_api import async_playwright

url = (
    "https://usa.visa.com/support/consumer/travel-support/"
    "exchange-rate-calculator.html"
)
amount = "58742"


async def main():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page()
        await page.goto(url)
        await page.get_by_placeholder("Enter amount").fill(amount)

        await page.get_by_role(
            "button", name="Open from currency list drop down menu."
        ).click()
        await page.locator("#listbox-item-2").click()
        await page.get_by_role(
            "button", name="Open to currency list drop down menu."
        ).click()
        await page.locator("#listbox-item-0").click()

        await page.get_by_role("button", name=" Calculate Conversion ").click()

        print(await page.locator("h2.vs-h2").nth(1).text_content())
        print(await page.locator("dm-calculator div").nth(45).text_content())

        await browser.close()


asyncio.run(main())

Comments

[shin_qqq]

早速のご回答頂きありがとうございました。
ご教示頂いた.implicitly_wait()を使用してみましたが、同様にNoSuchElementExceptionとなりました。

他に想定される原因などがあればご教示頂けますでしょうか。

```
browser.implicitly_wait(10)
Amount = browser.find_element(By.XPATH, '//*[@id="input_amount_paid"]')
```

[Demerara]

該当の要素は iframe でしたね。失礼しました。
そうなると、ドキュメントの以下の内容が役に立ちそうです。
https://www.selenium.dev/ja/documentation/webdriver/interactions/frames/#name%E3%81%BE%E3%81%9F%E3%81%AFid%E3%82%92%E4%BD%BF%E3%81%86

```python
browser.switch_to.frame('input_amount_paid')

iframe = browser.find_element(By.TAG_NAME, 'input')

# iframe に対する処理

# 処理が終わったら元の状態に戻す
browser.switch_to.default_content()
```

[shin_qqq]

追加のアドバイス頂きありがとうございます。
頂いたように下記で試したところ、 やはりエラーとなります。
iframeの使われ方が特殊なのでしょうか、、？

```python
browser.switch_to.frame('input_amount_paid')
iframe = browser.find_element(By.TAG_NAME, 'input')
```

↓エラーメッセージ
NoSuchFrameException: Message: input_amount_paid

[Demerara]

色々と試行錯誤してみましたが、私にはこの要素を selenium で取得することは出来ませんでした。お力になれず申し訳ありません。

selenium でのこの要素の取得が難しい理由はいくつか考えられますが、何が直接の原因なのかは私には判断できませんでした。また、複雑な手順を踏めば selenium でも該当の要素の取得が可能である可能性はあります。

つきましては、代替手段として別のスクレイピングツール PlayWright を利用した要素の取得方法を回答欄に追記いたしましたので、もし selenium にこだわらないのであれば、そちらのコードを参考にしていただければと思います。

もちろん、このまま別の方の回答を待っていただいても結構です。

[Demerara]

何度もすみません。selenium でもできました。取得したい要素を開発者ツールで再度確認したところ Shadow DOM となっていることがわかりました。

その場合、その親要素を取得して shadow root を取得、その中の要素を取得するようにすれば上手く取得できます。回答を改めます。

[shin_qqq]

ご回答ありがとうございました。
shadow rootを取得する方法で上手くいきました。
対象項目への記入もできたため次のステップへ進めています。

この度は何度も解決策をご教示頂き、ありがとうございました。