ruby×selenium(headless chrome)でreact製のwebページをスクレイピングしようとするとほとんどjavascript(スクリプトタグ)が返ってくる為、DOMの取得ができません。
reactやvueの様なライブラリは基本的に仮想DOMを生成する形をとると思うので基本的にブラウザのurl欄にview-source:https://○○
の様にして表示すると、生のDOM(HTMLのインスタンス)以外の箇所は全てscriptタグで返ってくると思います。
この前提で、現在reactページをheroku上でselenium(ruby×headless chrome)でスクレイピングを行うとjsタグばかり返ってきてほとんどDOMが取得できない状態です。
該当ページにアクセス(get)してからsleepやwait.untilを挟んでみましたが、5分ほど待っても該当するDOMを取得できずという形になってしまいます。(headlessではなく該当のwebページを開発者ツールで見ると取得したいDOMが生成されてはいます)
def scrape Selenium::WebDriver::Chrome.path = ENV.fetch('GOOGLE_CHROME_BIN', nil) @driver = Selenium::WebDriver.for :chrome, options: headless_chrome_options @driver.get('https://www.hogehoge') wait = Selenium::WebDriver::Wait.new(:timeout => 300) wait.until {driver.find_element(:name, 'username').displayed?} Rails.logger.debug("ソースは #{@driver.page_source.encode('utf-8')} です") @driver.find_element(:name, 'username').send_keys(username) @driver.find_element(:name, 'password').send_keys(password) sleep 1 @driver.find_element(:name, 'password').send_keys(:return) end def headless_chrome_options options = Selenium::WebDriver::Chrome::Options.new( prefs: { 'profile.default_content_setting_values.notifications': 2 }, binary: ENV.fetch('GOOGLE_CHROME_SHIM', nil) ) options.add_argument('--user-agent=Mozilla/5.0 (iPhone; U; CPU iPhone OS 12_1_2 like Mac OS X; ja-jp) AppleWebKit/605.1.15 (KHTML,like Gecko) Version/12.0 Mobile/15E148Safari/604.1') options.add_argument('--headless') options.add_argument('--disable-gpu') options.add_argument('--window-size=1680,1050') return options end
wait untilを置くとそもそもloggerまで到達はしないのですが、wait untilの代わりにsleepを置いてもjsタグが返ってきてしまいます。
時間をおけばDOMが生成されると思っていたのですがいつまで経っても生成されずという形になります。
こういう事象が起きている場合何が原因と考えられますでしょうか、
また解決の糸口をご教示いただけると幸いです。
よろしくお願いします。

あなたの回答
tips
プレビュー