Puppeteerで特定要素が出てくるまで待機して値を取得する

業務用アプリにPuppeteerを組み込んで結構な数のウェブ操作自動化を実現していますが、「TeamSpiritの勤務表を開き、月次サマリーの中にあるフレックス清算時間を取得したい」という要望が出てきたので、これを今回はPuppeteerで取得してみたいと思います。

このデータの取得は意外と面倒な要素を含んでいました。

今回使用するライブラリ

今回のダウンロード上の問題点

今回のデータの取得先であるTeamSpiritの「月次サマリー」ですが、以下のような問題点を含んでいて、一筋縄では取得が出来ません。これらの問題点は前回特定要素の値が変わるまでウェイトの応用と、ポップアップウィンドウの操作が必要になります。

  1. 勤務表の月選択用セレクトボックスは、ページ表示後にJSにて構築されている為、ワンテンポ遅れてから表示される
  2. そのため、navigationPromiseでは対処できず、要素が表示されていないのに対象月の値をセットしようとして、Node is either not visible or not an HTMLElementのエラーが出てしまう
  3. また、月次サマリーはリンクではなく、これもポップアップウィンドウを表示するJSが入ってるボタンであるため、ポップアップウィンドウの操作が必要
  4. ポップアップウィンドウ側もデータが遅れて表示されるため、値を取得するためには、2.同様の問題が待っている

図:この部分の値が欲しい

コードと解説

ソースコード

解説

  • 冒頭のログイン処理等はこれまでのPuppeteerでも装備してきた流れなので特にここで躓くことはないと思います。
  • 問題の勤務表の月選択用セレクトボックスはすぐに出てこないので、この要素が出てくるのをチェックするcheckElementという関数を別途用意します。
  • セレクトボックスのセレクタと、操作するページの2つを格納する変数を用意し、checkElementは引数にインターバル(ウェイト時間)と、リトライ回数(Times)を用意
  • まずは#yearMonthListの要素が出てくるまで、3秒間、10回のcheckElementを実行
  • 出てきたのを確認したら、セレクトボックスに対して値をpage.selectで送り込む
  • 次に、月次サマリーをクリック。ポップアップウィンドウをpopwinに取得させる
  • 対象のポップアップウィンドウ下部の特定の値のセレクタおよび、popwinをセレクタとページの変数に格納し、再度checkElementでウェイトを実行
  • popwinの中の要素をinnerHTMLで取得して返す
  • 最後にブラウザを終了させる

これで無事に対象の月の勤務表の月次サマリーの中にある特定要素の値を取得する事が出来ました。他の要素もまとめて取得もできるので、ポップアップウィンドウ内のデータを塊にして吐き出すようなコードを追加すると、二次利用がしやすくなるのではないかと思います。

照すべきエントリー

Puppeteerで特定要素の値が変わるまでウェイトを掛ける

Puppeteerでポップアップウィンドウを操作する

関連リンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)