Python seleniumを使用でvueサイトのtextareaが見つからないです。

Question

実現したいこと

PythonのseleniumでLine オフィシャルのチャット機能(vue)で自動でメッセージを送信していましたが、半年前からtextareaが見つからないエラーに直面して困っております。

発生している問題・分からないこと

pythonコードで

textarea = driver.find_element_by_xpath('//*[@id="editor"]//textarea')

でテキストエリアを検索してますがエラーになります。

エラーメッセージ

Message: no such element: Unable to locate element: {"method":"css selector","selector":"textarea"}
  (Session info: chrome=130.0.6723.70)

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

Chromeブラウザの要素の検証画面です。↑
textareaタグの親要素に「textarea-ex」があり
「shadow-root」となっているので
上記のコードの前に、クリックする動作を加えてたり
sleepを数秒にして待っても見ましたが、要素は見つけられませんでした。

補足

特になし

Comments

[juner]

selenium の 公式ドキュメントにはこうありますが、この方法は試されていますでしょうか？

https://www.selenium.dev/ja/documentation/webdriver/elements/finders/#evaluating-the-shadow-dom

```py
shadow_host = driver.find_element(By.CSS_SELECTOR, '#shadow_host')
shadow_root = shadow_host.shadow_root
shadow_content = shadow_root.find_element(By.CSS_SELECTOR, '#shadow_content')
```
とあるので driver.find_element_by_xpath(xpath) ではなく、
driver.find_element(By.XPATH, xpath) 形式の必要があるのではないでしょうか？
https://www.selenium.dev/documentation/webdriver/elements/locators/#xpath

[otn]

shadow rootの中にある事は認識されているので、「shadow rootの中のエレメントはどうやって検索するか」を調べれば、解決策は簡単に見つかったはずです。
https://www.google.com/search?q=selenium+shadow+root

frame/iframe/shadowrootの中は外から見えないので、検索前にその中に移動する必要があります。

Answer 1

いただいたコードを参考したらできました。
seleniumのバージョンが4以上でしたら

shadow_host = driver.find_element(By.CSS_SELECTOR, '#shadow_host')
shadow_root = shadow_host.shadow_root
shadow_content = shadow_root.find_element(By.CSS_SELECTOR, '#shadow_content')

できたと思いますが、3.141.0のバージョンだと以下のコードでできました。

import time
from selenium.webdriver.common.by import By

# textarea = driver.find_element_by_xpath('//*[@id="editor"]//textarea')
shadow_host = driver.find_element(By.ID, 'editor')
script = 'return arguments[0].shadowRoot.children'
children = driver.execute_script(script, shadow_host)
time.sleep(1.0)
textarea = next(child for child in children
                      if child.get_attribute('inputmode') == 'text')

Answer 2

selenium の 公式ドキュメントにはこうありますが、この方法は試されていますでしょうか？

https://www.selenium.dev/ja/documentation/webdriver/elements/finders/#evaluating-the-shadow-dom

shadow_host = driver.find_element(By.CSS_SELECTOR, '#shadow_host')
shadow_root = shadow_host.shadow_root
shadow_content = shadow_root.find_element(By.CSS_SELECTOR, '#shadow_content')

つまり driver.find_element_by_xpath(xpath) ではなく、
driver.find_element(By.XPATH, xpath) 形式の必要があるのではないでしょうか？

https://www.selenium.dev/documentation/webdriver/elements/locators/#xpath

その為、貴殿のコードはこう書く必要があると推測できるのではないでしょうか？

shadow_root = driver.find_element(By.XPATH, '//*[@id="editor"]').shadow_root
textarea = shadow_root.find_element(By.XPATH, '//textarea')

Comments

[youko1235]

回答ありがとうございます。
ベストアンサーは別の方を選ばせていただきましたが、こちらの回答も非常に参考になりました。

[juner]

こっちがベストアンサーに選ばれているのでは……？