selenium 画像アップロードできない

Question

前提・実現したいこと

python初心者です。初めてteratailを利用させていただきます。
質問の仕方など見辛いところございましたらご質問いただけると幸いです。

seleniumを用いてあるサイトへ画像のアップロードを試みています。（https://www.remove.bg/ja/upload）
しかし、うまくアップロードできません

webページへアクセス
アップロードボタンへ画像を送る
→エラーになってしまします

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

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":"div.text-center.pt-3.pt-md-4"}
(Session info: chrome=80.0.3987.122)

該当のソースコード

from selenium import webdriver
from selenium.webdriver.common.keys import Keys

driver = webdriver.Chrome()
driver.get('https://www.remove.bg/')
time.sleep(2)

pic_im_button = driver.find_element_by_css_selector("button.btn.btn-primary.btn-lg")
pic_im_button.send_keys("/Users/name/Desktop/test/画像.png")

試したこと

試したこと
・画像アップロードボタンをクリックし、画像アップロード　
→Fineder画面に移行しそこから操作できない
・画像アップロードボタンにsend_keysで直接画像を送る
→Unable to locate element エラーがでる　inputでないから？

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

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

Answer 1

selenium単独でアップロードするのはかなり難しいサイトだと思われます。
inputタグが無い以上send_keysは使えません。

---

このサイトには、

1. 青いボタンをクリックする
2. D&D
3. URL入力

の3通りの上げ方があるようです。

1の場合は裏でどのようなjsが発火させればいいかが分かれば、
引数に画像を指定してやれば行けそうな気がしますが、
jsが難読化されているので、処理が分からず困難かと思われます。

D&Dはactionchainsを用いれば実装できますが、
ドラッグがブラウザ外なので2も困難です。

3はあらかじめどこかのサイトなどにアップロードしておいて、
URLを張り付けられれば問題なく実装できそうです。

from selenium.webdriver.common.alert import Alert

driver.find_element_by_class_name('btn-primary').click()
Alert(driver).send_keys('画像が上がっているURL')
Alert(driver).accept()

Comments

[kimpy]

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

やはりseleniumのみでは厳しそうですね。。。
ありがとうございます。
クリップボードへの画像コピーができればもっと簡単なのかもしれないですが、なかなか良いほうほうが見つかりません。
３の手法でトライしてみます.
ありがとうございました。

Answer 2

質問者さんの要件について、試してもらいたいことがあります。

記載されているソースコードをみると、

pic_im_button.send_keys("画像.png")

画像ファイル名だけですと、実行しているプログラムが、どこに配置されている画像か探しに行くべき手かがりがないので探せないと思われます。

画像部分を、絶対パスに変更してみるのはいかがでしょうか。

pic_im_button.send_keys("/home/ユーザ名/画像が配置しているフォルダ/画像.png")

↑はあくまでも一例ですので質問者さんの作業環境に置き換えてみてください。

Finederという文言からMacでの環境かと見受けられますので、一例を提示します。(知っていましたら申し訳ありません)

Finederから絶対パスを取得するにはFineder画面から該当の画像を右クリック。
小さいメニュー(コンテキストメニュー)が表示されたら、オプションボタンを押す。

「"ファイル名"をコピー」の部分が「"ファイル名"のパス名をコピー」に変わる。
そこをクリックする。

-> 絶対パスをコピーした状態になるので、"画像.png" の部分に貼り付けてみてください。

サンプルコードが公式のドキュメントにも記載されていますので参照ください。
selenium.webdriver.remote.webelement.WebElement.send_keys

Comments

[kimpy]

ご回答ありがとうございます。
申し訳ございません。表記を簡略化させてまして、本来のコードではパス指定を行なっていますが
できない状況です。
誤解を産むような表記失礼いたしました.
ほかに方法はないでしょうか。。。

[onesword0618]

そうでしたか。

上記のサイトの要素を確認しました。
挙動としては、ファイルパスを表示するinput要素がないように見受けられます。
ドラックアンドドロップで画像を添付することができるようなので、ドラックアンドドロップの領域に画像のパスを送信するのはいかがでしょうか。

該当箇所は以下かと思われます。
<div class="file-dropzone" style="display: none;">
</div>

Finederを通さず、直接ファイルパスを送信するイメージです。

[kimpy]

ご返答ありがとうございます。
div.file-dropzoneへ画像パスを送信してもうまくアップロードできません。。。

以下エラーメッセージが表示されてしまいます
Message: element not interactable

---コード----
from selenium import webdriver
from selenium.webdriver.common.keys import Keys

driver = webdriver.Chrome()
driver.get('https://www.remove.bg/')
time.sleep(2)

pic_im_button = driver.find_element_by_css_selector("div.file-dropzone")
pic_im_button.send_keys("/Users/name/Desktop/test/test.png")

time.sleep(5)
driver.quit()

何度も申し訳ございません。お助けいただけますと嬉しくおもいます;;