Pythonでドロップダウンを選択したい(BUYMA,javascript)

Question

前提・実現したいこと

BUYMAというECサイトのWeb操作を自動化するツールを作成したい。

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

Python/seleniumにて新規出品画面のカテゴリ(ドロップダウン)を選択できなくて困っています。
マウスの位置やドロップダウンの選択肢により、動的にhtmlが変わってしまう場合
Pythonでどのように要素を取得し、ドロップダウンを選択すればよいのでしょうか。

該当のソースコード

対象画面のソース(ドロップダウン選択なし)

html
<div class="bmm-l-col bmm-l-col-4 sell-category__item">
<div class="Select bmm-c-custom-select sell-category-select Select--single">
<div class="Select-control"><span class="Select-multi-value-wrapper" id="react-select-2--value">
<div class="Select-placeholder">選択してください</div>
<div aria-expanded="false" aria-owns="" aria-activedescendant="react-select-2--value" aria-disabled="false" class="Select-input" role="combobox" tabindex="0" style="border: 0px; width: 1px; display: inline-block;"></div></span>
<span class="Select-arrow-zone"><span class="Select-arrow"></span></span></div></div></div>

対象画面のソース(ドロップダウン選択あり)
試しに手動でドロップダウンを選択すると、htmlが以下のように変化します。

html
<div class="bmm-l-col bmm-l-col-4 sell-category__item">
<div class="Select bmm-c-custom-select sell-category-select has-value Select--single">
<div class="Select-control"><span class="Select-multi-value-wrapper" id="react-select-2--value">
<div class="Select-value">
<span class="Select-value-label" role="option" aria-selected="true" id="react-select-2--value-item">レディースファッション</span></div>
<div aria-expanded="false" aria-owns="" aria-activedescendant="react-select-2--value" aria-disabled="false" 
class="Select-input" role="combobox" tabindex="0" style="border: 0px; width: 1px; display: inline-block;"></div></span>
<span class="Select-arrow-zone"><span class="Select-arrow"></span></span></div></div></div>

<div aria-expanded="false" aria-owns="" aria-activedescendant="react-select-2--value" aria-disabled="false" class="Select-input" role="combobox" tabindex="0" style="border: 0px; width: 1px; display: inline-block;"></div>

試したこと

