Skip to main content

[note] puppeteer 筆記

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

puppeteer @ GitHub

常用功能#

取得 DOM 元素#

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

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

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);
// 透過 dispose() 移除
await bodyToBeHandle.dispose();
await browser.close();
});

注意#

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

// 不可行的作法!!
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

參考#

Last updated on