【Python 3.8.0】 cssselectで要素が取得できない 原因：JavaScript

Question

前提・実現したいこと

Pythonを用いてヤフオク！の送料を取得したいと思っています。
つい最近プログラミングを学び始めたため、言葉の節々におかしい点があるかもしれませんがご容赦ください。

#【HTML】

<dd class="BidModal__postageDetail" id="method0"> <div class="BidModal__postageDetail" style="background-color: white;">

"2,980円"
<span class="BidModal__postageTax">（税込み）</span>

</div>

こちらは対象ページの送料を含むHTMLの一部になります。
ページURL:
[https://page.auctions.yahoo.co.jp/jp/auction/u290078820]

CSSセレクタを用いて、送料をスクレイピングしようと思ったのですが、それがかないません。

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

【実行結果】
IndexError: list index out of range

該当のソースコード

import requests
import lxml.html

URL = "https://page.auctions.yahoo.co.jp/jp/auction/u290078820"
response = requests.get(URL)
HTML = lxml.html.fromstring(response.text)
SOURYOU = HTML.cssselect('#method0 > div')[0].text.strip()
print(SOURYOU)

試したこと

同ページ内の即決価格"4,350円"もほぼ同じ構造でデータが収納されていたので、試しに、下記のコードを実行したところ"4,350円"は取得することができました。

【即決価格を含むHTML】

<dl class="Price__body Price__body--none"> <dt class="Price__title">即決価格

<\dt>

<dd class="Price__value">

"
4,350円"
<span class="Price__tax">（税 0 円）<\span>
<\dd>

import requests
import lxml.html

URL = "https://page.auctions.yahoo.co.jp/jp/auction/u290078820"
response = requests.get(URL)
HTML = lxml.html.fromstring(response.text)

KAKAKU = HTML.cssselect('#l-sub > div.ProductInformation > ul > li.ProductInformation__item.js-stickyNavigation-start > div > dl > dd.Price__value')[0].text.strip()

print(KAKAKU)

送料と即決価格で構造がほとんど同じのため、なぜ即決価格の"4,350円"が取得でき、送料の"2,980円"だけが取得できないのかがどうしてもわかりませんでした。

お力添えよろしくお願い致します。

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

Python 3.8.0

Microsoft Windows 10
バージョン 1903

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

Answer 1

ページ上で「詳細」という箇所をクリックする→送料が表示される
というJavascriptの仕組みがあるせいで取得が行えないようです。

Seleniumというライブラリを使って、Google ChromeをPythonで動かしてJavascriptを実行させた後に、出現したHTMLを取得すればよいようですね。

参考ブログ：
Python Webスクレイピング テクニック集「取得できない値は無い」JavaScript対応
[https://qiita.com/Azunyan1111/items/b161b998790b1db2ff7a]

Answer 2

div要素のテキストですから

import lxml.html
HTML = lxml.html.fromstring("""<dd class="BidModal__postageDetail" id="method0">

<div class="BidModal__postageDetail" style="background-color: white;">

"1,280円"
<span class="BidModal__postageTax">（税込み）</span>
</div></dd>
""")
y = HTML.cssselect('#method0 > div')[0].text.strip()

でいいのでは。

>>> import lxml.html
>>> HTML = lxml.html.fromstring("""<dd class="BidModal__postageDetail" id="method0">
...
... <div class="BidModal__postageDetail" style="background-color: white;">
...
... "1,280円"
... <span class="BidModal__postageTax">（税込み）</span>
... </div></dd>
... """)
>>> y = HTML.cssselect('#method0 > div')[0].text.strip()
>>> print(y)
"1,280円"
>>> print(y[1:-1])
1,280円

Comments

[y-oming]

ご回答ありがとうございます。
作成していただいたコードで再度ヤフオク！のページから取得してみましたが結果は空白のリスト[]が帰ってくるだけでした。

私が質問ページに入力したHTMLだと"1,280円"がdiv要素のテキストになっていること、
そして、取得ができることを確認したのですが、同様のコードで実際のヤフオク！ページから取得すると空のリストが返却されます。

もしや自分がHTMLを読み間違えて質問をしてしまったのかと三度実際のページを確認してきたのですが、どうしても違いや原因がわかりませんでした。

・[https://page.auctions.yahoo.co.jp/jp/auction/u290078820]
こちらが問題のページになります。

検証画面でBidModal__postagePriceをXpathの検索にかけると問題の"1280円"を持つdiv要素を見つけることができると思います。

・同ページ内の現在価格の"1円"もほぼ同じ構造でデータが収納されていたので、試しに

KAKAKU = html.cssselect('#l-sub > div.ProductInformation > ul > li.ProductInformation__item.js-stickyNavigation-start > div > dl > dd.Price__value')[0].text.strip()

print(KAKAKU)

このコードを実行したところ"1円"は取得することができました。
送料と現在価格で構造が同じに見えるので、なにが原因で送料の"1,280円"だけ取得できないのかがわかりません。

またご助言いただけますと幸いです。
よろしくお願いいたします

[quickquip]

これは質問に追記するべきですね

[quickquip]

冒頭の #l-sub がないから一切ヒットしないですね。
html.cssselect('.decTxtAucPrice.Price__value')[0].text
でいいんじゃ、と思いました。

[y-oming]

申し訳ありません。
当初、提示させていただいていたペ－ジはオークションの期間が終了し、ページ全体のHTMLが変わってしまったため、現在価格が取得できない状態です。
オークションの終了していない新しいページの
https://page.auctions.yahoo.co.jp/jp/auction/u290078820
で取得を行うと"4,350円"がヒットします。

ですが相変わらず送料は同様の手法で取得が行えません。

[quickquip]

JavaScriptで差し挟まれている部分なので、htmlをparseしてもその部分にはコンテンツがないのですね。

[y-oming]

ご返信ありがとうございます。
JavaScriptはあまり詳しくないのですが、
ページ上で「詳細」という箇所をクリックする→送料が表示される
という仕組みがあるせいで取得が行えないのでしょうか。

この場合送料を取得するにはjavascriptをparseできるオブジェクトをほかに用意しなくてはならないのでしょうか。
よろしくお願いします。

[y-oming]

自分で調べてみました。
Seleniumというライブラリを使って、Google ChromeをPythonで動かしてJavascriptを実行させた後に、出現したHTMLを取得すればよいようですね。

参考ブログ：
Python Webスクレイピング テクニック集「取得できない値は無い」JavaScript対応
[https://qiita.com/Azunyan1111/items/b161b998790b1db2ff7a]

また知らないものが出て道のりが遠ざかりましたが、これで頑張ってみたいと思います。
ここまでヒントと助言をいただきありがとうございました。

Answer 3

サンプル

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from bs4 import BeautifulSoup

options = webdriver.ChromeOptions()
options.add_argument('--headless')
options.add_argument('--no-sandbox')
options.add_argument('--disable-dev-shm-usage')

driver = webdriver.Chrome('chromedriver', options=options)
driver.implicitly_wait(10)

driver.get('https://page.auctions.yahoo.co.jp/jp/auction/g387158539')

# クリック
driver.find_element_by_class_name('Price__postageLink.js-modal-show.rapidnofollow').click()

# 送料確認
print(driver.find_element_by_class_name('BidModal__postagePrice').text)

# 送料のみ取り出し
html = driver.page_source.encode('utf-8')

soup = BeautifulSoup(html, 'html.parser')

souryou = soup.select_one("div.BidModal__postagePrice").contents[0]

print(souryou)

driver.quit()

seleniumで子要素を取得するのは大変そうなのでbeautifulsoupのでいいかもしれません。

How to get text of an element in Selenium WebDriver, without including child element text?
https://stackoverflow.com/questions/12325454/how-to-get-text-of-an-element-in-selenium-webdriver-without-including-child-ele