スクレイピングでPythonでクリックするとエラーになるボタンがあります。

Question

実現したいこと

閲覧頂き、ありがとうございます。
visaのサイトから特定日の為替レートを取得するため
開発しています。

Python初心者ですが、皆様のお知恵をお借りしながら
何とか１歩ずつ進めております。

必要項目入力後のボタンクリックで躓いているため
ご協力頂けますと幸いです。

前提

「Calculate Conversion」のボタンをクリックさせると
エラーとなります。
スクレイピングで操作するとエラーになり、
手動だとクリックできます。

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

---------------------------------------------------------------------------
ElementNotInteractableException           Traceback (most recent call last)
Cell In[30], line 6
      1 #calculateボタンの要素を取得
      3 calculate_btn = browser.find_element(
      4     By.XPATH, "//dm-calculator"
      5 ).shadow_root.find_element(By.CSS_SELECTOR, "button.vs-btn.vs-btn-primary")
----> 6 calculate_btn.click()

File ~\AppData\Local\Programs\Python\Python311\Lib\site-packages\selenium\webdriver\remote\webelement.py:93, in WebElement.click(self)
     91 def click(self) -> None:
     92     """Clicks the element."""
---> 93     self._execute(Command.CLICK_ELEMENT)

File ~\AppData\Local\Programs\Python\Python311\Lib\site-packages\selenium\webdriver\remote\webelement.py:410, in WebElement._execute(self, command, params)
    408     params = {}
    409 params["id"] = self._id
--> 410 return self._parent.execute(command, params)

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)

ElementNotInteractableException: Message: element not interactable
  (Session info: chrome=109.0.5414.120)
Stacktrace:
Backtrace:
	(No symbol) [0x00B06643]
	(No symbol) [0x00A9BE21]
	(No symbol) [0x0099D960]
	(No symbol) [0x009D23A7]
	(No symbol) [0x009C6B13]
	(No symbol) [0x009EFD7C]
	(No symbol) [0x009C641F]
	(No symbol) [0x009F00D4]
	(No symbol) [0x00A06B09]
	(No symbol) [0x009EFB76]
	(No symbol) [0x009C49C1]
	(No symbol) [0x009C5E5D]
	GetHandleVerifier [0x00D7A142+2497106]
	GetHandleVerifier [0x00DA85D3+2686691]
	GetHandleVerifier [0x00DABB9C+2700460]
	GetHandleVerifier [0x00BB3B10+635936]
	(No symbol) [0x00AA4A1F]
	(No symbol) [0x00AAA418]
	(No symbol) [0x00AAA505]
	(No symbol) [0x00AB508B]
	BaseThreadInitThunk [0x764400F9+25]
	RtlGetAppContainerNamedObjectPath [0x77AE7BBE+286]
	RtlGetAppContainerNamedObjectPath [0x77AE7B8E+238]

該当のソースコード

エラー箇所は最下部です↓↓↓

from selenium import webdriver
!pip install webdriver_manager
from time import sleep
from webdriver_manager.chrome import ChromeDriverManager

#ブラウザで対象ページを開く
browser = webdriver.Chrome(ChromeDriverManager().install())
url = ('https://usa.visa.com/support/consumer/travel-support/exchange-rate-calculator.html')
browser.get(url)
sleep(4)


from selenium.webdriver.common.by import By


#Cookie同意ボタンをクリック
elem_ok_btn = browser.find_element(By.XPATH, '//*[@id="CookieReportsBanner"]/div[1]/div[2]/a[1]')
elem_ok_btn.click()

#Fromのボックスを取得しUSDを入力
from_coin = browser.find_element(
    By.XPATH, "//dm-calculator"
).shadow_root.find_element(By.ID, "autosuggestinput_from")
from_coin.send_keys('USD')

#Toの項目を取得しJPYを入力
to_coin = browser.find_element(
    By.XPATH, "//dm-calculator"
).shadow_root.find_element(By.ID, "autosuggestinput_to")
to_coin.send_keys('JPY')

#Amountのボックスを取得し100入力（要素がshadow-rootに含まれるので取得の仕方を工夫）
amount = browser.find_element(
    By.XPATH, "//dm-calculator"
).shadow_root.find_element(By.ID, "input_amount_paid")
amount.send_keys('100')

#Editの要素を取得
edit_btn = browser.find_element(
    By.XPATH, "//dm-calculator"
).shadow_root.find_element(By.CSS_SELECTOR, "button.vs-link-cta.vs-calculator-edit-link")
edit_btn.click()

#tran_dateを取得
tran_date = browser.find_element(
    By.XPATH, "//dm-calculator"
).shadow_root.find_element(By.ID, "dateinput_date")

sleep(4)
tran_date.clear()
sleep(4)
tran_date.send_keys('12/01/2022')
sleep(4)
tran_date.clear()
sleep(4)
tran_date.send_keys('12/01/2022')



#↓↓エラーの該当箇所です↓↓

#calculateボタンの要素を取得

calculate_btn = browser.find_element(
    By.XPATH, "//dm-calculator"
).shadow_root.find_element(By.CSS_SELECTOR, "button.vs-btn.vs-btn-primary")
calculate_btn.click()

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

Python 3.11.1　
selenium 4.7.2
jupyter lab

追記

該当ボタンをpythonでクリックするとエラーになるため、
項目の入力までで処理を止め、手動でボタンをクリックしたところ
サイト上で入力エラーとなりました。

その後、通貨などを指定し直してからボタンをクリックすると
正常に結果が得られます。
これはこのサイトの仕様なのでしょうか？

こういった場合にpythonで操作する方法があれば
教えて頂きたいです。

Answer 1

コードを書く前に、対象のサイトの正常な挙動を確認しましょう。スクレイピングはそれからです。

通貨の情報を入力する欄に、直接文字を打ち込むと、「There was an issue with your request.」というエラーメッセージが画面に出力されます。この要素は文字を入力することができますが、最終的にはリストから任意の値を選択しなければいけない仕様になってます。そのため、send_keys() を使って文字を入力しても、calculate ボタンは非アクティブのままです。

From 及び To のボタンをクリックし、出現するリストの要素からそれぞれ任意の要素を選ぶ必要があります。

Comments

[shin_qqq]

ご回答ありがとうございます。
確かにリストからの選択が必要なようですね。

リストから選択するコードを書きたいのですが、
aria-autocomplete属性が使われていて躓いています。

seleniumで上記リストを選択する方法をご存知でしょうか？

[Demerara]

具体的に何に躓いているのですか？開発者ツールの使い方ですか？
いつも通り、エレメントピッカーで要素にカーソルを重ねれば該当の要素の情報を見る事ができます。

1. From というテキストの右側にあるボタンをクリック
2. 出現したリスト内の任意の要素をクリック
3. To 側も同様のことをする

でいけます。

Answer 2

ボタンが見えないか、見えていても操作できない状態にある可能性があります。この場合、「sleep」メソッドを使用して、Webページの読み込みを待ってからボタンをクリックすることを試してください。

sleep(10)
calculate_btn.click()

Comments

[shin_qqq]

ご回答ありがとうございます。
sleepで待機してみましたが、同様のエラーとなりました。