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

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

新規登録して質問してみよう
ただいま回答率
85.50%
スクレイピング

スクレイピングとは、公開されているWebサイトからページ内の情報を抽出する技術です。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

selenium

Selenium(セレニウム)は、ブラウザをプログラムで作動させるフレームワークです。この原理を使うことにより、ブラウザのユーザーテストなどを自動化にすることができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

1797閲覧

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

widget11

総合スコア221

スクレイピング

スクレイピングとは、公開されているWebサイトからページ内の情報を抽出する技術です。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

selenium

Selenium(セレニウム)は、ブラウザをプログラムで作動させるフレームワークです。この原理を使うことにより、ブラウザのユーザーテストなどを自動化にすることができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/03/17 06:27

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

otn

2021/03/17 09:49

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問