python seleniumでCSSセレクタのjavascriptのボタンをクリックできない

Question

htmlの「このサプライヤーの商品を注文する」ボタンをクリックしたいです。

<div class="orderAdvanceBtn btmMgnSet3">
     <a href="javascript:void(0);" class="btnType01 btnColor01 btnEffects" onclick="javascript:buyCart(15914134);">このサプライヤーの商品を注文する<i class="fa fa-chevron-right leftMgnSet" aria-hidden="true"></i></a>
</div>

pythonでボタンクリックするように書きました。

driver.find_element_by_css_selector('.btnType01.btnColor01.btnEffects').click()

うまくいかず、エラーになります。

c:\Users\mi_chan\Documents\tampopo\PSauto.py:89: DeprecationWarning: find_element_by_* commands are deprecated. Please use find_element() instead
  driver.find_element_by_css_selector('.btnType01.btnColor01.btnEffects').click()
Exception in Tkinter callback
Traceback (most recent call last):
  File "C:\Users\mi_chan\AppData\Local\Programs\Python\Python310\lib\tkinter\__init__.py", line 1921, in __call__
    return self.func(*args)
  File "c:\Users\mi_chan\Documents\tampopo\PSauto.py", line 89, in btnURL_click
    driver.find_element_by_css_selector('.btnType01.btnColor01.btnEffects').click()
  File "C:\Users\mi_chan\AppData\Local\Programs\Python\Python310\lib\site-packages\selenium\webdriver\remote\webelement.py", line 81, in click      
    self._execute(Command.CLICK_ELEMENT)
  File "C:\Users\mi_chan\AppData\Local\Programs\Python\Python310\lib\site-packages\selenium\webdriver\remote\webelement.py", line 710, in _execute  
    return self._parent.execute(command, params)
  File "C:\Users\mi_chan\AppData\Local\Programs\Python\Python310\lib\site-packages\selenium\webdriver\remote\webdriver.py", line 424, in execute    
    self.error_handler.check_response(response)
  File "C:\Users\mi_chan\AppData\Local\Programs\Python\Python310\lib\site-packages\selenium\webdriver\remote\errorhandler.py", line 247, in check_response
    raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable
  (Session info: chrome=96.0.4664.110)
Stacktrace:
Backtrace:
        Ordinal0 [0x00BF6903+2517251]
        Ordinal0 [0x00B8F8E1+2095329]
        Ordinal0 [0x00A92710+1058576]
        Ordinal0 [0x00ABE324+1237796]
        Ordinal0 [0x00AB4037+1196087]
        Ordinal0 [0x00AD64D3+1336531]
        Ordinal0 [0x00AB3A36+1194550]
        Ordinal0 [0x00AD65BA+1336762]
        Ordinal0 [0x00AE5BBF+1399743]
        Ordinal0 [0x00AD639B+1336219]
        Ordinal0 [0x00AB27A7+1189799]
        Ordinal0 [0x00AB3609+1193481]
        GetHandleVerifier [0x00D85904+1577972]
        GetHandleVerifier [0x00E30B97+2279047]
        GetHandleVerifier [0x00C86D09+534521]
        GetHandleVerifier [0x00C85DB9+530601]
        Ordinal0 [0x00B94FF9+2117625]
        Ordinal0 [0x00B998A8+2136232]
        Ordinal0 [0x00B999E2+2136546]
        Ordinal0 [0x00BA3541+2176321]
        BaseThreadInitThunk [0x765CFA29+25]
        RtlGetAppContainerNamedObjectPath [0x77337A9E+286]
        RtlGetAppContainerNamedObjectPath [0x77337A6E+238]

[28248:11488:1221/150632.489:ERROR:gpu_init.cc(457)] Passthrough is not supported, GL is disabled, ANGLE is 
[16856:28156:1221/150640.235:ERROR:gpu_init.cc(457)] Passthrough is not supported, GL is disabled, ANGLE is 

質問の仕方が下手ですみませんが、よろしくお願いいたします。

Answer 1

まあ、onclickが書いてある時は、自己解決のようにその属性値を取得して実行してしまうのが確実です。

元の、調査方法としては、
・find_elements_by_css_selectorに変えてリストで取得し、個数が1つであるかを確認
・要素.is_displayed()で表示されているかを確認

Comments

[mi_chan613]

