前端爬蟲框架-puppeteer的入門使用（1）

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