これまで
Puppeteer や Selenium で使用できるセレクタを取得する方法の続編である。昨日は、 DevTools を使用した方法を紹介した。
how-to-make-stock-trading-system.dogwood008.com
本日は、Chrome の拡張機能である Headless Recorder を使用した方法を紹介する。
公式の英語マニュアルもあるが、おそらく読まなくてももわかるであろうシンプルなUIになっている。
Headless Recorder のインストール
Google Chromeを前提としているが、Chromium系 であれば他のブラウザでも使用できるかもしれない。Headless Recorderは拡張機能なので、インストールページを開いて2クリックで完了する。
使用方法
Chrome のウィンドウ右上に、ビデオカメラのアイコンが増えているので、それをクリックする1。
インストール直後だと、 "No recorded events yet" になっているが、もし前回の結果が残っていれば、タイトルバーをクリックすると "No recorded 〜" に戻せる。
この状態で、 "Record" ボタンを押すと、記録が始まる。
記録が始まったら、後はセレクタを取得したいページを開き、取得したい要素をクリックしたらOK。記録を終了するので、開始と同様に Headless Recorder のアイコンをクリックし、 "Stop" ボタンを押せば終了する。
そうすると、自動的に今行った操作を Puppeteer や Playwright で実行するためのコードを生成してくれる。下記は Yahoo! Japan を開いて、検索ボックスをクリックしたときの例である（コメント部は著者による）。Puppeteer の例だが、 Playwright 版も初期化を除いて大きく変わらない。注目して欲しいのは、最後のクリック操作を呼び出している部分 ( page.click() ) である。ここに記入されている .\_1f9dgjwXCsoV3gv3CR4ed0 > form > fieldset > .m4wO0W1Qp4Rm8IpDS5ZjR > .\_1wsoZ5fswvzAoNYvIJgrU4 が検索ワード入力用テキストボックスのセレクタである。
// 自動生成されたJavaScripiptのコード（Puppeteer 用） const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch() const page = await browser.newPage() const navigationPromise = page.waitForNavigation() // Yahoo! Japanを開く await page.goto('https://www.yahoo.co.jp/') // ブラウザのウィンドウの幅・高さをセットする await page.setViewport({ width: 1388, height: 798 }) // ここに不必要な操作を行った結果のゴミが混ざっていたので、削除した // ページ読み込み完了を待つ await navigationPromise // テキストボックスのセレクタが描画されるまで待つ await page.waitForSelector('.\_1f9dgjwXCsoV3gv3CR4ed0 > form > fieldset > .m4wO0W1Qp4Rm8IpDS5ZjR > .\_1wsoZ5fswvzAoNYvIJgrU4') // テキストボックスのセレクタをクリックする await page.click('.\_1f9dgjwXCsoV3gv3CR4ed0 > form > fieldset > .m4wO0W1Qp4Rm8IpDS5ZjR > .\_1wsoZ5fswvzAoNYvIJgrU4') // ブラウザを閉じる await browser.close() })()
このように、セレクタのことをよく知らなくても、 Headless Recorder は Puppeteer のコードまで生成してくれるので、非常に便利と言える。もし、セレクタのことを知っていれば、さらに簡潔に記述することができる。
下記の2行は、Yahoo! Japan のページ上2では、同じテキストボックスを指し示す。上は Headless Recorder で自動生成したもの、下は実際に Dev Tools の Elements タブにあるHTMLソースを覗いて書いたものである。前者は階層構造を段階的に下っていくのに対し、後者は「このページ内の他にテキストボックスが無いことに着目し、検索ボックスとして用いられるテキストボックス」をいきなり選択している。機械的な生成で後者のようなセレクタの作り方をするのはやや難度が上がる。人間が得意とする分野なので、読みやすい（＝保守しやすい）ソースコードを書いていくには、こういった観点での修正を行えるのが望ましい。
// 「class属性が _1f9dgjwXCsoV3gv3CR4ed0 である要素の子要素である form の子要素である fieldset の子要素であるclass 属性がm4wO0W1Qp4Rm8IpDS5ZjR である要素の子要素である class 属性が _1wsoZ5fswvzAoNYvIJgrU4 である要素」をクリックする await page.click('.\_1f9dgjwXCsoV3gv3CR4ed0 > form > fieldset > .m4wO0W1Qp4Rm8IpDS5ZjR > .\_1wsoZ5fswvzAoNYvIJgrU4') // 「type属性が search である input 要素」をクリックする await page.click('input[type=search]')
ここまで2つの手法を紹介してきた。次は「取得したセレクタが正しいかを検証する方法」について紹介する。
-
mac でダークモードを有効にしていると、著者のように非常に見落としやすいデザインになってしまっているので注意。↩
