如何利用 Puppeteer 爬取數據？

最新 03-31

作為一個程序員，我跟大多數人一樣，都不善言辭，以前也嘗試過錄製視頻，很不理想，無意中發現了GitChat 這個功能，對我們這些不太會錄視頻的人簡直是福音，在這個人人自媒體的時代，大家都可以發光發熱，把自己所了解的跟大家共同分享，真是一件大好事兒。

引言

今天給大家分享下 Puppeteer 的部分功能——抓取網頁內容。本文所演示的環境是在 MacOS，其他平台類似，如有問題，請提出，大家共同討論解決。

介紹 Puppeteer

Puppeteer 是一個提供強大的 API 用來控制操作 Chrome 的類庫。通俗點兒說，你可以通過代碼的方式模擬人在 Chrome 中的各種操作，打開網址、開啟多個 Tab、填寫輸入框，模擬滑鼠軌跡、滾動滾動條，甚至截屏某個元素都可以。具體詳細的內容可以參看 Puppeteer 官方和 API 文檔。

安裝

安裝 Node.js 和 npm

npm 是和 Node.js 一起發布的，所以下載安裝 Node.js 之後，就可以使用 npm 了，可以點擊這裡下載安裝對應的版本。執行下面的內容，顯示出版本信息就證明安裝成功了。

/tmp# node -vv9.3.0/tmp# npm -v5.6.0

初始化項目

（1）新建文件夾 xxx。

（2）初始化 npm 項目。

會生成一個配置文件 package.json，這個文件記錄了我們項目的依賴，移植起來會很方便。

安裝 Puppeteer

因為要下載 Chrome 內核，直接用上面的代碼，國內大部分時候會失敗，原因你懂得。如果安裝的時候出現類似的字樣，這意味著你被無情的擋在了牆裡面。

安裝失敗，就需要手動去下載了，牆再高也擋不住大家熱愛知識的熱情。分兩步，第一步安裝 Puppeteer 代碼，第二部手動下載他所依賴的 Chromuim 內核。

（1）安裝 Puppeteer 代碼。

（2）手動下載 Chromuim。

點擊這裡下載，點進去之後就是對應平台的版本，直接下載就行。下載成功後解壓到我們的項目目錄 spider-puppeteer 下面，Chromium 文件夾需要創建。

基本使用

小試牛刀

如果是自己手動下載的 Chromuim，需要在 puppeteer.launch 的時候手動配置 executablePath 參數，對應可執行文件位置。

參數 headless 表示是否顯示界面，false 顯示界面。

參數 args 用來設置啟動瀏覽器時候的一些參數，其中--window-size=1360,768 表示設置參瀏覽器啟動的時候，瀏覽器窗口的大小，還有很多類似的參數，詳細內容請看傳送門，我們這裡只講用到的，因為參數實在太多了。

效果如下所示，為了讓圖片減小，截取了一部分，但還是有好幾MB。

GIF

進階使用

注入 JavaScript

注入 JavaScript，就是向目標頁面注入我們自己的 JavaScript，方便我們操作、處理頁面元素。比如我們這裡想要獲取到微博用戶主頁的用戶名，習慣用 jQuery 的話就可以主動注入，提高自己的效率。

這裡面又有了下面幾個概念：

waitFor，顧名思義，就是等待的意思，用它可以做很多操作，比如等待頁面元素，頁面中某個元素不確定什麼時候載入出來，但是我們要在元素存在的時候處理，就可以使用這個方法。還可以用它來 sleep，在開啟的頁簽中等待。

evaluate，向頁面中注入代碼執行，並返回結果。

返回結果如下所示：

未注入 jQuery 之前的結果：$ is not defined。

注入 jQuery 之後的結果：燕睿濤Liam。

獲取 Google 翻譯結果

目前為止，我們對 Puppeteer 的基本使用算是有個了解了，接下來我們來做個小工具，抓取 Google 翻譯的結果（Tips：需要翻過高高的圍牆）。

為了讓工具體驗更好我們需要另外一個類庫 commander，用來處理命令行參數。

通過安裝參數處理類庫，下面我們會用到。

獲取谷歌翻譯，我們主要用到了 Puppeteer 的下面幾個知識點兒：

等待頁面元素

模擬聚焦頁面元素輸入框

模擬鍵盤輸入內容

模擬點擊頁面按鈕

獲取頁面元素內容

代碼如下：

執行結果如下所示：

GIF

登錄微博

未登錄狀態只可以看部分微博，所以，獲取微博內容之前，需要我們模擬登陸微博。

使用 Puppeteer 模擬登錄微博的時候，跟我們抓取靜態頁面的模擬登錄不太一樣，我們這裡完全模擬人機交互登錄微博。

登陸的時候 page.waitForNavigation(options) 很重要，一定要等到頁面完全載入完畢，再輸入用戶名密碼，不然會出現輸入中失去焦點的情況，導致登錄失敗。

下面的代碼只是部分代碼，拿出來介紹登錄流程。

爬取微博用戶微博

爬取微博用戶微博，用到了 querystringify 組件，用來解析 query 參數。

安裝過程如下：

爬取用戶微博截圖整體流程：

由於微博是 Lazy Load 模式，不會一次將分頁的所有內容展示出來，需要通過用戶滾動滑鼠滑輪觸發載入事件，我們這裡通過 Puppeteer 發送 JavaScript 命令給頁面，讓頁面滾動載入，詳情見下面的 scrollToPageBar。

抓取微博內容是通過 elementHandle.screenshot([options]) 函數來截取元素快照的。但到目前為止，還有些瑕疵，比如抓取微博內容的時候要對微博列表做各種處理，先隱藏所有，再顯示要截屏的，不然會出現文字被背景覆蓋的情況，不知道是不是 Puppeteer 的 Bug。另外還有它的 Headless 模式，也就是不顯示瀏覽器的模式，抓取內容抓取幾頁之後，可能會隨機的出現「假死」的情況，就卡在截屏操作那裡，也不報錯，這個問題目前還沒找到原因。因此我們這裡一般都將「headless」設置為 false，顯示瀏覽器。請看下面的代碼。

下面是命令行的輸出情況，大家可以試試效果，我這邊抓取了李小璐的所有原創微博，一共970多條，圖片命名方式是 [_.png]。

命令行會記錄腳本的狀態，抓取到第幾頁，每抓取一個就顯示一個"."。

如果你想要抓取自己感興趣的用戶，需要將 weiboSpider.js 中的91、145行代碼替換為自己感興趣的微博用戶對應鏈接。