質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.05%

selenium(headless chrome)でreactで作られた動的webページのDOMを取得できない

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 138

score 202

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が生成されると思っていたのですがいつまで経っても生成されずという形になります。
こういう事象が起きている場合何が原因と考えられますでしょうか、
また解決の糸口をご教示いただけると幸いです。
よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • otn

    2021/03/17 18:49

    単に、「ヘッドレスかどうかでJavaScriptの動作が変わる」と言うだけじゃ無いでしょうか。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.05%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る