使用Puppeteer擼一個爬蟲

Puppeteer是什麼

puppeteer是谷歌chrome團隊官方開發的一個無界面（Headless）chrome工具。Chrome Headless將成爲web應用自動化測試的行業標杆。因此咱們頗有必要來了解一下它。所謂的無頭瀏覽器是指沒有窗口的瀏覽器。

Puppeteer能作什麼

使用puppeteer咱們可讓瀏覽器幫咱們自動完成不少事情，好比建立頁面的截圖或pdf，自動提交表單，UI測試，鍵盤測試，建立自動化測試環境等。

安裝Puppeteer

經過 npm install puppeteer 或者 yarn add puppeteer來安裝

注意事項

由於用到了es7的async/await語法進行異步處理。因此node版本最好是v7.6.0或以上。

爬蟲實例

對puppeteer有些簡單認識以後，咱們來作一個爬蟲實例加深對puppeteer的印象！

目標網站

如上圖所示，咱們此次的爬取目標是豆瓣電影網分類區按時間排序，評分6-10分的電影信息。最終獲取到的數據是每部電影的海報圖片，電影名稱，評分以及它的id。

代碼分析

1，頁面中引入puppeteer包

2，聲明爬取頁面的url

3， 聲明一個基於promise的定時器，後續代碼中將會用到。

建立一個當即執行的async 方法，後續代碼所有書寫在async方法中。

經過puppeteer.launch()方法建立一個無頭瀏覽器chrome對象browser。

經過browser.newPage()方法建立一個頁面對象page。該page對象你們能夠理解成咱們平常打開瀏覽器以後新建的一個標籤頁，在該標籤頁中訪問站點。

使用page.goto()訪問咱們要爬取的站點，第一個參數爲爬取站點的url，第二個參數options具體信息你們可查詢puppeteer文檔，這裏使用的waitUntil: 'networkidle2'參數指：當至少500ms內不超過兩個網絡請求時判斷頁面請求完成（請原諒我這蹩腳的翻譯）具體請看文檔中該部分說明：

這裏爲了確保瀏覽器請求結束，咱們延遲3s再作後續操做。

 

目標頁面中經過點擊加載更多按鈕進行數據異步獲取，這裏咱們須要經過page對象模擬點擊操做來顯示兩頁數據，讓咱們一次能爬取更多的電影信息。

經過page.waitForSelector()方法等待咱們須要的dom元素頁面中顯示出來。經過審查元素咱們能夠看到在加載更多按鈕上聲明瞭more這一class，因此咱們要等待的元素用css選擇器表示就是'.more'，正如上圖中的30行代碼所示。

隨後咱們經過循環來控制咱們點擊加載更多按鈕的次數，這裏咱們這須要模擬點擊一次來獲取兩頁數據，若想獲取更多數據，可經過修改循環次數來實現。

循環中使用sleep()定時器是爲了確保按鈕真正的出如今了頁面當中作的延遲操做。隨後經過page.click('.more')來模擬加載更多按鈕點擊。

當頁面中顯示足夠咱們須要的數據時，接下來咱們要作的就是獲取這些數據。puppeteer爲咱們提供了page.evaluate()方法實如今該page頁面中執行一段咱們本身定義的腳本功能，其中的回調函數則是咱們欲執行的代碼。

咱們能夠思考一下，倘若咱們能夠在一個html中插入一段js腳本去獲取html中的數據。咱們能夠經過js原生或jquery去獲取相應的dom元素，而後經過dom元素的屬性，文本，或者img的src拿到咱們想要的信息。首先咱們來判斷一下該頁面中是否引入了jQuery庫，若是已引入，咱們則能夠經過jQuery去操做dom獲取數據。

在控制檯打印jQuery對象，查看打印結果

經過返回值能夠肯定該頁面是引入了jquery庫的，咱們能夠大膽使用jquery去操做dom

如上面代碼截圖，咱們先var 一個$ 符號接收頁面中的jquery對象，而後經過jquery選擇器去獲取電影圖片，名稱，評分所在的dom對象。最後經過遍歷這些dom對象將咱們須要的數據存放到數組links中，完成咱們的爬取工做。

最後咱們關閉瀏覽器對象browser並打印咱們爬取的數據，檢查咱們爬蟲代碼是否成功爬取到電影信息。

ok，控制檯成功打印出了咱們爬取的電影信息！