Seleniumを用いたダウンロードの方法

Question

前提

Pythonを用いてサイトから画像のダウンロードを行いたいと考えています。

実現したいこと

具体的には
https://www.photo-ac.com/main/detail/24553230
の右のダウンロードボタンをSeleniumを用いてクリックしたいと思っています。

CSSセレクタを用い、ボタンを検索していますが対象が無いと返ってきます。
ページの検証画面では確認できています。

該当のソースコード

driver.find_element_by_css_selector("div#timer > p:nth-of-type(2) > button").click()

試したこと

Seleniumで取得したページソースをBeautifulSoupで解析してみましたが、対象のボタンタグが無いことだけが確認でき、なぜ無いのか、代わりに何を指定すればよいのかはわかりませんでした。

Comments

[meg_]

> ページの検証画面では確認できています。
どう表示されていますか？

[jaa]

<div id="timer">

<div class="row no-gutters">
<div class="col-4 mb-3">
<div class="ac-p-2 text-center h-100 d-flex align-item-center justify-content-center flex-column ac-heading-6 border-right">
<div class="text-center text-uppercase ac-mb-1 d-flex align-items-end justify-content-center">
<p>s</p>

</div>
<p class="text-center"><small>JPEG 0.21M</small></p> <p class="text-center"><small>640x480px</small></p> </div>
</div>
<div class="col-4 mb-3">
<div class="ac-p-2 text-center h-100 d-flex align-item-center justify-content-center flex-column ac-heading-6 border-right">
<div class="text-center text-uppercase ac-mb-1 d-flex align-items-end justify-content-center">
<p>m</p>

</div>
<p class="text-center"><small>JPEG 1.54M</small></p> <p class="text-center"><small>1920x1440px</small></p> </div>
</div>
<div class="col-4 mb-3">
<div class="ac-p-2 text-center h-100 d-flex align-item-center justify-content-center flex-column ac-heading-6 ">
<div class="text-center text-uppercase ac-mb-1 d-flex align-items-end justify-content-center">
<p>l</p>

</div>
<p class="text-center"><small>JPEG 1.26M</small></p> <p class="text-center"><small>2304x1728px</small></p> </div>
</div>
</div>
<p class="text-center ac-mb-2 ac-heading-6">動画広告を視聴して無料でダウンロード</p>
<p class="text-center ac-mb-2"><button type="button" class="ac-btn-md ac-btn-photo w-100 max-width-250 justify-content-center js-timerModal"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20" class="ac-mr-2" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><g fill="currentColor"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"></path><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"></path></g></svg>ダウンロード</button></p>
<p class="text-center ac-mb-1 text-muted font-size-12">※視聴後、広告を閉じると素材ページに移動します。</p>
<p class="text-center ac-mb-4 font-size-12"><a href="https://premium.photo-ac.com/premium/campaign?target=premium_sozai" target="_blank" class="ac-text-blue">待たずにダウンロードする方法は？</a></p>
</div>

[jaa]

以上のような形で表示されています。

[jaa]

エラーは以下のように出ます。
NoSuchElementException: Message: no such element: Unable to locate element:
宜しくお願い致します。

[meg_]

対象のページに<div id="timer">はありますか？

[jaa]

質問文のリンク先に飛ぶと、<div id="timer">はありませんが、同サイトにログインすると上に記載したように、<div id="timer">が出てきました。
わかりづらくてすみませんが、ご協力よろしくお願いします。

[meg_]

ログイン後の話なのですね。すみませんが会員登録していないサイトのため、他の回答者の回答をお待ちください。

Answer 1

「確かにある」なら、iframeの中に入ってるのでは？
その場合はdriver.switch_to.frame(iframe要素)しないとヒットしません。
フレームの中は別のHTMLなので。

Comments

[jaa]

ご回答ありがとうございます。
iframeも疑い、要素を遡ってみてみましたi、私がちゃんと探せてないだけかもしれませんが、frameに囲まれている様子もありませんでした。

Answer 2

URLのソースを拝見しましたがおそらく、ご希望のものは 3897 行目あたりのこちら↓ボタンですね。
URL : https://www.photo-ac.com/main/detail/24553230

        <a href="javascript:void(0);" class="text-decoration-none ac-btn-md ac-btn-photo w-100 justify-content-center custom-shadow historyDowloads" data-theme-toggle="popover" data-trigger="click" data-placement="top" data-popover-content="#dl-nologin-popover">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20" class="ac-mr-2" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><g fill="currentColor"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"></path><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"></path></g></svg>ダウンロード
        </a>

クラス名指定だと、以下のようにしてやれば実現できるかと思います。

class_name = 'text-decoration-none ac-btn-md ac-btn-photo w-100 justify-content-center custom-shadow historyDowloads'
driver.find_element_by_class_name(class_name).click()

Comments

[jaa]

ご回答ありがとうございます。
教えていただいた方法で要素取得しようとしましたが、やはりエラーが出てしまいました。

raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":".text-decoration-none ac-btn-md ac-btn-photo w-100 justify-content-center custom-shadow historyDowloads"}

[guigui55]

そうでしたか、、
では、以下のように、タブキーで該当のボタンまで移動してクリックするというのはいかがでしょう？
※ソースが読みにくくてすみません。

この方法の難点としては、スクリプト実行中にマウス、キーボード操作ができなくなってしまいます。
（操作をするとカーソルがずれてしまうことがあるため）
少し強引なので他の方法で要素を取得したいのであれば、引き続きほかの回答者の方のご意見をお聞きしてみてください。
##### souce #####
from selenium.webdriver.common.keys import Keys
import time
count = 100
for i in range(count):
time.sleep(0.25)
element = driver.switch_to.active_element
value = element.get_attribute('class')
if value == 'text-decoration-none ac-btn-md ac-btn-photo w-100 justify-content-center custom-shadow historyDowloads':
element.click()
element.send_keys(Keys.TAB)

[jaa]

何度もご丁寧にありがとうございます。
いただいたソースを実行してみましたがうまくいかず、サイト上で実際にTABキーを押し続けましたが、そもそもダウンロードタブに選択が移っていきませんでした。
ですが、いただいた案のように実際に画面上でクリックする方向でも考えていきたいと思います。
ありがとうございました。