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

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

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

puppeteerの知見ですが、開発の流れが速いのでブログだったりの記事は古くなってるので公式のhttps://t.co/0agihTy0aCを読むのがベストっぽい。 ElementHandleからselector指定でもv0.13.0から取れるようになってる。

— べくさす (@Vexus2) 2018年2月23日

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())
}