Puppeteer

前言

開始學習這門技術的起因是因為之前想要去做一個類似於人人影視的電影資源網站，因此想要通過學習爬蟲獲取到相關的電影資源以供自己下載使用。

之前瞭解爬蟲大多數都是聽到使用python來實現，而因為平時工作比較忙，也沒太多時間去學習新的語言，於是自己就去網上搜索看有沒有前端使用的爬蟲框架。

而網上大多推薦的是node庫--puppeteer

什麼是Puppeteer？

Puppeteer 是一個node庫，他提供了一組用來操縱Chrome的API, 通俗來説就是一個 headless chrome瀏覽器 (當然你也可以配置成有UI的，默認是沒有的)。既然是瀏覽器，那麼我們手工可以在瀏覽器上做的事情 Puppeteer 都能勝任,比如用户的鼠標，鍵盤操作等。

Puppeteer能做些什麼？

1. 可以生成網頁截圖以及生成PDF
2. 爬蟲（常用的）可以爬取到異步加載內容的網頁（基本上都可以爬取到）
3. 模擬用户操作（如：鍵鼠操作，提交表單，打開/關閉/登錄網頁）
4. 實現UI自動化測試，以幫助分析網站的性能問題

運行環境及安裝

因為在puppeteer，大部分都是異步操作，所以你在看各類文檔的時候都能看到async和await這樣的ES7的語法。
官方目前的要求是：

在puppeteerv1.18.1之前需要NODE版本至少是v6.4.0。
從v1.18.1到v2.1.0的NODE版本至少不低於v8.9.0。
從v3.0.0開始，NODE的版本至少不低於v10.18.1
而如果要使用async/await，NODE版本至少不低於v7.6.0

你使用最新的chrome driver，這個在你通過npm安裝puppeteer的時候就會自動檢查你本地的driver版本，然後自動下載最新的chrome driver

通過npm/cnpm/yarn安裝puppeteer
npm install puppeteer --save
cnpm install puppeteer --save
yarn add puppeteer （使用yarn安裝可能出現安裝不上的問題）

簡單使用（截圖操作）

當你完成好puppeteer的安裝後，我們就可以寫一個簡單的例子。開啓我們的學習之路

demo1

// 1. 首先引入puppeteer
const puppeteer = require("puppeteer");

// 2. 啓動puppeteer,啓動瀏覽器引擎
puppeteer
  .launch({
    ignoreHTTPSErrors: true,
    headless: false,
    slowMo: 250,
    defaultViewport: {
      width: 1920,
      height: 1080,
    },
    timeout: 0,
  })
  .then(async (browser) => {
    // 3. 新建一個瀏覽器頁面
    let newPage = await browser.newPage();
    // 4. 給這個頁面設置跳轉的URL
    await newPage.goto("https://www.chapaofan.com/");
    // 5. 給這個頁面截圖
    await newPage.screenshot({
      type: "jpeg",
      path: "../index.jpg",
      fullPage: true,
    });
    // 6. 關閉瀏覽器
    await browser.close();
  });

demo結果

在項目的上一級目錄已經截好了我們需要的圖片

代碼解析（根據上面源碼）

1. puppeteer.launch(options)

該方法用以啓動chrome瀏覽器，它返回一個Promise，使用then方法獲取browser實例，就可以對該瀏覽器進行操作

參數options(這裏舉一些常用參數):
(1) ignoreHTTPSErrors <Boolean>：是否在導航期間忽略HTTPS錯誤，默認為false;
(2) headless <Boolean>：是否在無頭模式下運行瀏覽器，默認為true。這裏的無頭模式通俗講就是有無瀏覽器界面出現（以UI形式展示操作）
(3) slowMo <Number>：將puppeteer操作減少指定的毫秒數，這樣你就可以看清每個操作都做了什麼，這個非常有用
(4) defaultViewport <Object>：
        width：頁面展示的寬度，默認為800
        height：頁面展示的高度，默認為600
(5) timeout：等待 Chrome 實例啓動的最長時間。默認為30000（30秒）。如果傳入 0 的話則不限制時間

2. browser.newPage()

該方法返回一個promise，用以返回一個新的Page對象在瀏覽器中創建新的頁面

3. newPage.goto(url，options)

此方法給新建的頁面在地址欄設置URL值，並跳轉到相應的地址。

參數options：
(1) url <String>：導航到相應的地址，地址應該帶有http或者是https的協議，例如：https://
(2) options:
        timeout <Number>：跳轉的等待時間，單位是毫秒，默認為30秒，設置0表示無限等待直到通過
        {...restOPtions}

4. newPage.screenshot(options)

此方法返回Promise，resolve後是截圖的buffer，用以在打開的頁面上進行截圖操作

參數options:
    (1) path <String>：截圖的保存路徑，截圖圖片類型將從文件拓展名推斷出來。如果是相對路徑，則從相對路徑進行解析（這裏推薦使用相對路徑）。如果沒有指定路徑，圖片將不會被保存到硬盤
    (2) type <String>：指定的截圖類型，jpeg | png，默認為png
    (3) quality <Number>：圖片質量，可選0-100，png格式下不可用
    (4) fullPage <Boolean>：如果設置為true，則截取完整的頁面（包括需要滾動的部分），默認為false
    (5) clip <Object>:
            x <Number>：裁剪區域相對於左上角（0， 0）的x座標
            y <Number>：裁剪區域相對於左上角（0， 0）的y座標
            width <Number>：裁剪寬度
            height <Number>：裁剪高度
    (6) omitBackground <Boolean>：默認隱藏白色背景，背景透明（對png格式挺有用的）
    (7) encoding：圖像編碼可以使base64或binary，默認為“二進制”，圖片編碼格式的轉換對圖片的上傳下載有很大的作用

5. borwser.close()

關閉 Chromium 及其所有頁面(如果頁面被打開的話)。Browser 對象本身被認為是處理過的並不能再被使用。除非你自己重新新建一個browser