【從入門到放不下系列】記一次用 puppeteer 爬數據的歷程（上）

原創

2020-02-21 17:56

最近因工作需要，學習了 Node 爬蟲，簡單記錄一下我的心路歷程。

首先來說說 puppeteer 這個庫，順手查了一下 puppeteer 這個單詞，它貌似有【操縱木偶的人；操縱傀儡】這方面的含義，這就很好理解啦。這個庫本質上來講是用來做自動化測試的，它提供了一些 API 來直接控制 Chrome 的操作，利用它的這些特性，我們可以用來做 UI Test 或者當做爬蟲來爬取頁面數據。

說好了是從入門開始，那好，我們正式開始入門：

首先，puppeteer 是一個 NPM 包，安裝很方便。

創建項目目錄後執行命令：

$ yarn add puppeteer
或者
$ npm install puppeteer

安裝時會自動下載一個最新版本的 Chromium，後續的所有操作都是直接在 Chromium 中進行的。

在項目目錄下新建 index.js 文件

初試 puppeteer：先亮一亮 puppeteer 的功能和基本用法

我們先來試試用 puppeteer 截個圖

在 index.js 中，添加如下代碼


const puppeteer = require("puppeteer");



(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto("http://www.baidu.com");

await page.screenshot({ path: "baidu.png" });

await browser.close();

})();

隨後再執行

node index.js

執行成功後，puppeteer 在項目根目錄下寫入了截圖，完美~

大致解讀一下這段代碼。很明顯的一個特徵就是 async/await 出現頻率很高。這是 ES7 的特性，puppeteer 很好的支持了 async/await ，因此官方推薦 7.6 以上版本的 Node。其實代碼很簡單，語義化很強，很好理解：


// 引入 puppeteer 庫

const puppeteer = require("puppeteer");



// 使用IIFE，直接執行函數

(async () => {

// 創建 browser 實例

const browser = await puppeteer.launch();

// 新建一個頁面

const page = await browser.newPage();

// 打開百度 URL

await page.goto("http://www.baidu.com");

// 截圖，並設置圖片的存放位置

await page.screenshot({ path: "baidu.png" });

// 關閉瀏覽器

await browser.close();

})();