puppeteer?其實(shí)已經(jīng)用過(guò)很多次了，記錄一下使用的一些體會(huì)。

首先它的功能和名稱非常匹配，puppeteer是一個(gè)Node.js的一個(gè)庫(kù)，它可以使我們?cè)趎ode中使用js代碼來(lái)控制一個(gè)chromium瀏覽器。我們的一些手動(dòng)的操作基本都能通過(guò)puppeteer來(lái)實(shí)現(xiàn)，所以puppeteer通常也被用來(lái)做自動(dòng)化測(cè)試。由于puppeteer是直接操作的瀏覽器，所以更容易實(shí)現(xiàn)一些爬蟲的功能（不會(huì)涉及cookie、跨域等問(wèn)題）。

puppeteer的API非常清晰?https://pptr.dev/api。

我們?nèi)绻枰L問(wèn)一個(gè)網(wǎng)站，通常需要以下的步驟來(lái)實(shí)現(xiàn)，可以看到代碼層面和我們?nèi)粘５牟僮鬟壿嫹浅Ｏ嗨啤?/p>

我們?nèi)绻胍僮?、獲取網(wǎng)頁(yè)中的一些內(nèi)容，puppeteer的API設(shè)計(jì)也和dom的API非常相似。

如果想要操作dom節(jié)點(diǎn)，我們可以使用$、$$方法，類似于document.querySelector、document.querySelectorAll。但是我們需要注意的是$、$$返回的并不是dom節(jié)點(diǎn)，而是Promise<ElementHandle<NodeFor<Selector>>?|?null>。我們可以通過(guò)ElementHandle去執(zhí)行一些click、focus、type等操作。puppeteer.elementhandle

Page.$() method

Runs?document.querySelector?within the page. If no element matches the selector, the return value resolves to?null.

Page.$$() method

The method runs?document.querySelectorAll?within the page. If no elements match the selector, the return value resolves to?[].

如果我們需要獲取dom中的一些數(shù)據(jù)，需要使用$eval、$$eval。

Page.$eval() method

This method runs?document.querySelector?within the page and passes the result as the first argument to the?pageFunction.

$eval函數(shù)的pageFunction相當(dāng)于是在chromium瀏覽器中運(yùn)行，然后將返回的結(jié)果提供給了我們的nodejs，不能直接將dom返回，因?yàn)閚odejs中執(zhí)行的代碼沒(méi)有辦法保持對(duì)chromium瀏覽器中對(duì)象的引用，如果想要訪問(wèn)chromium頁(yè)面中的對(duì)象、方法，都需要使用puppetter提供的API來(lái)操作。這種方式，有點(diǎn)類似于electron。

puppeteer還提供了非常多的功能，可以植入腳本，切換frame、截圖、轉(zhuǎn)換頁(yè)面保存為PDF等等。我們?cè)谑褂眠^(guò)程中，要簡(jiǎn)單理解puppetter的運(yùn)行流程，我們的nodejs代碼是運(yùn)行在node中，而我們使用的puppetter，則是將一些代碼通過(guò)puppetter運(yùn)行在了chromium瀏覽器中，這兩者是通過(guò)puppetter來(lái)橋接的。