回答ありがとうございます。
お恥ずかしい話ですが、
「find_elements_by_css_selectorに変えてリストで取得」のやり方が分かりません。

前にリストで取得？

---python
#検索結果からURLを取得
class_group = driver.find_elements_by_class_name('showcaseItemsImg')
# 検索結果のリンクを抽出
for elem in class_group:
driver.get(elem.find_element_by_tag_name('a').get_attribute('href'))
print("画面移行")
---

みたいに書いてみたのですが、
「class_name」を「css_selector」に変えたけど、違うみたいで。

今、アドレスに

---python
driver.execute_script("javascript:buyCart(15914134).click()")
---

の数字の部分が入っていたので、
すごく汚い書き方になりますが、

---python
#アドレスからcart_idを取得
cur_url = driver.current_url
target = "cart_id="
idx = cur_url.find(target)
s= cur_url[idx+8:]
target = "&"
idx = s.find(target)
CartID = s[:idx]
driver.execute_script("javascript:buyCart(" + CartID + ").click()")
print("このサプライヤーの商品を注文する")
---
という風に書いてみましたが、
次の画面に進みますが、pythonのターミナルに
「このサプライヤーの商品を注文する」
が表示されないので、うまくいってないのだと思います。

コメントがぐちゃぐちゃ状態で、すみません。
もしよかったら、
「find_elements_by_css_selectorに変えてリストで取得」を
pythonコードで書いていただけませんか？
どうぞ、よろしくお願いいたします。

[otn]

> 「find_elements_by_css_selectorに変えてリストで取得」を
pythonコードで書いていただけませんか？

print(driver.find_elements_by_css_selector('.btnType01.btnColor01.btnEffects'))

[mi_chan613]

回答ありがとうございます。

