puppeteerを用いた要素の取得（page.$()）

nokogiriの場合はとりあえず取ってくるため、取ること自体に難しさは無いが、puppeteerの場合はメインはサイト上の処理を自動化するのが目的であるため、データを取り出す場合は取り出す処理を書く必要がある。

とりあえずこんな感じでやればできる

const selector = 'ul > li > a';
const elementHandle = await page.$(selector);
const value = await (await elementHandle.getProperty('textContent')).jsonValue();

page.$(selector) とは

puppeteerのgithub（pageselectorの説明部分）
https://github.com/GoogleChrome/puppeteer/blob/v2.0.0/docs/api.md#pageselector

elementHandle.$(selector)
- selector <string> A selector to query element for
- returns: <Promise<?ElementHandle>>

こんな感じで、returnはPromiseのElementHandleとなっている。

補足説明

ElementHandle

ElementHandle represents an in-page DOM element. ElementHandles can be created with the page.$ method.

ページ内の要素をDOMで形成する。page.$を使って作ることができる。

DOM

JavaScript初心者でもすぐわかる！DOMとは何か？

DOMとは「Document Object Model」の略だ。直訳すると、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組みだ。

階層構造になっているモデルのこと。

つまりElementHandleとは、ページ内の要素をDOMとして形成するもの。

getProperty('textContent')

puppeteerのgithub（getPropertyの説明部分）
https://github.com/GoogleChrome/puppeteer/blob/v2.0.0/docs/api.md#elementhandlegetpropertypropertyname

これは、形成したElementHandleの中から、必要なものを取り出すための処理のこと。
色々オブジェクトはあるけれど、サイト内の文字列を取り出したい場合は、textContent を指定すれば良い。

結論

page.$でサイト内の要素をDOMとして取得して、getPropertyでDOMの中のプロパティ名（サイトの文字列の場合はtextContent）を指定してあげれば、サイト内の任意の文字を取り出すことができる。

参考

puppeteerのgithub
https://github.com/puppeteer/puppeteer/blob/v2.0.0/docs/api.md

JavaScript初心者でもすぐわかる！DOMとは何か？