介紹

這篇來介紹幾個 Page API ，一般在寫爬蟲的時候或是E2E的時候，可能都會用到Cheerio 類 jquery的東西來取得節點近一步再去看要做什麼動作，取值或是觸發連結或存檔圖片等等，在 Puppeteer Page API中會看到$ 與 $$這兩個符號就是在做seleor這個動作，如果要監聽某個事件也可以用on ，once等等以下來介紹

page.$(selector) document.querySelector 就是單選一個 dom節點，如果沒有資料就會返回 null

page.$$(selector) document.querySelectorAll 選取多個，如果沒有資料就會返回 []

page.$$eval(selector, pageFunction[, ...args])

多加了$$eval就會把得到的陣列傳給 pageFunction去做 resovler的工作例如

const divsCounts = await page.$$eval('div', divs => divs.length);
這邊會拿到多個div 然後返回每個divs的長度

page.$eval(selector, pageFunction[, ...args])

多加了$eval就會把得到的單一節點傳給 pageFunction去做 resovler的工作例如，select如果沒有拿到值這個會回傳一個 error

const searchValue = await page.$eval('#search', el => el.value);
const preloadHref = await page.$eval('link[rel=preload]', el => el.href);
const html = await page.$eval('.main-container', e => e.outerHTML);

監聽介紹

只監聽一次 once 持續監聽使用on

page.once('load', () => console.log('Page loaded!'));

可監聽的事件 console ， dialog，error，frameattached，framedetached，framenavigated，load，metrics，pageerror，request，requestfailed，requestfinished，response

在執行 evaluate (處理 promise) 的時候 這裡面用到了console ，因為有使用on監聽所以就會跑到 這個監聽範圍之中了，page 監聽的事件不多就列出的這幾個

page.on('console', msg => {
  for (let i = 0; i < msg.args.length; ++i)
    console.log(`${i}: ${msg.args[i]}`);
});
page.evaluate(() => console.log('hello', 5, {foo: 'bar'}));

總結

Puppeteer的Page API應該最常用的就是這頁介紹的這幾個，如果要學爬蟲的$與$$就是最好的瑞士小刀了，使用上就跟原生的querySelector 一樣的用法

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page