・driver.find_elements_by_～～　(class_name/id/name/css/xpath）
・time.sleep()
・driver.find_element_by_xpath("//*[@id='gh-shipto-click']/div/button/span").click()

等色々とググってみて、出てきたものは大方試しましたがダメでした。
phantomjs　や　javascript(動的なwebページ)といったキーワードも出てきましたが、
知見がなくどのように進めればいいか手詰まりになってしまいましたので、質問させていただきました。

具体的にどのように対応すればよいか、ご教示いただけますと幸いです。
（提示する情報が不足しておりましたらお知らせください。）

よろしくお願いいたします。

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

Python3
selenium

Answer 1

あまり参考にならないかも知れませんが、コードを貼っておきます。
これは、カテゴリではなく、モデルの部分です。

    def input_model( self, data_model ):
        if not data_model in "------NO MODEL------":
            #input( "model ok?")
            model = self.driver.find_element_by_xpath( '/html/body/div[3]/div[3]/div[1]/div/div[1]/div/div/div/div[2]/form/div[3]/div[3]/div/div[2]/div/div/div/div/div/div/div/span[1]/div[1]' )
            model.click()
            sleep( 1 )
            selector = self.driver.find_elements_by_xpath( '/html/body/div[3]/div[3]/div[1]/div/div[1]/div/div/div/div[2]/form/div[3]/div[3]/div/div[2]/div/div/div/div/div/div/div[2]' )
            list_ = selector[0].find_elements_by_class_name( "Select-option" )
            for item in list_:
                if( item.get_attribute( "aria-label" ) == data_model ):
                    item.click()
                    break
        else:
            print( "no model" )

これは最初の方に作ったので、先程の手順と少し違いますが、同じような感じです。

カテゴリは一番上にあるので大丈夫なのですが、
xpathで指定する場合、サイト全体のプルダウンを入力する順番が大事なので、気を付けて。

Comments

[t-_.]

二つ投稿しちゃったｗ
てへぺろ

[UUUU]

ご丁寧に、ソースコードのサンプルまで共有いただきありがとうございます。

引数のselfとは何でしょうか？
data_modelは選択したい値でしょうか？

[t-_.]

>引数のselfとは何でしょうか？
pythonのclassで出てくる引数です。
消してもらって大丈夫です。

>data_modelは選択したい値でしょうか？
そうです。モデルなんで、"MONOGRAM"とかが入ってます。

[UUUU]

いただいたソースコードからselfを削除し、実行したところ以下のエラーが出てしまいます。。
【エラー】
model.click()で発生
ElementClickInterceptedException: Message: element click intercepted:

【ソースコード】　※引数は「EQT」を指定
def inputmodel(data_model ):
#input( "model ok?")
model = driver.find_element_by_xpath( '/html/body/div[3]/div[3]/div[1]/div/div[1]/div/div/div/div[2]/form/div[3]/div[3]/div/div[2]/div/div/div/div/div/div/div/span[1]/div[1]' )
print(model)
model.click()
time.sleep( 1 )
selector = driver.find_elements_by_xpath( '/html/body/div[3]/div[3]/div[1]/div/div[1]/div/div/div/div[2]/form/div[3]/div[3]/div/div[2]/div/div/div/div/div/div/div[2]' )
list_ = selector[0].find_elements_by_class_name( "Select-option" )
for item in list_:
if( item.get_attribute( "aria-label" ) == data_model ):
item.click()
break
time.sleep( 10 )

[UUUU]

できました！

clickした後、pyautoguiでテキストを直接入力する形にしました。

色々とご教示いただきありがとうございました。
大変助かりました。

[t-_.]

やり方は一つじゃないですからね。
出来て良かったです。
タグとかめっっちゃ多いと面倒ですよねｗ
全て自動で出来るようがんばってください！

Answer 2

私も同じ所で詰まってました。

これが最善かはわかりませんが参考までに。

---

プルダウンを括っているdiv要素をxpathで指定します。
それから、プルダウンを.click()で中身を展開します。

プルダウン項目に[Select-option]というclass属性があります。
find_elements_by_class...?で複数取得にして取得します。
それをforで回して、get_attributeで[aria-label]を取得します。
[aria-label]には、「レディース...」や「メンズ...」が入ってるので、
それと一致したのもを、.click()で選択しました。

---

私はこの方法で出品すべてを自動化することができました。
（応用は必要ですが。。）
ブラウザの開発者ツールを使って、ブレイクポイントとかを使いながらやると、
めちゃくちゃ捗りますよ＾＾

頑張って見てください。

##追記

def input_catagory():
        first = driver.find_element_by_xpath( "/html/body/div[3]/div[3]/div[1]/div/div[1]/div/div/div/div[2]/form/div[3]/div[1]/div/div[2]/div/div/div/div/div/div/div/span[1]/div[1]" )
        first.click()
        #↑↑プルダウンのクリック
        sleep( 1 )#表示されるまでの時間稼ぎ
        selecter = driver.find_element_by_xpath( "/html/body/div[3]/div[3]/div[1]/div/div[1]/div/div/div/div[2]/form/div[3]/div[1]/div/div[2]/div/div/div/div/div/div/div[2]" )
        #↑↑２での取得部分（画像参照
        list_ = selecter.find_elements_by_class_name( "Select-option" )
        #↑↑３での複数取得部分（画像参照
        for item in list_:
            if( item.get_attribute( "aria-label" ) == "レディースファッション" ):
                item.click()
                break
                #↑↑レディースファッションとかと比べて同じならクリックしてbreak
        sleep( 1 )次に行くまでの時間稼ぎ

Comments

[UUUU]

こちらもコメントありがとうございます。試してみます。

[UUUU]

カテゴリの方ですが、やはりできません・・

プルダウンを.click()まではいったのですが、
プルダウン項目に[Select-option]というclass属性が見つけられません。

※aria-activedescendantは取得できましたが、react-select-2--option-1等の値が入っておりました。

お手数をおかけしますが、どのようにすればよいかご教示いただけますでしょうか。

[t-_.]

teratail画像貼れないんだね。。。
https://f.easyuploader.app/20210805181134_644d3471.png
https://f.easyuploader.app/20210805181148_4a416a74.png
https://f.easyuploader.app/20210805181140_59393041.png
https://f.easyuploader.app/20210805181150_46303134.png

[t-_.]

コードを追記したので、確認してみてください。
私が教えられるのはこのくらいです。。。

[t-_.]

buymeのサイトは、react-select-2--option-1とかの値が変化するので、xpathで大枠を指定してからがお勧めです。
buymeでxpathで指定する場合、入力する順番を注意してください。
しょっちゅうHTMLが変化するのでｗ

[t-_.]

ほかのプルダウンもこれの応用でやりました。
もっと他にいい方法が分かったら教えてくださいorz

[UUUU]

ご丁寧にスクリーンショットでご説明いただきありがとうございます。

Select-menu-outerが隠れていいたのですね・・

無事カテゴリの３つのドロップダウンを選択することができました。

色々とご教示いただき、本当にありがとうございました。