iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 11
0

介紹

這篇來介紹幾個 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


上一篇
Puppeteer & devtools-protocol
下一篇
Puppeteer & Heroku
系列文
Puppeteer30

尚未有邦友留言

立即登入留言