---python
css_group = driver.find_elements_by_css_selector('.btnType01.btnColor01.btnEffects')
for elem in css_group:
elem.find_element_by_tag_name('a').get_attribute('onclick').click
---
と書いてみました。
エラーが、
---VScode
Exception in Tkinter callback
Traceback (most recent call last):
File "C:\Users\mi_chan\AppData\Local\Programs\Python\Python310\lib\tkinter\__init__.py", line 1921, in __call__
return self.func(*args)
File "c:\Users\mi_chan\Documents\tampopo\PSauto.py", line 100, in btnURL_click
elem.find_element_by_tag_name('a').get_attribute('onclick').click
File "C:\Users\mi_chan\AppData\Local\Programs\Python\Python310\lib\site-packages\selenium\webdriver\remote\webelement.py", line 342, in find_element_by_tag_name
return self.find_element(by=By.TAG_NAME, value=name)
File "C:\Users\mi_chan\AppData\Local\Programs\Python\Python310\lib\site-packages\selenium\webdriver\remote\webelement.py", line 735, in find_element
return self._execute(Command.FIND_CHILD_ELEMENT,
File "C:\Users\mi_chan\AppData\Local\Programs\Python\Python310\lib\site-packages\selenium\webdriver\remote\webelement.py", line 710, in _execute
return self._parent.execute(command, params)
File "C:\Users\mi_chan\AppData\Local\Programs\Python\Python310\lib\site-packages\selenium\webdriver\remote\webdriver.py", line 424, in execute
self.error_handler.check_response(response)
File "C:\Users\mi_chan\AppData\Local\Programs\Python\Python310\lib\site-packages\selenium\webdriver\remote\errorhandler.py", line 247, in check_response
raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":"a"}
(Session info: chrome=96.0.4664.110)
Stacktrace:
Backtrace:
Ordinal0 [0x00976903+2517251]
Ordinal0 [0x0090F8E1+2095329]
Ordinal0 [0x00812848+1058888]
Ordinal0 [0x0083D448+1233992]
Ordinal0 [0x0083D63B+1234491]
Ordinal0 [0x00833AB1+1194673]
Ordinal0 [0x0085650A+1336586]
Ordinal0 [0x00833A36+1194550]
Ordinal0 [0x008565BA+1336762]
Ordinal0 [0x00865BBF+1399743]
Ordinal0 [0x0085639B+1336219]
Ordinal0 [0x008327A7+1189799]
Ordinal0 [0x00833609+1193481]
GetHandleVerifier [0x00B05904+1577972]
GetHandleVerifier [0x00BB0B97+2279047]
GetHandleVerifier [0x00A06D09+534521]
GetHandleVerifier [0x00A05DB9+530601]
Ordinal0 [0x00914FF9+2117625]
Ordinal0 [0x009198A8+2136232]
Ordinal0 [0x009199E2+2136546]
Ordinal0 [0x00923541+2176321]
BaseThreadInitThunk [0x765CFA29+25]
RtlGetAppContainerNamedObjectPath [0x77337A9E+286]
RtlGetAppContainerNamedObjectPath [0x77337A6E+238]

[24588:15836:1223/122058.193:ERROR:gpu_init.cc(457)] Passthrough is not supported, GL is disabled, ANGLE is
[22232:22892:1223/122104.992:ERROR:gpu_init.cc(457)] Passthrough is not supported, GL is disabled, ANGLE is
---
と出ました。
何か分かりますか？
すみませんが、よろしくお願いいたします。

[otn]

何でそんなコード書いたのですか？？？
ちゃんと意味を考えてコード書いてますか？
何故アドバイス通りにしないのですか？？？

[mi_chan613]

何回も回答ありがとうございます。
まだ、pythonを初めたばかりなので、よく分かっていません。すみません。
pythonに
---python
print(driver.find_elements_by_css_selector('.btnType01.btnColor01.btnEffects'))
---
を書いてみました。

---VScodeのターミナル
c:\Users\mi_chan\Documents\tampopo\PSauto.py:89: DeprecationWarning: find_elements_by_* commands are deprecated. Please use find_elements() instead
print(driver.find_elements_by_css_selector('.btnType01.btnColor01.btnEffects'))
[<selenium.webdriver.remote.webelement.WebElement (session="60f47098e8cb20ec6a7bb6b6c007ec24", element="c2eec1a9-a198-4b97-8ee3-57e55f8e5230")>, <selenium.webdriver.remote.webelement.WebElement (session="60f47098e8cb20ec6a7bb6b6c007ec24", element="1fc5a8be-991e-45d5-9fbe-72490f608e15")>, <selenium.webdriver.remote.webelement.WebElement (session="60f47098e8cb20ec6a7bb6b6c007ec24", element="b1904f79-b13e-4a23-bb6b-845045ae2313")>]
---
が表示されました。
printで出力したコードから、ボタンクリックできる要素？が見つかるのですか？
全く意味が分かってなくて、本当に申し訳ありません。

[otn]

アドバイス内容は、
> ・find_elements_by_css_selectorに変えてリストで取得し、個数が1つであるかを確認
です。
見る限り、3つありますね。find_element_by_css_selectorだと3つのうちの１つめを取得してしまうので、「あなたが欲しいのは3つあるうちの１つめで間違いないですか？それを確認しましょう」というのがアドバイスの書き下しになります。
２つめや３つめが欲しいときはリストで取得して、添え字を指定します。

[mi_chan613]

回答ありがとうございます。
driver.find_elements_by_css_selector('.btnType01.btnColor01.btnEffects')
は、複数あるので、

---html
<div class="orderAdvanceBtn btmMgnSet3">
<a href="javascript:void(0);" class="btnType01 btnColor01 btnEffects" onclick="javascript:buyCart(15914134);">このサプライヤーの商品を注文する<i class="fa fa-chevron-right leftMgnSet" aria-hidden="true"></i></a>
</div>
---
一つ上のclassが1つだったので、それでやってみました。

---python
driver.find_element_by_css_selector('.orderAdvanceBtn.btmMgnSet3').click()
---
でやるとうまく行きました。
これでも大丈夫でしょうか？
やっぱり、
driver.find_elements_by_css_selector('.btnType01.btnColor01.btnEffects')
から、探して指定するのがよろしいでしょうか？
何回もすみませんが、よろしくお願いいたします。

[otn]

一意に指定する方法は複数有るので、どのやり方でも良いです。
その中のどれが良いかはケースバイケースです。HTMLの変化に強いかどうかがポイントでしょうか。

[mi_chan613]

超初心者の私と長々と気長に付き合っていただき、ありがとうございました。
やっと解決しました。
また質問することがあると思いますので、その時も
よろしくお願いいたします。

Answer 2

解決してませんでした。
数字の部分が変化するのが取得できません。

解決しました。

driver.execute_script("javascript:buyCart(15914134).click()")

で、できました。
でも、数字の部分が変化するので、どうしても自分でどうにもできないときは、
質問をすると思いますので、よろしくお願いいたします。