PhpStormと僕

日々周りを巻き込むことをモットーに。気まぐれでJetBrains製のIDEネタとか書いてます。

Puppeteerで page.$(selector) で絞り込んだ要素から更に子要素指定を行う

最近がっつりとPuppeteerを触っている。 Puppeteer(書きづらい)とは、Headless ChromeをNode.jsから扱うためのライブラリ。

開発が速いのでググって出てくる情報は陳腐化していることがままあるので基本的には公式ドキュメントを読んでもらうのが大前提として、v1.1.1を触っている時点で得られた知見や小ネタちょこちょこと共有したい。

page.$(selector) で絞り込んだ要素から更にselector指定を行う

<div class="row">
  <div class="col">
    <div class="itemDetail">りんご</div>
  </div>
  <p class="price">120円</p>
</div>
<div class="row">
  <div class="col">
    <div class="itemDetail">みかん/袋</div>
  </div>
  <p class="price">520円</p>
</div>

もともと page.$ page.$$ で絞り込んだ子要素 ElementHandle は .$ .$$ メソッドを持っていなかったので、page.$$evalで指定してループ内で取り出す・・・みたいな必要があったが、 v0.13.0 からは以下のように、取得したSelectorのオブジェクト(ElementHandle)から更に絞り込むような書き方ができるので前よりだいぶ直感的に書けるようになった。

const rows = await page.$$('.row')
for (const row of rows) {
  const itemDiv = await row.$('div.col > div.itemDetail')
  console.log(await (await itemDiv.getProperty('textContent')).jsonValue())
  const priceDiv = await row.$('p.price')
  console.log(await (await priceDiv.getProperty('textContent')).jsonValue())
}