PJCHENder 未整理筆記

[npm] Puppeteer

2018-02-23

[npm] Puppeteer

@(NodeJS)[npm, JavaScript]

keywords: 爬蟲, crawler, 自動化, chrome, test

puppeteer @ GitHub

常用功能

取得 DOM 元素

keywords: page.$(), page.evaluate(), ElementHandles.dispose()

取得 DOM 元素後,可以透過一般的 Vanilla JS 來操作這些元素:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
puppeteer.launch().then(async browser => {
const page = await browser.newPage()
await page.goto('https://www.example.com')

/**
* 透過 page.$(<selector>) 選取元素
* 把選取到的元素丟到 page.evaluate(fn, arg) 的 arg 中,可以在 fn 透過 Vanilla JS 操作
* 透過 ElementHandles.dispose() 將記憶體回收
**/
const bodyToBeHandle = await page.$('body')
const html = await page.evaluate(body => body.innerHTML, bodyToBeHandle)

// 透過 dispost() 移除
await bodyToBeHandle.dispose()

await browser.close()
})

注意

Puppeteer 是模擬瀏覽器真實的行為,因此沒辦法讓瀏覽器同時輸入多個對話框,因爲一次只能 focus 一個元素

1
2
3
4
5
6
// 不可行的作法!!
await Promise.all([
page.type('#person_id', PERSON_ID), // 輸入身分證字號
page.type('#from_station', FROM_STATION), // 輸入起站
page.type('#to_station', TO_STATION), // 輸入抵達站
])

page.type should block the event loop until complete @ puppeteer github issues

參考

掃描二維條碼,分享此文章