第3回 TypeScript×Puppeteerで始めるスクレイピング – 画面遷移

キジです｡前回は株の配当率の表を取得するプログラムを紹介しました｡

第2回 TypeScript×Puppeteerで始めるスクレイピング – データ取得

@kijiです｡TyepScript×Puppeteerで始めるスクレイピングの2回目です！前回の記事は以下になります｡まだやっていない方はこちらで環境構築を行いましょう｡ 今回は､とあるサイトに接続した後､DOMの情報を読み取り､ログに出

www.libetech.info

今回は､順序が逆になりましたがページの表示､画面遷移についてまとめたいと思います｡ソースコードは､前回のものを使います｡各銘柄の詳細ページへ行き､以下のパラメータを取得したいと思います｡

概要

Puppeteerを使った画面遷移ですが､よく使うのが3種類あります｡

• gotoメソッド 指定したURLのページを開く
• goBackメソッド 1つ前のページへ戻る
• clickメソッド 要素をクリックして指定されているページへ遷移する

goto､goBackメソッドはPageクラス､clickメソッドはElementHandleクラスにあります｡

画面遷移をすると､DOMの読み込みが発生します｡しかし､読み込みが完了する前に次の処理が動いてしまうことがあります｡まだ読み込めていないページの要素を取得しようとして､エラーになることもあります｡

そのため､画面遷移時には読み込みを待つためのメソッドがいくつか用意されています｡今回は､waitForNavigationメソッドを使います｡

await Promise.all([
    page.waitForNavigation({ 'waitUntil' : 'networkidle0', 'timeout' : 30000 }),
    page.goto(target_url)
]);

待つためのメソッドはいくつかあります｡

• waitFor
• waitForNavigation
• waitForFunction
• waitForFileChooser
• waitForSelector
• etc…

ソースコード

GitHubに投稿しているため､そちらからご確認ください｡

blog-puppeteer-and-typescript/batch at main · kiji-tech/blog-puppeteer-and-typescript

Contribute to kiji-tech/blog-puppeteer-and-typescript development by creating an account on GitHub.

github.com

実行結果

まとめ

• puppeteerの画面遷移について解説しました
• 画面遷移の方法は､goto､goBack､clickを使う
• 画面遷移には時間がかかるため､waitForNavigationなどの待ちメソッドを使う

参考