【Python初心者】スクレイピングでクリックしたい要素の取得で「InvalidArgumentException」になる。

Question

前提

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

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

クリックしたい要素の取得で躓いているため
お知恵をお借りできますと幸いです。

実現したいこと

「Edit」のボタンをクリックしたいので、
要素の取得をしたいです。

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

該当箇所のエラーメッセージは下記です。

InvalidArgumentException                  Traceback (most recent call last)
Cell In[11], line 4
      1 #Editの要素を取得
      2 edit_btn = browser.find_element(
      3     By.XPATH, "//dm-calculator"
----> 4 ).shadow_root.find_element(By.XPATH, '//*[@id="skipTo"]/div[1]/div/div[1]/div[1]/div/div/div/div/div/div/dm-calculator//form/div/div/div[2]/div/div/div[2]/button')
      6 '''
      7 //*[@id="skipTo"]/div[1]/div/div[1]/div[1]/div/div/div/div/div/div/dm-calculator
      8 //*[@id="skipTo"]/div[1]/div/div[1]/div[1]/div/div/div/div/div/div/dm-calculator//form/div/div/div[2]/div/div/div[2]/button
      9 '''
     11 '''　↓NoSuchElementException
     12     edit_btn = browser.find_element(
     13         By.XPATH, "//dm-calculator"
     14     ).shadow_root.find_element(By.CLASS_NAME, 'vs-link-cta vs-calculator-edit-link')
     15 '''

File ~\AppData\Local\Programs\Python\Python311\Lib\site-packages\selenium\webdriver\remote\shadowroot.py:54, in ShadowRoot.find_element(self, by, value)
     51     by = By.CSS_SELECTOR
     52     value = '[name="%s"]' % value
---> 54 return self._execute(Command.FIND_ELEMENT_FROM_SHADOW_ROOT, {"using": by, "value": value})["value"]

File ~\AppData\Local\Programs\Python\Python311\Lib\site-packages\selenium\webdriver\remote\shadowroot.py:83, in ShadowRoot._execute(self, command, params)
     81     params = {}
     82 params["shadowId"] = self._id
---> 83 return self.session.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)

InvalidArgumentException: Message: invalid argument: invalid locator
  (Session info: chrome=109.0.5414.120)
Stacktrace:
Backtrace:
	(No symbol) [0x01026643]
	(No symbol) [0x00FBBE21]
	(No symbol) [0x00EBDA9D]
	(No symbol) [0x00EF13F3]
	(No symbol) [0x00EF14CB]
	(No symbol) [0x00EE64F1]
	(No symbol) [0x00F0FDC4]
	(No symbol) [0x00EE641F]
	(No symbol) [0x00F100D4]
	(No symbol) [0x00F26B09]
	(No symbol) [0x00F0FB76]
	(No symbol) [0x00EE49C1]
	(No symbol) [0x00EE5E5D]
	GetHandleVerifier [0x0129A142+2497106]
	GetHandleVerifier [0x012C85D3+2686691]
	GetHandleVerifier [0x012CBB9C+2700460]
	GetHandleVerifier [0x010D3B10+635936]
	(No symbol) [0x00FC4A1F]
	(No symbol) [0x00FCA418]
	(No symbol) [0x00FCA505]
	(No symbol) [0x00FD508B]
	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()

#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')

#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')



#↓↓↓下記がエラー箇所です↓↓↓

#Editの要素を取得
edit_btn = browser.find_element(
    By.XPATH, "//dm-calculator"
).shadow_root.find_element(By.XPATH, '//*[@id="skipTo"]/div[1]/div/div[1]/div[1]/div/div/div/div/div/div/dm-calculator//form/div/div/div[2]/div/div/div[2]/button')

試したこと

対象の要素がshadow-root内なので、
上記の要素の取得方法になっています。

「Edit」に対してXPATHでの指定ではなく、
CLASS_NAMEでの指定なども試みましたが
うまくいきませんでした。

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

Python 3.11.1　
selenium 4.7.2
jupyter lab

ここにより詳細な情報を記載してください。

Answer 1

shadow root 内で、XPath は指定できないと思います。素直に CSS セレクターを使いましょう。

# Get the shadow root
shadow = browser.find_element(By.XPATH, "//dm-calculator").shadow_root

# Click the 'edit' button
shadow.find_element(
    By.CSS_SELECTOR, "button.vs-link-cta.vs-calculator-edit-link"
).click()

Comments

[shin_qqq]

ご教示頂いた方法で解決できました。
早速のご回答ありがとうございました。